destoon 5.0模板使用之：分类属性的美化和筛选条件设置
发现其他的商城都有这个功能，而destoon却没有，所以也加上这个功能。经过美化就做成了以下的效果。但却是按循序排列的，但是不影响使用。http://www.destoon.org.cn/skin/default/image/lazy.gif
源代码
html
portant;">
{if $CP}
div class="filter_box">
dl>
dt class="filter_t">分类：dt>
dd class="{if !$catid==$catid}seling_all{else}seled_all{/if}">a href="{$MODULE}">全部a>dd>
dd class="filter_choose">
{php $sub = get_maincat(0, 16, 1);}
{loop $sub $j $s}
div class="{if $s==$catid}seling{else}seled{/if}">
a href="{$MODULE}{$s}">{$s}a>
div>
{/loop}
dd>
div class="clear">div>
dl>
{loop $PPT $p}
dl>
dt class="filter_t">{$p}：dt>
input type="hidden" name="ppt_{$p}" id="ppt_{$p}" value="{$p}"/>
dd class="{if $p==''}seling_all{else}seled_all{/if}">
a href="###" onclick="Dd('ppt_{$p}').value='';Dd('fsearch').submit();">全部a>
dd>
dd class="filter_choose">
{loop $p $o}
div class="{if $p==$o}seling{else}seled{/if}">
a href="###" onclick="Dd('ppt_{$p}').value='{$o}';Dd('fsearch').submit();">{$o}a>
div>
{/loop}
dd>
div class="clear">div>
dl>
{/loop}
div>
div class="search_title">
div class="spanbt">共有span class="orange">{$items}span>条信息div>
span class="fl">已选条件：span>
ul class="fl">
{loop $PPT $p}{loop $p $o}{if $p==$o}
li class="search_value">span>{$o}span>
label class="search_value_close" onclick="Dd('ppt_{$p}').value='';Dd('fsearch').submit();">label>
li>
{/if}{/loop}{/loop}
ul>
a href="{$MOD}search.php" id="Del_searchList" style="">清空所有条件a>
div>
{/if}
CSS
portant;">
.filter_box { width:auto; height:auto; }
.filter_box a { cursor:pointer; }
.filter_box dl { width:100%; height:auto; }
.filter_t{ width:60px; float:left; display:block; line-height:28px; height:30px; text-align:right; font-size:14px; font-weight:bold; font-family: "Microsoft YaHei", monospace !important; }
.filter_box dd { margin:8px 0px 0px 10px; float:left; display:block; }
.filter_choose { width:620px; display:block; }
.seling_all a { width:30px; padding-left:18px; line-height:14px; float:left; display:block; background:#70943c url(images/sel-select2.jpg) no-repeat; text-decoration:none; color:white; }
.seling_all a:link, .seling_all a:visited, .seling_all a:active { color:white; }
.seled_all a { width:30px; padding-left:18px; line-height:14px; float:left; display:block; background:#f3f3f3 url(images/sel-select1.jpg) no-repeat; text-decoration:none; }
.seling a { float:left; line-height:14px; margin:0px 18px 10px 0px; padding-left:18px; background:#70943c url(images/sel-select2.jpg) no-repeat; text-decoration:none; color:white; }
.seling { width: 122px; float: left; }
.seling a:visited { color:white; }
.seled a { width: 98px; line-height: 14px; margin: 0px 8px 10px 0px; padding-left: 18px; float: left; background:url(images/sel-select1.jpg) no-repeat; }
.search_title{font-family: "Microsoft YaHei";font-size: 14px;}
.search_title .spanbt { float: left; padding: 0 10px; }
.search_value { margin-top: 5px; height: 15px; line-height: 15px; float: left; border: 1px solid #FFA63C; margin-right: 10px; display: inline; white-space: nowrap; }
.search_value span { float: left; padding: 0 4px; height: 15px; line-height: 15px; overflow: hidden; }
.search_value_close { width: 16px; height: 15px; background: url(images/search_select.gif) no-repeat; cursor: pointer; float: left; }
图片素材
鼠标右键保存，在重新命名，放到风格文件夹的 images 目录下。
search_select.gif
http://www.destoon.org.cn/skin/default/image/lazy.gif
sel-select1.jpg
http://www.destoon.org.cn/skin/default/image/lazy.gif
sel-select2.jpg
http://www.destoon.org.cn/skin/default/image/lazy.gif
关键词：
destoon模板
destoon分类属性
destoon二次开发
页:
[1]