dropdown.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 {dropdown} 返回一个dropdown实例

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 = dropdown.create({
                        select : $('#ddl_picture')  // 只需要指定select配置项即可
                    });
                
2、在1的基础上,控制下拉框的宽度,以及显示的行数

                    // 设定column和width
                    var ddl = dropdown.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 = dropdown.create({
                        container : $('#sltContainer'),    // 指定下拉框的容器,不设定时为document.body
                        attrs : {
                            id : 'ddl_album'            // 指定一个id,必选
                        },
                        options : optionsData
                    });
                
4、在3的基础上,控制下拉框的宽度、高度和显示行数(同2)

                    // 通过json数据创建
                    var ddl = dropdown.create({
                        container : $('#sltContainer'),    // 指定下拉框的容器,不设定时为document.body
                        attrs : {
                            id     : 'ddl_album',   // 指定一个id,必选
                            column : 5,             // 只显示5行,超过以后显示滚动条
                            width  : 150,           // 指定下拉框宽度为150px
                            height : 36             // 每个选项的高度:36px
                        },
                        options : optionsData
                    });
                
5、在下拉列表底部增加额外的节点

                    // 增加额外节点
                    var ddl = dropdown.create({
                        select : $('#ddl_picture'),
                        attrs : {
                            column : 5,     // 只显示5行,超过以后显示滚动条
                            width  : 150    // 指定下拉框宽度为150px
                        },
                        box : $('
') // 一个jquery节点对象 });
6、在1的基础上,自定义组件样式

                    // 设定className
                    var ddl = dropdown.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有值时返回dropdown实例本身,否则返回下拉框的真实值
 */

三、示例

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}         返回dropdown实例本身
 */

三、示例

1、动态增加一个选项

                    // 增加选项
                    ddl = ddl.add({
                        text : '大家好',
                        value : '001'
                    });
                

【实例方法】ddl.show()点击展开

一、接口功能

显示下拉框

二、详细配置项

/**
 * 显示下拉框
 * @return     {Object}         返回dropdown实例本身
 */

三、示例

1、显示下拉框

                    // 显示
                    ddl = ddl.show();
                

【实例方法】ddl.hide()点击展开

一、接口功能

隐藏下拉框

二、详细配置项

/**
 * 隐藏下拉框
 * @return     {Object}         返回dropdown实例本身
 */

三、示例

1、隐藏下拉框

                    // 隐藏
                    ddl = ddl.hide();
                

【实例方法】ddl.change(fn)点击展开

一、接口功能

为自定义下拉框增加change事件,或者直接触发起change事件

二、详细配置项

/**
 * 为自定义下拉框增加change事件,或者直接触发起change事件
 * @param   {Function}  fn  change事件监听,为空时表示直接触发change事件
 * @return  {Object}        返回dropdown实例本身
 */

三、示例

1、为下拉框绑定change事件

                    // 绑定
                    ddl = ddl.change(function(evt){
                        // TODO ...
                    });
                
2、触发change事件

                    // 触发
                    ddl = ddl.change();
                

【实例属性】点击展开

一、接口功能

dropdown实例ddl的相关属性,包括:ddl.select,ddl.listEle,ddl.listBox

二、示例

1、通过ddl.select可获取原生select控件对应的jQuery对象

                    // 获取原生select
                    var $select = ddl.select;
                
mark:无论是通过那种方式创建的dropdown,都可以通过ddl.select获取到原生select控件
2、通过ddl.listEle可获取到下拉列表对应的jQuery对象

                    // 获取下拉列表
                    var listEle = ddl.listEle;
                
3、通过ddl.listBox可获取到下拉列表中自定义的一个节点对应的jQuery对象

                    // 获取下拉列表中的自定义节点
                    var listBox = ddl.listBox;