当前位置:首页 > CMS系统 > pbootcms > PbootCMS实现切换不同的列表效果,图片列表/文字列表/图文混合

PbootCMS实现切换不同的列表效果,图片列表/文字列表/图文混合

鲁豫2年前 (2022-07-26)pbootcms1421

列表效果切换

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

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

点击页面按钮即可进行切换,前端无冗余代码,通过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>';

  }

  ?>



文章出处: 阅读原文

版权声明:本文由微站Blog发布,如需转载请注明出处。

免责声明:微站技术博客所有资料搜集整理于互联网或者网友提供,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。资料获取后24小时内请删除资料,不得用于任何商业用途。否则后果自负!博主不保证资料的安全性!也不承担任何责任!切勿用博主分享的任何资料运营!

本文链接:http://ai.vzcc.cc/post/56.html

分享给朋友:

“PbootCMS实现切换不同的列表效果,图片列表/文字列表/图文混合” 的相关文章

发表评

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。