mui-——picker使⽤⽰例
使⽤picker的时候⼀直没有什么效果后来根据⽹上的⼀些⽰例和mui帮助⽂档才得以实⾏的效果总结了⼀下使⽤⽅法效果图：
依次是：⼀级联》⼆级联》三级联
注意点:
1.必须引⽤的js和css
poppicker组件依赖的js：
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
2.城市联动效果js 封装的着城市名的信息
<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
3.poppicker组件依赖的css：
css引⼊是必须加上rel="stylesheet" 否则效果不显⽰
<link href="css/mui.picker.css" rel="stylesheet" />
<link href="css/mui.poppicker.css" rel="stylesheet" />
总之上⾯的js和css都要
头部位置导⼊的js/css:
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/mui.picker.css" rel="stylesheet" />
<link href="css/mui.poppicker.css" rel="stylesheet" />
导⼊的js/css代码：
    　<script src="js/mui.min.js"></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
样式代码（样式主要是根据⾃⼰的页⾯来调整的）：
.ui-alert {
text-align: left;/*⽂本排列*/
padding: 15px 10px;/*外边距两个值代表上下边距和左右边距四个值代表上左下右（顺时针）*/
font-size: 16px;/*字体⼤⼩*/
}
html代码：
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>id</label>
<input type="text" class="mui-input-clear" placeholder="请输⼊id">
</div>
<div class="mui-input-row">
<label>⽤户名</label>
<input type="text" class="mui-input-clear" placeholder="请输⼊⽤户名">
</div>
<div class="mui-input-row ">
<label>性别</label>
<button class="mui-btn mui-btn-blue" id="ChoiceSexButton">选择性别</button>
<div id='sexResult' class="ui-alert"></div>
</div>
<div class="mui-input-row ">
<label>所在城市</label>
<button class="mui-btn mui-btn-blue" id="ChoiceCityButton">选择城市</button>
<div id='cityResult' class="ui-alert"></div>
</div>
<h5 class="mui-content-padded">爱好</h5>
<div class="mui-input-row mui-checkbox">
<label>⾳乐</label>
<input name="checkbox1" value="Item 3" type="checkbox">
</div>
<div class="mui-input-row mui-checkbox">
<label>电影</label>
<input name="checkbox1" value="Item 4" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox">
<label>游泳</label>
<input name="checkbox1" value="Item 3" type="checkbox">
</div>
<div class="mui-input-row mui-checkbox">
<label>篮球</label>
<input name="checkbox1" value="Item 4" type="checkbox">
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn-success">添加信息<span class="mui-badge mui-badge-success">2</span></button>    <a href="show_info.html"><button type="button" class="mui-btn mui-btn-primary">展⽰信息</button></a>
</div>
</form>
</div>
  <script>中的代码
<script type="text/javascript">
mui.init()
//初始化popPicker组件
var sexPicker = new mui.PopPicker({
//buttons:['点我取消','点我确认']//显⽰按钮不写默认为'取消','确认'
mui框架如何使用
}); //假如是⼆联则在括号⾥⾯加⼊{layer:2} 城市列表中有⽰例
//给picker对象添加数据
sexPicker.setData([{
value: "1",
text: "男"
}, {
value: '2',
text: '⼥'
}]);
//⼀级联⽰例
var ChoiceSexButton = ElementById('ChoiceSexButton');
var sexResult = ElementById('sexResult');
ChoiceSexButton.addEventListener('tap', function(event) {
//显⽰picker
sexPicker.show(function(items) { //弹出列表并在⾥⾯写业务代码
//userResult.innerText = JSON.stringify(items[0]);
/
/返回 false 可以阻⽌选择框的关闭
//return false;
var itemCallback = SelectedItems();
//把选择的结果显⽰id为sexResult的列表中（需要显⽰的位置）
sexResult.innerText = itemCallback[0].text;
});
}, false);
//-----------------------------------------
//⼆级联⽰例
var cityPicker = new mui.PopPicker({
layer: 2
});
//如果使⽤⼆级联则使⽤children属性
cityPicker.setData([{
value: '110000',
text: '北京市',
children: [{
value: "110101",
text: "东城区"
}]
}, {
value: '120000',
text: '天津市',
children: [{
value: "120101",
text: "和平区"
}, {
value: "120102",
text: "河东区"
}, {
value: "120104",
text: "南开区"
}]
}]);
var showCityPickerButton = ElementById('ChoiceCityButton');
var cityResult = ElementById('cityResult');
showCityPickerButton.addEventListener('tap', function(event) {
cityPicker.show(function(items) {
cityResult.innerText = items[0].text + " " + items[1].text;
//返回 false 可以阻⽌选择框的关闭
//return false;
});
}, false);
//--------------------------------------------------
/
/三级联⽰例
/*
var cityPicker = new mui.PopPicker({
layer: 3,//layer 显⽰列数
});
//使⽤封装的城市数据
cityPicker.setData(cityData3);
var ChoiceCityButton = ElementById('ChoiceCityButton');
var cityResult = ElementById('cityResult');
ChoiceCityButton.addEventListener('tap', function(event) {
cityPicker.show(function() {
/
/返回 false 可以阻⽌选择框的关闭
var SelectedItems();
//把选择的结果显⽰在id为cityResult的列表中
cityResult.innerText =itemCallback[0].text+"  "+itemCallback[1].text+" "+itemCallback[2].text;
});
}, false);*/
</script>
  如果代码或者思路有什么不对的地⽅请路过的⼤神指点，毕竟我还是个⼩菜鸟，太多的地⽅不懂，太多的知识需要学习

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。