Kod pelaksanaan kotak lungsur boleh diedit berdasarkan jquery_jquery

Prinsipnya ialah menambah kotak teks pada ul untuk mensimulasikan kotak lungsur dan menggunakan fon untuk mensimulasikan butang lungsur.

1. Cipta kesan statik

Mula-mula gunakan css dan html untuk menjadikannya kelihatan seperti sepatutnya. Berikut ialah dua Saya menggunakan fon, yang boleh dibuat sendiri di tapak web icomoon. Kelebihan menggunakan fon ialah sangat mudah untuk meletakkan kotak input, dan anda juga boleh mengawal saiz, warna, dsb. Satu-satunya kelemahan ialah IE6 dan IE7 tidak boleh memaparkan fon ini kerana ia tidak menyokong pemilih :before , tetapi ia boleh dicapai melalui beberapa kaedah lain Anda boleh mencubanya sendiri. Di bawah ialah kod 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. Terdapat gaya dan kelas dalam teg Gaya ini adalah atribut yang diperlukan dan mesti mempunyai
2. Bahagian paling luar dibalut dengan span, dan kemudian diberi atribut blok sebaris Sebabnya elemen sebaris digunakan adalah untuk kemudahan susun atur masa hadapan akan disertakan dengan float Terapung dan gaya lain lebih menyusahkan untuk dikawal
3. Ikon-sudut-bawah Ficomoon sedang mentakrifkan fon
4. Kedudukan atribut span adalah relatif Saya merancang untuk menggunakan kedudukan ul untuk mensimulasikan drop-down Kedudukan ul adalah mutlak. berkod
5. Saya menambah tag pada kandungan dalam li. Saya hanya mahu malas di sini terpulang kepada kandungan untuk menukar gaya.

Di bawah ialah kod CSS:

@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot?-fl11l');
 src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
 url('fonts/icomoon.woff?-fl11l') format('woff'),
 url('fonts/icomoon.ttf?-fl11l') format('truetype'),
 url('fonts/icomoon.svg?-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 dan gaya lain di sini boleh disesuaikan dan gaya CSS3 boleh ditambah untuk mencantikkan mereka. Saya buat gaya ringkas di sini.

2. Cipta kesan khas JS

Semasa saya melakukan JS, saya menghadapi masalah pelik, iaitu, tiada ralat akan dilaporkan dalam mana-mana penyemak imbas, tetapi dalam IE6, ia akan menyebabkan ralat sifat objek yang tidak ditetapkan Akhirnya, saya mendapati bahawa ia adalah kerana daripada masalah pengekodan fail js, bukan UTF-8, cuma tukar pengekodan.

Pertama ialah format pemalam jquery

(function($){
 $.fn.combox = function(options) {
 
 };
})(jQuery);

Kemudian tambah parameter lalai

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	下拉列表中的内容

Kemudian terdapat kaedah rendering

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

Janakan kotak input, butang, kotak lungsur turun, lampirkan gaya dan masa secara dinamik. Saya meletakkan tiga rendering dalam tiga fungsi masing-masing untuk menjadikannya lebih jelas

　　　　　　 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;
 }

Saya menambah simbol $ pada parameter dalam tiga fungsi supaya saya dapat mengetahui bahawa ini adalah objek jquery. Tiada masalah teknikal dalam fungsi ini Semuanya adalah logik biasa dan semula jadi Anda juga boleh menukar kod pada bila-bila masa mengikut keperluan anda yang berbeza ubah suai.

Berikut ialah pemalam panggilan:

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

Ia hanya memerlukan satu ayat, yang sangat mudah.

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

Muat turun demo: http://www.jb51.net/jiaoben/199034.html