仿银泰网-产品分类列表

于 2013-01-11 16:48:17 发布
阅读量156 收藏
点赞数
分类专栏： jquery 文章标签： jquery ViewUI


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
  margin:0;
  padding:0;
}
body{
  text-align:center;
  margin-top:10px;
}
a{
  color:#666;
  text-decoration:none;
}
a:hover{
  color:blue;
}
ul{
  list-style:none;
}
li{
  display:inline-block;
}
#outDiv{
  width:980px;
  margin:0 auto;
}
#input_btn{
  right:20px;
  height:40px;
  width:980px;
  background-color:#ddd;
  text-align:right;
  line-height:35px;
  border-bottom:1px solid #fff;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  border-top:1px solid #ccc;
}
#choose{
  margin-top:8px;
  margin-right:10px;
  border:1px solid #999;
  background-color:#eee;
  padding:2px;
}
#content{
  width:940px;
  background:#eee;
  border-left:1px solid #ccc;
  border-right:1px solid #ccc;
  border-bottom:1px solid #ccc;
  padding-left:20px;
  padding-right:20px;
  float:left;
}
.form_div{
  width:940px;
  padding-top:5px;
  padding-bottom:5px;
  border-bottom:1px dotted #666;
  float:left;
}
.form_div{
  float:left;
}
div.no_border{
  border-bottom:none;
}
.form_div dl dt{
  width:100px;
  display:block;
  padding-top:15px;
}
.form_div dl dd{
  width:700px;
  display:block;
  text-align:left;
  padding-top:5px;
  padding-bottom:5px;
}
.form_div dl dt, .form_div dl dd{
  float:left;
}
.form_div dl dd ul li{
  padding-right:10px;
  padding-bottom:5px;
  padding-top:5px;
}
.price_range{
  border:1px solid #999;
  width:40px;
  color:#999;
}
#confirm_btn input{
  width:100px;
  height:30px;
  background-color:#eee;
  border-bottom:1px solid #ddd;
  border-right:1px solid #ddd;
  border-left:1px solid #ddd;
  border-top:none;
  margin-top:-2px;
}
.inputs{
  width:12px;
  height:12px;
  visibility:hidden;
}
.open_div{
  float:right;
  width:60px;
  height:20px;
  border:1px solid #999;
  line-height:20px;
  margin-top:8px;
}
.no_show{
  display:none;
}
.hide_div{
  display:none;
}
</style>
</head>

<body>
<div id="outDiv">
<div id="input_btn">
   <input id="choose" type="button" value=" -单选 " />
</div>
<div id="content">
  <form>
     <div class="form_div">
     <div id="category">
     <dl>
     <dt>分类：</dt>
     <dd>
        <ul>
           <li>
              <input type="radio" class="inputs" name="cate"/>
           <label>
        <a href="#">裙装<span>(1000)</span></a>
     </label>
           </li>
     <li>
              <input type="radio" class="inputs"  name="cate" />
           <label>
        <a href="#">裙装<span>(1000)</span></a>
     </label>
           </li>
     <li>
              <input type="radio" class="inputs"  name="cate" />
           <label>
        <a href="#">裙装<span>(1000)</span></a>
     </label>
           </li>
        </ul>
     </dd>
  </dl>
  </div>
  </div>
  <div class="form_div">
  <div id="brand">
     <dl>
     <dt>品牌：</dt>
     <dd>
        <ul>
           <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">Only<span>(1000)</span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">Only<span>(1000)</span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">Only<span>(1000)</span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">Only<span>(1000)</span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">Only<span>(1000)</span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">Only<span>(1000)</span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">Only<span>(1000)</span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">Only<span>(1000)</span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">Only<span>(1000)</span></a>
     </label>
           </li>
        </ul>
     </dd>
  </dl>
  </div>
  <div class="open_div">
     <a href="javascript:void(0)">展开</a>
  </div>
  </div>
  <div class="form_div">
  <div id="color">
     <dl>
     <dt>颜色：</dt>
     <dd>
        <ul>
           <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">black<span></span></a>
     </label>
           </li>
        </ul>
     </dd>
  </dl>
  </div>
  <div class="open_div">
     <a href="javascript:void(0)">展开</a>
  </div>
  </div>
  <div class="form_div">
  <div id="popular_element">
     <dl>
     <dt>流行元素：</dt>
     <dd>
        <ul>
           <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">简约<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">简约<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">简约<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">简约<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">简约<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">简约<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">简约<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">简约<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">简约<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">简约<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">简约<span></span></a>
     </label>
           </li>
        </ul>
     </dd>
  </dl>
  </div>
  <div class="open_div">
     <a href="javascript:void(0)">展开</a>
  </div>
  </div>
  <div class="form_div no_border" id="img_div">
  <div id="img">
     <dl>
     <dt>图案：</dt>
     <dd>
        <ul>
           <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">纯色<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">纯色<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">纯色<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">纯色<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">纯色<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">纯色<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">纯色<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">纯色<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">纯色<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">纯色<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">纯色<span></span></a>
     </label>
           </li>
        </ul>
     </dd>
  </dl>
  </div>
  <div class="open_div">
     <a href="javascript:void(0)">展开</a>
  </div>
  </div>
  <div class="form_div show_div hide_div">
  <div id="season">
     <dl>
     <dt>销售季节：</dt>
     <dd>
        <ul>
           <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
     <li class="no_show show_hide">
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">春秋<span></span></a>
     </label>
           </li>
        </ul>
     </dd>
  </dl>
  </div>
  <div class="open_div">
     <a href="javascript:void(0)">展开</a>
  </div>
  </div>
  <div class="form_div show_div no_border hide_div">
  <div id="price">
     <dl>
     <dt>价格：</dt>
     <dd>
        <ul>
           <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">0-100元<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">100-200元<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">200-500元<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">500-1000元<span></span></a>
     </label>
           </li>
     <li>
              <input type="checkbox" class="inputs" />
           <label>
        <a href="#">1000以上<span></span></a>
     </label>
           </li>
     <li class="price_input">
              <input type="text" class="price_range" value="￥"/>-<input type="text"  class="price_range"  value="￥"/>
     <input id="confirm_price" style="border:1px solid #999; width:40px; background-color:#fff; display:none" type="button" value="确定" />
           </li>
        </ul>
     </dd>
  </dl>
  </div>
  </div>
  <div style="clear:both"></div>
  </form>
