在做移动混合开发,html中元素的select控件在android中不好看,要改成ios的风格,在网上找到了下面这个库,非常好用
相关资源
官方网站:http://zhoushengfe.com/iosselect/website/index.html
下载地址:https://github.com/zhoushengmufc/iosselect
相关博客:http://www.cnblogs.com/mufc-go/archive/2017/05/03/6801153.html
应用在apicloud中,不多说,上代码
1.引入相关文件:
<link rel="stylesheet" type="text/css" href="../css/iosSelect.css"/>
<script type="text/javascript" src="../script/iosSelect.js"></script>
<script type="text/javascript" src="../script/iscroll.js"></script>
2.html部分
<!-- 应该是用于初始化控件默认值的 -->
<input type="hidden" name="channelId" id="channelId" value="">
<div id="showChannel" style="height: 1.6rem;line-height:1.6rem;">请选择栏目</div>
3.JavaScript部分
//查询部分
var filter={
"order": "sort ASC",
"where":{"and":[{"parent_id":"-1"},{release_level:{"lte":key_user_level()}}]}
}
var client = new Resource(APICLOUD_ID, APICLOUD_KEY);
var Model = client.Factory("channel");
Model.query({
filter:filter
}, function(ret,err){
if(err){
//处理错误 err
//alert("发生错误!"+JSON.stringify(err));
key_showAjaxError(err);
}else{
//处理数据 ret
//alert(JSON.stringify(ret));
//编译模板
var dataArray=[];
for(var i=0;i<ret.length;i++){
dataArray[i]={"id":ret[i].id,"value":ret[i].name};
}
initChannel(dataArray);
}
common_hide_loading();
})
//初始化控件
function initChannel(data){
var showChannelDom = document.querySelector('#showChannel');
var channelIdDom = document.querySelector('#channelId');
showChannelDom.addEventListener('click', function () {
var bankId = showChannelDom.dataset['id'];
var bankName = showChannelDom.dataset['value'];
var bankSelect = new IosSelect(1,
[data],
{
container: '.container',
title: '请选择栏目',
itemHeight: 50,
itemShowCount: 3,
oneLevelId: bankId,
callback: function (selectOneObj) {
channelIdDom.value = selectOneObj.id;
showChannelDom.innerHTML = selectOneObj.value;
showChannelDom.dataset['id'] = selectOneObj.id;
showChannelDom.dataset['value'] = selectOneObj.value;
}
});
});
}