欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jquery實(shí)現(xiàn)下拉框美化特效

 更新時(shí)間：2016年02月02日 08:49:03   作者：子純不語(yǔ)  
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)下拉框美化特效的示例代碼，以一個(gè)完整的實(shí)例進(jìn)行分析講解，感興趣的小伙伴們可以參考一下

平常我們用的原生select下拉框，大部分樣式?jīng)]辦法修改，導(dǎo)致在不同的瀏覽器里面會(huì)跟設(shè)計(jì)圖的風(fēng)格大相徑庭。所以為了能讓它美化起來，就用JQ模擬了一個(gè)下拉框，可以隨意定義樣式。原生的下拉框也保留在div里面隱藏著，方便后臺(tái)開發(fā)人員對(duì)其進(jìn)行操作。

效果圖如下：

HTML代碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>下拉框美化</title>
 <link href="css/style.css" rel="stylesheet"/>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/simSelect.js"></script>
 <script>
 $(function(){
 //下面是調(diào)用初始化語(yǔ)句，class名可通用，也可以ID單獨(dú)定義
 $(".select-box").simSelect();  //什么參數(shù)都不帶，默認(rèn)樣式。建議用這個(gè)，參數(shù)都寫在div上面好了，比較直觀。

 $(".slt-box01").simSelect({  //所有參數(shù)如下：
  maxNum: 4,      //最大下拉個(gè)數(shù)(超過則顯示滾動(dòng)條)，默認(rèn)為5 
  width: 250,      //下拉框盒子寬度，默認(rèn)為200px。為避免過多的設(shè)置寬度，盡量依照項(xiàng)目中最常見的寬度設(shè)定css樣式。
  direction: "down",    //下拉方向，默認(rèn)down，另一個(gè)是up
  disabled: false     //是否禁用，默認(rèn)不禁，禁的話是true
 });

 $(".slt-box02").simSelect({  //舉例：這里寫參數(shù)，div上面也寫參數(shù)的情況。結(jié)果是：會(huì)以div上面的為準(zhǔn)
  maxNum: 4,      
  width: 250,      
  direction: "down"
 });

 $(".slt-box03").simSelect({  //禁用下拉框的話，有三種寫法，任選。建議第二種：
  disabled: true,     //一：這里的參數(shù)寫disabled:true 二：給div加class="disabled" 三：給原生select加disabled="true"
  width: 250      
 });

 $("#slt-box04").simSelect();  //ID單獨(dú)定義。單個(gè)option可以禁用
 });
</script>
</head>
<body>
 <!-- wrap和table非必需,用于布局而已 --> 
 <div class="wrap">
 <table width="600">
  <tbody>
  <tr>
   <th>不帶參數(shù)：</th>
   <td><div class="select-box">
   <select>
    <option>第一個(gè)選項(xiàng)</option>
    <option>第二個(gè)選項(xiàng)</option>
    <option>第三個(gè)選項(xiàng)</option>
    <option>第四個(gè)選項(xiàng)</option>
    <option>第五個(gè)選項(xiàng)</option>
    <option>第六個(gè)選項(xiàng)</option>
   </select>
   </div></td>
  </tr>
  <tr>
   <th>初始化語(yǔ)句寫了參數(shù)：</th>
   <td><div class="slt-box01">
   <select>
    <option>第一個(gè)選項(xiàng)</option>
    <option>第二個(gè)選項(xiàng)</option>
    <option>第三個(gè)選項(xiàng)</option>
    <option>第四個(gè)選項(xiàng)</option>
    <option>第五個(gè)選項(xiàng)</option>
    <option>第六個(gè)選項(xiàng)</option>
   </select>
   </div></td>
  </tr>
  <tr>
   <th>在div上面寫參數(shù)：</th>
   <td><div class="slt-box02 up" max-num="6" width="300">
   <select>
    <option>第一個(gè)選項(xiàng)</option>
    <option>第二個(gè)選項(xiàng)</option>
    <option>第三個(gè)選項(xiàng)</option>
    <option>第四個(gè)選項(xiàng)</option>
    <option>第五個(gè)選項(xiàng)</option>
    <option>第六個(gè)選項(xiàng)</option>
   </select>
   </div></td>
  </tr>
  <tr>
   <th>禁用的樣式：</th>
   <td><div class="slt-box03">
   <select>
    <option>第一個(gè)選項(xiàng)</option>
    <option>第二個(gè)選項(xiàng)</option>
    <option>第三個(gè)選項(xiàng)</option>
    <option>第四個(gè)選項(xiàng)</option>
    <option>第五個(gè)選項(xiàng)</option>
    <option>第六個(gè)選項(xiàng)</option>
   </select>
   </div></td>
  </tr>
  <tr>
   <th>其中一個(gè)選項(xiàng)禁用：</th>
   <td><div id="slt-box04" class="up" max-num="4" width="200">
   <select>
    <option>第一個(gè)選項(xiàng)</option>
    <option>第二個(gè)選項(xiàng)超長(zhǎng)超長(zhǎng)超長(zhǎng)超長(zhǎng)長(zhǎng)啊</option>
    <option disabled="true">第三個(gè)選項(xiàng)</option>
    <option>第四個(gè)選項(xiàng)</option>
    <option>第五個(gè)選項(xiàng)</option>
    <option>第六個(gè)選項(xiàng)</option>
   </select>
   </div></td>
  </tr>
  </tbody>
 </table>
 </div>
