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小时内请删除资料，不得用于任何商业用途。否则后果自负！博主不保证资料的安全性！也不承担任何责任！切勿用博主分享的任何资料运营！
