忙里偷闲，写了一个JQuery插件

相比HTML原生的select控件，bootstrap提供的drop-down控件不仅更好看，在各个浏览器下的样式更统一，而且可以添加很多个性化的设置，比如单按钮/分裂式、各种尺寸、向上弹出等等。

然而bootstrap并没有提供很便捷的使用方法，要想创建一个这样的drop-down控件，至少需要10到20行左右的HTML代码，之后添加数据、添加事件还需要用JQuery直接操作DOM结点，一两个还好，写多了绝对把人逼疯。

手写drop-down实例：

<div class="btn-group">
  <button type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

开始时我将创建和加载数据写成了公共方法，但这样效率仍不够高，不够灵活。于是想到了JQuery插件，就忙里偷闲，写了一个，目前功能还不够完善，以后有时间会再更新。

jDropdown——GtiHub

附：jDropdown简要说明

include the files

<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/jdropdown.min.js"></script>

call the the plugin on a element as your wish

$("#element").jDropdown(method, options);

here ‘s an example for how to initizlize and load data for a drop-down control

$(document).ready(function () {
    $('#drop-ctrl').jDropdown('init', {
        width: '200px'
    });
    var dataList = [
        { key: '1', value: 'January' },
        { key: '2', value: 'February' },
        { key: '3', value: 'March' },
        { key: '4', value: 'April' },
        { key: '5', value: 'May' },
        { key: '6', value: 'June' },
        { key: '7', value: 'July' },
        { key: '8', value: 'August' },
        { key: '9', value: 'September' },
        { key: '10', value: 'October' },
        { key: '11', value: 'November' },
        { key: '12', value: 'December' }
    ];
    $('#drop-ctrl').jDropdown('loadData', dataList, {
        key: 'key',
        value: 'value',
        defaultValue: 'Select',
        func: function (msg) {
            alert('You selected "' + msg + '"');
        },
        separator: [3, 6, 9]
    });
});