picker（选择器）

mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现

*poppicker组件依赖mui.picker.js/.css mui.poppicker.js/.css请务必在mui.js/css后中引用,也可统一引用 压缩版本:mui.picker.min.js

popPicker

适用于弹出单级或多级选择器

快速体验

通过new mui.PopPicker()初始化popPicker组件

 var picker = new mui.PopPicker(); 

给picker对象添加数据

 picker.setData([{value:'zz',text:'智子'}]); 

显示picker

 picker.show( SelectedItemsCallback ) 

实例

 var picker = new mui.PopPicker();
 picker.setData([{value:'zz',text:'智子'}]);
 picker.show(function (selectItems) {
    console.log(selectItems[0].text);//智子
    console.log(selectItems[0].value);//zz 
  })

API详解

• new PopPicker({PopPicker.options}})

  • layer Type: Int picker显示列数
  • buttons Type: Array picker显示按钮 如:new mui.PopPicker({buttons:['cancle','ok']})

• setData([data])

  • 参数:data Type: Array 填充数据 如:picker.setData([{value:'zz',text:'智子'}]) data格式

设置默认值

PopPicker创建实例并填充数据后，可以设定每个层级的选中项，因为 PopPicker 是支持多层级联的，所以，可通过instance.pickers[index]拿到指定层级的实例，然后通过setSelectedIndex()和setSelectedValue()两个方法,设定指定层级的选中项，如下代码供参考:

var picker = new mui.PopPicker();
picker.setData([{
    value: "first",
    text: "第一项"
}, {
    value: "second",
    text: "第一项"
}, {
    value: "third",
    text: "第三项"
}, {
    value: "fourth",
    text: "第四项"
}, {
    value: "fifth",
    text: "第五项"
}])
//picker.pickers[0].setSelectedIndex(4, 2000);
picker.pickers[0].setSelectedValue('fourth', 2000);
picker.show(function(SelectedItem) {
  console.log(SelectedItem);
})

*如果设置多级默认值可依次获取每一层级Picker对象并设置默认值,如下:

var picker = new mui.PopPicker({
    layer: 2
});
    picker.setData([{
        value: '110000',
        text: '北京市',
        children: [{
                value: "110101",
                text: "东城区"
        }]
    }, {
        value: '120000',
        text: '天津市',
        children: [{
          value: "120101",
            text: "和平区"
        }, {
            value: "120102",
            text: "河东区"
        }, {
            value: "120104",
            text: "南开区"
        }
        ]
    }])
picker.pickers[0].setSelectedIndex(1);
picker.pickers[1].setSelectedIndex(1);
picker.show(function(SelectedItem) {
  console.log(SelectedItem);
})

• setSelectedIndex(index[, duration, callback])

  • 参数:index Type: Number 指定列表选中项 如:picker.pickers[0].setSelectedIndex(4)
  • 参数:duration Type: Number 过渡效果持续时间(ms) 如:picker.pickers[0].setSelectedIndex(4,200)
  • 参数:callback Type: FUnction 设置成功回调 如:picker.pickers[0].setSelectedIndex(4,200,function(){})
  • 

    var picker = new mui.PopPicker();
    picker.setData([{
        value: "first",
        text: "第一项",
    }, {
        value: "second",
        text: "第一项"
    }, {
        value: "third",
        text: "第三项"
    }, {
        value: "fourth",
        text: "第四项"
    }, {
        value: "fifth",
        text: "第五项"
    }])
    picker.pickers[0].setSelectedIndex(4, 2000);
    picker.show(function(SelectedItem) {
        console.log(SelectedItem);
    })

• setSelectedValue(value[, duration, callback])

  • 参数:value Type: String 指定列表选中项 如:picker.pickers[0].setSelectedValue('fourth')
  • 参数:duration Type: Number 渡效果持续时间(ms) 如:picker.pickers[0].setSelectedValue('fourth',200)
  • 参数:callback Type: FUnction 设置成功回调 如:picker.pickers[0].setSelectedValue('fourth', 200, function(){})

  • var picker = new mui.PopPicker();
    picker.setData([{
        value: "first",
        text: "第一项",
    }, {
        value: "second",
        text: "第一项"
    }, {
        value: "third",
        text: "第三项"
    }, {
        value: "fourth",
        text: "第四项"
    }, {
        value: "fifth",
        text: "第五项"
    }])
    picker.pickers[0].setSelectedIndex(4, 2000);
    picker.show(function(SelectedItem) {
        console.log(SelectedItem);
    })

• getSelectedItems()

  • 返回值[data] Type: Array 获取选中的项（数组） 如:picker.getSelectedItems()

• show( getSelectedItems )

  • 返回值:[data] Type: Array 获取选中的项（数组） 如:

    picker.show(function(getSelectedItems){
        console.log(getSelectedItems)
    }) 

    *return false;可以阻止选择框的关闭

• hide()

  • 隐藏picker 如:picker.hide()

• dispose()

  • 释放组件资源(释放后将将不能再操作组件) 如:picker.dispose() * 通常情况下，不需要释放组件资源，初始化之后，可以一直使用。
    * 当内容较多，如不释放组件资源，在某些设备上可能会卡顿。
    * 所以每次用完便立即调用 dispose() 进行释放,下次用时再创建新实例。

dtpicker

dtpicker组件适用于弹出日期选择器

快速体验

