最近MUI app得开发中发现mui框架对<select>表单没有优化 手机端弹出得样式不尽如人意,自定义css也没有展现很好的效果。通过对官方文档得阅读发现了picker(选择器)这个组件可以优化手机端下拉列表样式具体使用方式如下:
1.在页面中要引入
- <script src="../../js/mui.picker.js"></script>
- <script src="../../js/mui.poppicker.js"></script>
2.注意页面中 mui.min.js不要引入多次实际开发中发现引入多次回导致picker回调函数执行多次。
这两个文件再页面中书写函数就可以了 官方文档中也有示例 我贴一下我写的函数比较简单:
//因表单页面是根据后台接口动态生成所以此处需要传递参数key为表单ID,data为下拉列表中所需要展示得数据。
function selectData(key,data){
var leaveTypeArray=new Array();
var leaveTypeData=data.split(",");
//此处for循环为拼接picker定义得数据格式例如: picker.setData([{value:'zz',text:'智子'}]);
for(var i=0;i<leaveTypeData.length-1;i++){
var str=leaveTypeData[i];
var item={value:str,text:str};
leaveTypeArray.push(item);
}
var picker = new mui.PopPicker();
picker.setData(leaveTypeArray);
//这里是回调函数在用户选中后所需要执行得操作
picker.show(function (selectItems) {
picker.setData(leaveTypeArray);
$("#"+key).val(selectItems[0].value);
});
}
3.页面中使用input标签执行当前点击事件就可以了例如
- <input οnclick="selectData(\''+inputkey+'\',\''+dataStr+'\')" type="text" class="mui-input-clear" readonly="readonly">