destoon 5.0模板使用之：分类属性的美化和筛选条件设置

发现其他的商城都有这个功能，而destoon却没有，所以也加上这个功能。经过美化就做成了以下的效果。但却是按循序排列的，但是不影响使用。

源代码

html

{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[16][linkurl]}">全部a>dd>
            
                <dd class="filter_choose">
                  {php $sub = get_maincat(0, 16, 1);}
                  {loop $sub $j $s}
                  <div class="{if $s[catid]==$catid}seling{else}seled{/if}">
                    <a href="{$MODULE[16][linkurl]}{$s[linkurl]}">{$s[catname]}a>
            
                  div>
            
                  {/loop}
                dd>
            
                <div class="clear">div>
            
              dl>
            
              {loop $PPT $p}
              <dl>
                <dt class="filter_t">{$p[name]}：dt>
            
                <input type="hidden" name="ppt_{$p[oid]}" id="ppt_{$p[oid]}" value="{$p[select]}"/>
                <dd class="{if $p[select]==''}seling_all{else}seled_all{/if}">
                  <a href="###" onclick="Dd('ppt_{$p[oid]}').value='';Dd('fsearch').submit();">全部a>
            
                dd>
            
                <dd class="filter_choose">
                {loop $p[options] $o}
                  <div class="{if $p[select]==$o}seling{else}seled{/if}">
                    <a href="###" onclick="Dd('ppt_{$p[oid]}').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[options] $o}{if $p[select]==$o}
                <li class="search_value"><span>{$o}span>
            
                  <label class="search_value_close" onclick="Dd('ppt_{$p[oid]}').value='';Dd('fsearch').submit();">label>
            
                li>
            
                {/if}{/loop}{/loop}
              ul>
            
              <a href="{$MOD[linkurl]}search.php" id="Del_searchList" style="">清空所有条件a>
            
            div>
            
            {/if}

CSS

.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

sel-select1.jpg

sel-select2.jpg