Rumah > hujung hadapan web > tutorial js > Kod pelaksanaan kotak lungsur boleh diedit berdasarkan jquery_jquery

Kod pelaksanaan kotak lungsur boleh diedit berdasarkan jquery_jquery

WBOY
Lepaskan: 2016-05-16 16:40:31
asal
1643 orang telah melayarinya

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>
Salin selepas log masuk

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&#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}
Salin selepas log masuk

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);
Salin selepas log masuk

Kemudian tambah parameter lalai

var defaults = { 
 borderCss: "combox_border", 
 inputCss: "combox_input", 
 buttonCss: "combox_button", 
 selectCss: "combox_select",
 datas:[]
};
var options = $.extend(defaults, options);
Salin selepas log masuk

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);//初始化下拉列表
});
Salin selepas log masuk

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;
 }
Salin selepas log masuk

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>
Salin selepas log masuk

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan