列表效果切换
本示例展示了三种常用的列表效果
即:图片列表/文字列表/图文混合展示互相一键切换
点击页面按钮即可进行切换,前端无冗余代码,通过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>';
}
?>