通过new mui.DtPicker()初始化DtPicker组件

   var dtPicker = new mui.DtPicker(options); 
   

显示picker

 
  dtPicker.show( SelectedItemsCallback ) 
  

实例

    var dtPicker = new mui.DtPicker(); 
    dtPicker.show(function (selectItems) { 
        console.log(selectItems.y);//{text: "2016",value: 2016} 
        console.log(selectItems.m);//{text: "05",value: "05"} 
    })

API详解

• new DtPicker({options}})

  • 1.参数:type

    Type: JSON 设置日历初始视图模式 支持的值:

    可选值	视图模式
    'datetime'	完整日期视图(年月日时分)
    'date'	年视图(年月日)
    'time'	时间视图(时分)
    'month'	月视图(年月)
    'hour'	时视图(年月日时)

    *若需要指定其他显示视图,
    则需要通过css来控制显示项,通过js获取对应选择项.如 设置月日时,需要在mui.dtpicker.css中设置显示视图宽度,隐藏不需要的视图

    /*月日时*/
    [data-type="day"] .mui-picker,
    [data-type="day"] .mui-dtpicker-title h5 {
        width: 33.3%;
    }
    [data-type="day"] [data-id="picker-i"],
    [data-type="day"] [data-id="title-i"],[data-type="day"] [data-id="picker-y"],
    [data-type="day"] [data-id="title-y"]  {
        display: none;
    }

    在mui.dtpicker.js中getSelected()方法下添加selected对象值

    case 'day':
        selected.value = selected.m.value + '-' + selected.d.value + ' ' + selected.h.value;
        selected.text = selected.m.text + '-' + selected.d.text + ' ' + selected.h.text;
      break;

  • 2.参数:customData

    Type: JSON 设置时间/日期别名 设置格式:

    "customData":{
        "date":[ 
            {value:"",text:""}
        ] 
    }

    示例:

    var dtpicker = new mui.DtPicker({ 
        "type": "time",
        "customData": {
            "h": [ 
                { value: "am", text: "上午" },
                { value: "pm", text: "下午" },
            ]
        } 
    })
    dtpicker.show(function(e) { 
        console.log(e); 
    })

    支持的值:

    可选值	视图模式
    'y'	可设置 年别名
    'm'	可设置 月 别名
    'd'	可设置 日别名
    'h'	可设置 时别名
    'i'	可设置 分别名

    *customData值生效的前提需要有指定的日期视图,如设置'y',需要在视图使用'年'视图

  • 3.参数:labels

    Type: Array 设置默认标签区域提示语 可设置["年", "月", "日", "时", "分"]这五个字段,
    可以根据视图模式选择设置个别标签,也可以设置所有标签,
    dtpicker显示的时候只会根据当前视图显示设置项,
    *建议不要设置空字符串,会影响美观哦

  • 4.参数:beginDate

    Type: Date 设置可选择日期最小范围 可单独设置最小年范围, 如: beginYear:2015,
    其他日期支持Date格式,如:new Date(2016,5)可指定最小月份6月

  • 5.参数:endDate

    Type: Date 设置可选择日期最大范围 可单独设置最大年范围, 如: endYear:2017,
    其他日期支持Date格式,如:new Date(2016,10)可指定最大月份11月
  • 完整示例:

    var dtpicker = new mui.DtPicker({
        type: "datetime",//设置日历初始视图模式 
        beginDate: new Date(2015, 04, 25),//设置开始日期 
        endDate: new Date(2016, 04, 25),//设置结束日期 
        labels: ['Year', 'Mon', 'Day', 'Hour', 'min'],//设置默认标签区域提示语 
        customData: { 
            h: [
                { value: 'AM', text: 'AM' },
                { value: 'PM', text: 'PM' }
            ] 
        }//时间/日期别名 
    }) 
    dtpicker.show(function(e) {
        console.log(e);
    }) 

• getSelectedItems()

  • 返回值Date Type: Date 获取选中的项 如: var iTems = dtPicker.getSelectedItems() 返回值: 如:

     
    /* * iTems.value 拼合后的 value * iTems.text 
     * 拼合后的 text
     * iTems.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
     * iTems.m 月，用法同年 
     * iTems.d 日，用法同年 
     * iTems.h 时，用法同年 
     * iTems.i 分（minutes 的第二个字母），用法同年 
     */
     

• show( getSelectedItems )

  • 返回值:[data] Type: Array 获取选中的项（数组） 如:

     
    dtpicker.show(function(items) { 
      /* * items.value 拼合后的 value 
       * items.text 拼合后的 text 
       * items.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本 
       * items.m 月，用法同年 
       * items.d 日，用法同年 
       * items.h 时，用法同年 
       * items.i 分（minutes 的第二个字母），用法同年 
       */ 
       console.log(items); 
       }) 
     

    *return false;可以阻止选择框的关闭

• hide()

  • 隐藏dtPicker 如:dtPicker.hide()

• dispose()

  • 释放组件资源(释放后将将不能再操作组件) 如:dtPicker.dispose() * 通常情况下，不需要释放组件资源，初始化之后，可以一直使用。
    * 当内容较多，如不释放组件资源，在某些设备上可能会卡顿。
    * 所以每次用完便立即调用 dispose() 进行释放,下次用时再创建新实例。

扩展阅读

*picker组件会触发webview硬件加速,在部分手机上可以能出现卡顿或变形的情况此时需要开启硬件加速,硬件加速请参考 硬件加速章节