MUI的picker选择器

最新推荐文章于 2024-10-19 12:52:36 发布

原创最新推荐文章于 2024-10-19 12:52:36 发布 · 3.1k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

MUI 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了MUI的picker选择器，它类似于下拉列表选择器，并且可以扩展到多级联动。通过三个步骤（初始化、设置数据、调用）来实现，提供了案例源码的GitHub链接和百度云下载地址。

引言

选择器跟下拉列表选择器很相似，某种程度上我们可以把它直接看出下拉列表选择器，后面笔者记录的城市二级联动和城市三级联动也是从该基础上进行拓展的，我们可以通过编码自己实现一级选择器、二级选择器以及三级选择器等等。

实现的效果

注：使用picker选择器，务必在mui.js/css后中再引用

mui.picker.css mui.poppicker.css

mui.picker.js mui.poppicker.js

或者引入压缩过的

mui.picker.min.css

mui.picker.min.js

使用picker选择器的三步骤

步骤1：初始化

var picker = new mui.PopPicker();

步骤2：设置数据(数组的形式)

picker.setData([{
	value: 'ts',
	text: '唐僧'
}, {
	value: 'swk',
	text: '孙悟空'
}, {
	value: 'zbj',
	text: '猪八戒'
}, {
	value: 'shs',
	text: '沙和尚'
}]);

步骤3：调用

picker.show( function(selectItems){})

案例源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>一级联动</title>
		<link rel="stylesheet" href="css/mui.min.css">
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<style>
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			
			.ui-alert {
				text-align: center;
				padding: 20px 10px;
				font-size: 16px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">一级联动</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级联动选择器</button>
				<div id='userResult' class="ui-alert"></div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script>
			mui.init();
			mui.ready(function() {
				var userPicker = new mui.PopPicker();
				userPicker.setData([{
					value: 'ts',
					text: '唐僧'
				}, {
					value: 'swk',
					text: '孙悟空'
				}, {
					value: 'zbj',
					text: '猪八戒'
				}, {
					value: 'shs',
					text: '沙和尚'
				}]);
				var showUserPickerButton = document.getElementById('showUserPicker');
				var userResult = document.getElementById('userResult');
				showUserPickerButton.addEventListener('tap', function(event) {
					userPicker.show(function(items) {
						userResult.innerText = JSON.stringify(items[0]);
						// 注:如果不想选择后直接关闭窗口可以加上 return false 
						// return false;
					});
				}, false);
			});
		</script>
	</body>

</html>

GitHub：