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>'; } ?>
文章出处:
版权声明:本文由微站Blog发布,如需转载请注明出处。
免责声明:微站技术博客所有资料搜集整理于互联网或者网友提供,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。资料获取后24小时内请删除资料,不得用于任何商业用途。否则后果自负!博主不保证资料的安全性!也不承担任何责任!切勿用博主分享的任何资料运营!