</body>
</html>

CSS樣式如下：

@charset "utf-8";
/* 簡(jiǎn)單reset */
body, ul, li {
 margin: 0;
 padding: 0;
}
body {
 font: 14px/24px Microsoft YaHei;
 color: #333;
}
ul { list-style: none; }
a {
 color: #333;
 outline: none;
 text-decoration: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
 text-align: left;
}
/* 布局樣式，非必須 */
.wrap {
 width: 600px;
 margin: 100px auto 0;
 padding: 20px;
 background-color: #d3f3dd;
}
.wrap table th, .wrap table td { padding: 8px 2px; }
.wrap table th {
 font-weight: normal;
 text-align: right;
}
/* 下拉框樣式 必須 */
.select-style ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
.select-style select { display: none; }
.select-style {
 position: relative;
 display: inline-block;
 font-family: Microsoft YaHei;
 color: #666;
 font-size: 14px;
 text-align: left;
 vertical-align: middle;
 z-index: 50;
}
.select-style.focus { z-index: 51; }
.select-style .slt-wrap {
 display: inline-block;
 width: 200px;
 border: solid 1px #d6d6d6;
 vertical-align: middle;
}
.select-style.focus .slt-wrap { border: solid 1px #53a8df; }
.select-style .slt-title {
 position: relative;
 display: block;
 padding: 0 36px 0 5px;
 line-height: 30px;
 height: 30px;
 text-decoration: none;
 background-color: #fff;
 word-break: break-all;
 color: #666;
 overflow: hidden;
}
.select-style .slt-title .slt-text {
 display: inline-block;
 height: 30px;
 *cursor: pointer;
}
.select-style .slt-title i {
 position: absolute;
 right: 0;
 top: 0;
 display: inline-block;
 width: 30px;
 height: 30px;
 background: url(../images/ico-select.png) 0 0 no-repeat;
 *cursor: pointer;
}
.select-style.focus .slt-title i { background-position: 0 -30px; }
.select-style.disabled .slt-title i { 
 background-position: 0 -60px;
 *cursor: default; 
}
.select-style .opn-box {
 display: none;
 position: absolute;
 left: 0;
 top: 31px;
 width: 100%;
}
.select-style.up .opn-box {
 top: auto;
 bottom: 31px;
}
.select-style .opn-box .opn-list {
 position: relative;
 _width: 100%;
 max-height: 130px;
 border: 1px solid #d6d6d6;
 background: #fff;
 overflow-y: auto;
 overflow-x: hidden;
}
.select-style.focus .opn-box .opn-list { border-color: #53a8df; }
.select-style .opn-box .opn-list li {
 display: block;
 _width: 100%;
 padding-left: 5px;
 line-height: 26px;
 height: 26px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 cursor: pointer;
}
.select-style .opn-box .opn-list .selected { background: #d4edfe; }
.select-style .opn-box .opn-list li:hover {
 color: #fff;
 background: #65abda;
}
.select-style .opn-box .opn-list li.disabled {
 color: #cacaca;
 background: #f0f0f0;
 cursor: default;
}
.select-style.disabled .slt-wrap { border: 1px solid #d6d6d6; }
.select-style.disabled .slt-title {
 color: #cacaca;
 background-color: #f0f0f0;
 cursor: default;
}
.select-style.disabled .slt-title .slt-text { *cursor: default; }
/* 下拉框樣式 結(jié)束 */

Jquery代碼如下：

/** 
 * Name : 美化下拉框 
 **/
 (function(jQuery){
  $.fn.simSelect = function (o) {
  o = $.extend({         //設(shè)置默認(rèn)參數(shù) 
   maxNum: 5,         //最大顯示5個(gè)
   width: 200,         //默認(rèn)寬200px。為避免過多的設(shè)置寬度，盡量依照項(xiàng)目中最常見的寬度設(shè)定css樣式。
   direction: "down",       //向下拉，另一個(gè)是up 
   disabled: false        //不可用時(shí)為true
  },o || {});
  return this.each(function(){     //構(gòu)造開始
   if($(this).children(".slt-wrap")){   //去重復(fù) 
    $(this).children(".slt-wrap").remove();
   };
   var $ts = $(this),
    $select = $ts.find("select").eq(0),
    wid = parseFloat($ts.attr("width")),
    num = parseFloat($ts.attr("max-num")),
    $sltWrap = $("<div class='slt-wrap'></div>").prependTo($ts),
    $sltTit = $("<a class='slt-title' hidefocus='true' href='javascript:void(0);'><span class='slt-text'></span><i></i></a>").prependTo($sltWrap),
    $sltText = $(".slt-text", $sltTit),
    $opnBox = $("<div class='opn-box'><ul class='opn-list'></ul></div>").appendTo($sltWrap),
    $opnList = $(".opn-list", $opnBox);
   $ts.addClass("select-style");        //增加一個(gè)class專門作為寫css樣式用
   $select.find("option").each(function(i){     //循環(huán)生成li標(biāo)簽 
    var text = $(this).text(),
     $li = $("<li title='"+text+"'>"+text+"</li>").appendTo($opnList);
    if(this.selected){
     $li.addClass("selected");
     $sltText.text(text).attr("title",text); 
    };
    if(this.disabled){
     $li.addClass("disabled");
     return;
    };
   });
   var $li = $("li",$opnList),
    hei = $li.height();
   if(wid){             //設(shè)置寬度
    $ts.css("width",wid+"px");       //兼容IE6、7
    $sltWrap.css("width",wid-2+"px");        
   }else{
    $ts.css("width",o.width+"px");      //兼容IE6、7
    $sltWrap.css("width",o.width-2+"px");
   }; 
   if(num){             //設(shè)置高度
    $opnList.css("max-height", hei*num+"px");
   }
   else{
    $opnList.css("max-height", hei*o.maxNum+"px");
   };
   if(o.direction == "up"){         //設(shè)置上、下拉方向
    $ts.addClass("up");
   };
   $li.on("click",function(){         //li標(biāo)簽的點(diǎn)擊事件，傳給原生select
    var index = $opnList.find("li").index(this),
     text = $(this).text();
    if($(this).hasClass("disabled")){
     return false;
    };
    $(this).addClass("selected").siblings().removeClass("selected");
    $select.find("option").prop("selected",false).eq(index).prop("selected",true);
    $sltText.text(text).attr("title",text);
    $opnBox.hide();
    $ts.removeClass("focus");
   });
   $sltTit.on("click",function(e){        //a標(biāo)簽的點(diǎn)擊下拉事件
    e.stopPropagation();         //阻止a標(biāo)簽的點(diǎn)擊冒泡  
    if($opnBox.is(":hidden")){
     $(".select-style .opn-box").hide();     
     $(".select-style").removeClass("focus");
     $opnBox.show();
     $ts.addClass("focus");
    }
    else{
     $opnBox.hide();
     $ts.removeClass("focus");
    }
   });
   $select.on("change",function(){        //原生select的點(diǎn)擊事件，傳給ul
    var index = $(this).find("option:selected").index(),
     text = $li.eq(index).text();
    $li.eq(index).addClass("selected").siblings().removeClass("selected");
    $sltText.text(text).attr("title",text);
   });
   $(document).on("click",function(e){       //點(diǎn)擊其他地方收起下拉框
    if($opnBox.is(":visible")){
     $opnBox.hide();
     $ts.removeClass("focus");
    } 
   });
   if($select.prop("disabled") == true || o.disabled == true || $ts.hasClass("disabled")){
    $sltTit.off("click");         //設(shè)置禁用狀態(tài)
    $select.prop("disabled",true);
    $ts.addClass("disabled");
   };
  });
 };
})(jQuery);

兼容到IE7+（IE6其實(shí)也行，只是選項(xiàng)多于5個(gè)下面不會(huì)出現(xiàn)滾動(dòng)條）。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論