首頁 > web前端 > js教程 > 基於jquery實作的可編輯下拉框實作程式碼_jquery

基於jquery實作的可編輯下拉框實作程式碼_jquery

WBOY
發布: 2016-05-16 16:40:31
原創
1497 人瀏覽過

原理就是一個textbox加一個ul模擬下拉框,用font模擬一個下拉式按鈕。

一、製作靜態效果

先用css和html,做出一個該有的樣子。這裡這兩個我用的是字體,可以在icomoon網站上面自己做。用字體的好處是和輸入框定位很方便,而且還可以控制大小顏色等,唯一的不足是IE6和IE7由於不支持:before選擇器,導致無法顯示這種字體,但可以通過一些其他方法實現,大家可以自己嘗試。下面是html代碼

<span style="display:inline-block;position:relative" class="combox_border">
 <input type="text" class="combox_input"/><font class="ficomoon icon-angle-bottom combox_button" style="display:inline-block"></font>
 <ul style="position:absolute;top:29px;left:-1px" class="combox_select">
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项一</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项二</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项三</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项四</a></li>
 </ul>
</span>
登入後複製

1、標籤中有style和class,這個style就是必須屬性,一定要有
2.最外圍是用span來做包裹的,然後給了個inline-block屬性,之所以用行內元素是為了以後佈局的方便,換成塊元素也是可以的,但很多時候塊元素會伴隨著float浮動等樣式,控制起來比較麻煩
3、ficomoon icon-angle-bottom在定義字體
4.span的屬性position是relative,下拉我就打算用ul定位來模擬,ul的position是absolute,top以後可以根據jquery來獲取span的高度設置,left就寫死了
5.li裡面的內容我加了個a標籤,這裡就是想偷懶一下,a標籤有個:hover偽類,移上去可以改變CSS,這樣我就能少寫這個移到內容上去變樣式的特效

下面是CSS程式碼:

@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot&#63;-fl11l');
 src:url('fonts/icomoon.eot&#63;#iefix-fl11l') format('embedded-opentype'),
 url('fonts/icomoon.woff&#63;-fl11l') format('woff'),
 url('fonts/icomoon.ttf&#63;-fl11l') format('truetype'),
 url('fonts/icomoon.svg&#63;-fl11l#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}
.ficomoon{font-family:'icomoon';}
.icon-angle-top:before {content: "\f102"}.icon-angle-bottom:before {content: "\f103"}
/*下面的可根据自己的实际情况做修改*/
.combox_border{border:1px solid #c2c2c2;height:28px;width:245px}
.combox_input{border:0;line-height:25px;height:25px;padding-left: 5px;width:85%;vertical-align: middle;}
.combox_button{width:12%;text-align:center;vertical-align: middle;cursor:pointer;border-left:1px solid #c2c2c2}
.combox_select{border:1px solid #c2c2c2;border-top:0;width:100%}
.combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;}
.combox_select a {display: block;line-height: 28px;padding: 0 8px;text-decoration: none;color: #666;}
.combox_select a:hover {text-decoration: none;background:#f5f5f5}
登入後複製

這裡的combox_border等樣式可以自訂,可以加CSS3樣式美化,我這裡就做了個樸素的樣式。

二、製作JS特效

在做JS的時候,碰到個奇怪的問題,就是放在任何瀏覽器中都不會報錯,但是在IE6死活提示未設定的物件屬性的錯誤,最後發現是因為js檔案編碼的問題,不是UTF-8,改變下編碼就可以了。

先是一個jquery外掛程式格式

(function($){
 $.fn.combox = function(options) {
 
 };
})(jQuery);
登入後複製

然後是新增預設參數

var defaults = { 
 borderCss: "combox_border", 
 inputCss: "combox_input", 
 buttonCss: "combox_button", 
 selectCss: "combox_select",
 datas:[]
};
var options = $.extend(defaults, options);
登入後複製

borderCss 最外面包裹的样式,就是上面的span
inputCss 输入框的样式
buttonCss 按钮的样式,就是
selectCss 下拉列表的样式
datas 下拉列表中的内容

然後是一個渲染的方法

this.each(function() {
var _this = $(this);
_this = _initBorder(_this);//初始化外框CSS IE6中需要有返回值
_this = _initInput(_this);//初始化输入框
_initSelect(_this);//初始化下拉列表
});
登入後複製

動態的產生輸入框,按鈕,下拉框,附上樣式和時間。我將三個渲染分別放在了三個函數中,這樣清晰一點

       function _initBorder($border) {//初始化外框CSS
 $border.css({'display':'inline-block', 'position':'relative'}).addClass(options.borderCss);
 return $border;
 }
 
 function _initInput($border){//初始化输入框
 $border.append('<input type="text" class="'+options.inputCss+'"/>');
 $border.append('<font class="ficomoon icon-angle-bottom '+options.buttonCss+'" style="display:inline-block"></font>');
 //绑定下拉特效
 $border.delegate('font', 'click', function() {
 var $ul = $border.children('ul');
 if($ul.css('display') == 'none') {
 $ul.slideDown('fast');
 $(this).removeClass('icon-angle-bottom').addClass('icon-angle-top');
 }else {
 $ul.slideUp('fast');
 $(this).removeClass('icon-angle-top').addClass('icon-angle-bottom');
 } 
 });
 return $border;//IE6需要返回值
 }
 
 function _initSelect($border) {//初始化下拉列表
 $border.append('<ul style="position:absolute;left:-1px;display:none" class="'+options.selectCss+'">');
 var $ul = $border.children('ul');
 $ul.css('top',$border.height()+1);
 var length = options.datas.length;
 for(var i=0; i<length ;i++)
 $ul.append('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+options.datas[i]+'</a></li>');
 $ul.delegate('li', 'click', function() {
 $border.children(':text').val($(this).text());
 $ul.hide();
 $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变
 });
 return $border;
 }
登入後複製

三個函數中的參數我都加了個$符號,便於自己知道這是一個jquery物件。這幾個函數中沒什麼技術困難,都是非常普通自然的邏輯,大家也可以隨時依照自己的不同需求改變程式碼,插件總共只有50幾行,非常容易修改。

下面是呼叫外掛:

<script type="text/javascript">
$(document).ready(function() {
 $('#combox').combox({datas:['选项一','选项二','选项三']});
})
</script>
</head>
<body>
  <span id="combox"></span>
</body>
</html>
登入後複製

一句話就可以了,挺方便的。

demo示範:http://demo.jb51.net/js/2014/combox_jquery/

demo下載:http://www.jb51.net/jiaoben/199034.html

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板