</div>
  <div id="confirm_btn"><input id="open_btn" type="button" value="展开" /></div>
</div>

<script>
/*
* 仿银泰产品分类列表；
* ie8，ff， opera中测试可用，其余浏览器未测；
* ******made by keimon*******
* *******2013-01-11*********
*/
$(function(){
 //底部展开，收起按钮；
  $('#open_btn').click(function(){
     if($(this).val()=='展开'){
        $('.show_div').slideDown();
       $('#img_div').removeClass('no_border');
       $(this).val('收起')
    }else{
       $('.show_div').slideUp();
       $('#img_div').addClass('no_border');
       $(this).val('展开')
    }
  })
  //右侧展开，收起按钮；
  var len = $('.open_div').length;
  for(var i=0; i<len; i++){
    $('.open_div').eq(i).click(function(){
      if($(this).find('a').html()=='展开'){
        $($(this).get(0).parentNode).find('.show_hide').removeClass('no_show');
        $(this).find('a').html('收起');
     }else{
        $($(this).get(0).parentNode).find('.show_hide').addClass('no_show')
        $(this).find('a').html('展开')
     }
   })
  }
  //右上方单选，多选按钮；
  $('#choose').click(function(){
     if($(this).val().indexOf('单选')!=-1){
       $('.inputs').css('visibility','visible');
      $('#price').find('li').hide().end().find('.price_input').show();
      $(this).val(' +多选 ');
    }else{
       $('.inputs').css('visibility','hidden');
      $('#price').find('li').show();
      $(this).val(' -单选 ');
    }
    clickChoose();
  })
 
  //价格input的获得焦点与失去焦点
  $('.price_range').focus(function(){
     if($(this).val()=='￥'){
       $(this).val('');
    }
  })
  $('.price_range').blur(function(){
     if($(this).val()==''){
       $(this).val('￥');
    }
  })
  //价格input根据右上方是否是‘单选’按钮，决定是否增加按钮，背景
  function clickChoose(){
     if($('#choose').val().indexOf('单选')!=-1){
        var timer
        $('.price_range').add($('#confirm_price')).bind('mouseenter',function(){
        clearTimeout(timer)
     $('#confirm_price').show();
     $('.price_input').css({'backgroundColor':'#fff','paddingLeft':'10px'});
     })
     $('.price_range').add($('#confirm_price')).bind('mouseout',function(){
          timer = setTimeout(function(){
           $('#confirm_price').hide();
        $('.price_input').css({'backgroundColor':'','paddingLeft':'0px'});
     },300)
     })
 
     $('#confirm_price').hover(function(){
           $(this).css('backgroundColor','#eee');
        },function(){
           $(this).css('backgroundColor','#fff');
        })
     }else{
        $('.price_range').add($('#confirm_price')).unbind('mouseenter').unbind('mouseout');
     }
  }
  //默认是‘单选’，因此先调用此方法；
  clickChoose()
})
</script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值