插件描述：今天我给大家介绍一款下拉选择框，有5种漂亮的样式可供我们选择，真的蛮实用的
今天我给大家介绍一款下拉选择框，有5种漂亮的样式可供我们选择，真的蛮实用的
预览图
width="474" height="300" title="下拉框" alt="下拉框"/>
alt=""/>
alt=""/>
使用步骤
该插件有5种表现形式，下面我就介绍一下第一种样式的实现，其它的大概一致，大家可以参考 Demo
1、引入以下的js和css文件
1 2 | <link rel="stylesheet" type="text/css" href="css/style.css"> |
2、在head标签中加入以下js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <script type="text/javascript"> function DropDown(el) { this.dd = el; this.placeholder = this.dd.children('span'); this.opts = this.dd.find('ul.dropdown > li'); this.val = ''; this.index = -1; this.initEvents(); } DropDown.prototype = { initEvents: function() { var obj = this; obj.dd.on('click', function(event) { $(this).toggleClass('active'); return false; }); obj.opts.on('click', function() { var opt = $(this); obj.val = opt.text(); obj.index = opt.index(); obj.placeholder.text('Gender: ' + obj.val); }); }, getValue: function() { return this.val; }, getIndex: function() { return this.index; } } $(function() { var dd = new DropDown($('#dd')); $(document).click(function() { // all dropdowns $('.wrapper-dropdown-1').removeClass('active'); }); });</script> |
3、在body标签中加入以下格式的html代码
1 2 3 4 5 6 7 8 9 10 11 | <div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>Gender</span> <ul class="dropdown" tabindex="1"> <li> <a href="#">Male</a> </li> <li> <a href="#">Female</a> </li> </ul></div> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com