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

来源:Detoon爱好者   2015-07-31 阅读:1456
 发现其他的商城都有这个功能,而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:autoheight:auto; }
.filter_box a { cursor:pointer; }
.filter_box dl { width:100%height:auto; }
.filter_t  { width:60pxfloat:leftdisplay:blockline-height:28pxheight:30pxtext-align:rightfont-size:14pxfont-weight:boldfont-family"Microsoft YaHei"monospace !important; }
.filter_box dd { margin:8px 0px 0px 10pxfloat:leftdisplay:block; }
.filter_choose { width:620pxdisplay:block; }
.seling_all a { width:30pxpadding-left:18pxline-height:14pxfloat:leftdisplay:blockbackground:#70943c url(images/sel-select2.jpg) no-repeattext-decoration:nonecolor:white; }
.seling_all a:link, .seling_all a:visited, .seling_all a:active { color:white; }
.seled_all a { width:30pxpadding-left:18pxline-height:14pxfloat:leftdisplay:blockbackground:#f3f3f3 url(images/sel-select1.jpg) no-repeattext-decoration:none; }
.seling a { float:leftline-height:14pxmargin:0px 18px 10px 0pxpadding-left:18pxbackground:#70943c url(images/sel-select2.jpg) no-repeattext-decoration:nonecolor:white; }
.seling { width122pxfloatleft; }
.seling a:visited { color:white; }
.seled a { width98pxline-height14pxmargin0px 8px 10px 0pxpadding-left18pxfloatleftbackground:url(images/sel-select1.jpg) no-repeat; }
.search_title{font-family"Microsoft YaHei";font-size14px;}
.search_title .spanbt { floatleftpadding0 10px; }
.search_value { margin-top5pxheight15pxline-height15pxfloatleftborder1px solid #FFA63Cmargin-right10pxdisplayinlinewhite-spacenowrap; }
.search_value span { floatleftpadding0 4pxheight15pxline-height15pxoverflowhidden; }
.search_value_close { width16pxheight15pxbackgroundurl(images/search_select.gif) no-repeatcursorpointerfloatleft; }

图片素材

鼠标右键保存,在重新命名,放到风格文件夹的 images 目录下。

search_select.gif

search_select.gif

 

sel-select1.jpg

sel-select1.jpg

 

sel-select2.jpg

sel-select2.jpg

 

免责声明:
本站部份内容系网友自发上传与转载,不代表本网赞同其观点;
如涉及内容、版权等问题,请在30日内联系,我们将在第一时间删除内容!

警惕:同行“某一科技”长期盗卖我公司原创模板,如此卑鄙行径令人不耻,请DT用户谨慎与此人合作,以免网站资源被偷盗下载、转手盗卖,造成重大损失。

电话

咨询电话:
0775-7279380(座机)
18176930112 13878897862

微信咨询

千人QQ交流群

购物车

客服

顶部