[天友网]PbootCMS实现切换不同的列表效果，图片列表/文字列表/图文混合

列表效果切换

本示例展示了三种常用的列表效果

即：图片列表/文字列表/图文混合展示互相一键切换  

点击页面按钮即可进行切换，前端无冗余代码，通过PHP进行判断即可

具体代码如下，根据自己情况和写的代码进行删减即可，默认展示的是图文混合列表

注意echo时如果最外面用的单引号，那么代码里面最好不要出现单引号，双引号也是一样的

<h3 class="order">

    列表效果：<a href="?id=pics" <?php $id=$_GET'id'; if($id === "pics") {echo 'class=active';} else {}?>>图片列表</a>

    <a href="?id=text" <?php $id=$_GET'id'; if($id === "text") {echo 'class=active';} else {}?>>文字列表</a>

    <a href="?id=media" <?php $id=$_GET'id'; if($id === "media") {echo 'class=active';} else {}?>>图文展示</a>

  </h3>

  <?php 

  $id=$_GET'id';

  if($id === "pics") {

    echo '<!-- HOT文章 -->

    <div class="recommend" style="margin: 0 0 10px 0;">

      <ul class="rec-ul">

        {pboot:list scode={sort:scode} num=16 order=date page=1 isico=1}

        {pboot:if(list:visits>200)}

        <li>

          <a href="list:link" title="list:title">

            <div class="rec-box rec-hot-box">

              <div class="img-box">

                <img src="list:ico" alt="list:title">

                <span>list:visits 浏览</span>

              </div>

            </div>

          </a>

        </li>

        {else}

        <li>

          <a href="list:link" title="list:title">

            <div class="rec-box">

              <div class="img-box">

                <img src="list:ico" alt="list:title">

                <span>list:visits 浏览</span>

                <span style="top: 8px;">list:date style=Y-m-d</span>

              </div>

            </div>

          </a>

        </li>

        {/pboot:if}

        {/pboot:list}

      </ul>

    </div>';

  } elseif($id === "text") {

    

    echo '<ul>

      {pboot:list scode={sort:scode} num=8 order=sorting page=1}

      <li class="note-li">

        <a href="list:link" title="list:title">

          <div class="flex-column">

            <div class="text-box">

              <h4>list:title</h4>

              <p class="intro">list:content drophtml=1 dropblank=1 lencn=120</p>

              <p><span><i class="fa fa-clock-o" aria-hidden="true"></i> list:date style=Y-m-d</span><span><i class="fa fa-eye" aria-hidden="true"></i> list:visits 浏览</span><span><i class="fa fa-thumbs-up" aria-hidden="true"></i> list:likes 点赞</span></p>

            </div>

          </div>

        </a>

      </li>

      {/pboot:list}

    </ul>';

  } elseif($id === "media") {

    echo '<ul>

      {pboot:list scode={sort:scode} num=8 order=sorting page=1}

      <li class="note-li">

        <a href="list:link" title="list:title">

          <div class="flex-column">

            {pboot:if(list:isico==1)}

            <div class="img-box">

              <img src="list:ico" alt="list:title">

            </div>

            {/pboot:if}

            <div class="text-box">

              <h4>list:title</h4>

              <p class="intro hidden-sm">list:content drophtml=1 dropblank=1 lencn=120</p>

              <p><span><i class="fa fa-clock-o" aria-hidden="true"></i> list:date style=Y-m-d</span><span><i class="fa fa-eye" aria-hidden="true"></i> list:visits 浏览</span><span><i class="fa fa-thumbs-up" aria-hidden="true"></i> list:likes 点赞</span></p>

            </div>

          </div>

        </a>

      </li>

      {/pboot:list}

    </ul>';

  } else {

    echo '<ul>

      {pboot:list scode={sort:scode} num=8 order=sorting page=1}

      <li class="note-li">

        <a href="list:link" title="list:title">

          <div class="flex-column">

            {pboot:if(list:isico==1)}

            <div class="img-box">

              <img src="list:ico" alt="list:title">

            </div>

            {/pboot:if}

            <div class="text-box">

              <h4>list:title</h4>

              <p class="intro hidden-sm">list:content drophtml=1 dropblank=1 lencn=120</p>

              <p><span><i class="fa fa-clock-o" aria-hidden="true"></i> list:date style=Y-m-d</span><span><i class="fa fa-eye" aria-hidden="true"></i> list:visits 浏览</span><span><i class="fa fa-thumbs-up" aria-hidden="true"></i> list:likes 点赞</span></p>

            </div>

          </div>

        </a>

      </li>

      {/pboot:list}

    </ul>';

  }

  ?>