只要是好东西，都应该主动分享出来，让大家都用起来；鼓励开源，大家一起，为积累更多更好的东西而奋斗！
自定义下拉框（dropdownlist）
DropDownList.create(configs)点击展开
一、接口功能
根据配置创建自定义下拉框
二、参数说明
/**
* 根据配置创建自定义下拉框
*
* @param {Object} configs 创建下拉框所需要的配置项
*
* @p-config {jQ-Elm} select 原生select控件的jQuery对象，通过原生select创建时候必选
*
* @p-config {jQ-Elm} container 自定义下拉框的父容器，通过JSON数据创建时候必选
*
* @p-config {String} className 自定义下拉框组件的class，所有和下拉框相关的节点，都受这个className控制
*
* @p-config {Object} attrs 自定义下拉框的相关属性，参数可选
* @p-c-config {String} id 给自定义下拉框指定一个id，之后可以通过id进行DOM操作
* @p-c-config {String} column 自定义下拉框中的option显示行数，默认显示10行
* @p-c-config {Integer} width 自定义下拉框的宽度，字数超过会自动截断处理，默认：自适应
* @p-c-config {Integer} height 自定义下拉框中，每个选项的高度，默认：30px
*
* @p-config {Array} options 自定义下拉框需要显示的选项数据，对应select中的option
* @p-c-item {Array} 格式：[text,value,selected]
*
* @p-config {jQ-Elm} box 如果需要在下拉列表底部再加上一个额外的节点，可以通过此配置项完成
*
* @return {DropDownList} 返回一个DropDownList实例
*/
mark：具体配置项的使用方法
三、示例
1、通过原生select控件派生一个自定义下拉框
<select id="ddl_picture">
<option value="1">照片1</option>
<option value="2">照片2</option>
<option value="3">照片3</option>
<option value="4">照片4</option>
<option value="5">照片5</option>
</select>
// 则可以通过如下方式，最便捷地派生一个自定义UI的下拉框
var ddl = DropDownList.create({
select : $('#ddl_picture') // 只需要指定select配置项即可
});
2、在1的基础上，控制下拉框的宽度，以及显示的行数
// 设定column和width
var ddl = DropDownList.create({
select : $('#ddl_picture'),
attrs : {
column : 5, // 只显示5行，超过以后显示滚动条
width : 150 // 指定下拉框宽度为150px
}
});
3、通过JSON数据的方式创建一个自定义下拉框
// 假定数据如下
var optionsData = [
['默认相册','001'], // 格式：[ text, value, selected ]，其中selected省略时为false
['我的收藏','002'],
['大学同学','003'],
['亲朋好友','004',true], // 默认选中，因为设定了selected为true
['明星们','005'],
['狗仔队','006'],
['This is my love album!','007']
];
// 通过json数据创建
var ddl = DropDownList.create({
container : $('#sltContainer'), // 指定下拉框的容器，不设定时为document.body
attrs : {
id : 'ddl_album' // 指定一个id，必选
},
options : optionsData
});
4、在3的基础上，控制下拉框的宽度、高度和显示行数（同2）
// 通过json数据创建
var ddl = DropDownList.create({
container : $('#sltContainer'), // 指定下拉框的容器，不设定时为document.body
attrs : {
id : 'ddl_album', // 指定一个id，必选
column : 5, // 只显示5行，超过以后显示滚动条
width : 150, // 指定下拉框宽度为150px
height : 36 // 每个选项的高度：36px
},
options : optionsData
});
5、在下拉列表底部增加额外的节点
// 增加额外节点
var ddl = DropDownList.create({
select : $('#ddl_picture'),
attrs : {
column : 5, // 只显示5行，超过以后显示滚动条
width : 150 // 指定下拉框宽度为150px
},
box : $('') // 一个jquery节点对象
});
6、在1的基础上，自定义组件样式
// 设定className
var ddl = DropDownList.create({
select : $('#ddl_picture'),
className : 'your-class-name'
});
该class定义形如：
/* 你的样式 */
.your-class-name {
}
/* select样式 */
.your-class-name .dropdown-select{
}
/* 列表样式 */
.your-class-name .dropdown-list{
}
/* 列表选项样式 */
.your-class-name .dropdown-options{
}
【实例方法】ddl.val(value)点击展开
一、接口功能
获取或设置 下拉框的值
二、详细配置项
/**
* 获取或设置 下拉框的值
* @param {String} value 需要给下拉框设定的内容
* @return {String/Object} value有值时返回DropDownList实例本身，否则返回下拉框的真实值
*/
三、示例
1、设置下拉框的内容
// 设置
ddl = ddl.val('006');
2、获取下拉框的内容
// 设置
var value = ddl.val();
【实例方法】ddl.add(option)点击展开
一、接口功能
为下拉框动态增加一个选项
二、详细配置项
/**
* 为下拉框动态增加一个选项
* @param {Object} option 需要给下拉框设定的内容
* @p-config {String} text 显示的文字
* @p-config {String} value 选项的值
* @return {Object} 返回DropDownList实例本身
*/
三、示例
1、动态增加一个选项
// 增加选项
ddl = ddl.add({
text : '大家好',
value : '001'
});
【实例方法】ddl.show()点击展开
一、接口功能
显示下拉框
二、详细配置项
/**
* 显示下拉框
* @return {Object} 返回DropDownList实例本身
*/
三、示例
1、显示下拉框
// 显示
ddl = ddl.show();
【实例方法】ddl.hide()点击展开
一、接口功能
隐藏下拉框
二、详细配置项
/**
* 隐藏下拉框
* @return {Object} 返回DropDownList实例本身
*/
三、示例
1、隐藏下拉框
// 隐藏
ddl = ddl.hide();
【实例方法】ddl.change(fn)点击展开
一、接口功能
为自定义下拉框增加change事件，或者直接触发起change事件
二、详细配置项
/**
* 为自定义下拉框增加change事件，或者直接触发起change事件
* @param {Function} fn change事件监听，为空时表示直接触发change事件
* @return {Object} 返回DropDownList实例本身
*/
三、示例
1、为下拉框绑定change事件
// 绑定
ddl = ddl.change(function(evt){
// TODO ...
});
2、触发change事件
// 触发
ddl = ddl.change();
【实例属性】点击展开
一、接口功能
DropDownList实例ddl的相关属性，包括：ddl.select，ddl.listEle，ddl.listBox
二、示例
1、通过ddl.select可获取原生select控件对应的jQuery对象
// 获取原生select
var $select = ddl.select;
mark：无论是通过那种方式创建的DropDownList，都可以通过ddl.select获取到原生select控件2、通过ddl.listEle可获取到下拉列表对应的jQuery对象
// 获取下拉列表
var listEle = ddl.listEle;
3、通过ddl.listBox可获取到下拉列表中自定义的一个节点对应的jQuery对象
// 获取下拉列表中的自定义节点
var listBox = ddl.listBox;