MUI 地址选择器 - picker使用

最新推荐文章于 2024-07-12 16:38:27 发布

草巾冒小子

最新推荐文章于 2024-07-12 16:38:27 发布

阅读量4k

点赞数

分类专栏： MUI踩坑篇

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/82498806

版权

MUI踩坑篇专栏收录该内容

30 篇文章 7 订阅

订阅专栏

MUI 地址选择器 - picker使用

很多安卓原生的地址选择器中，选择器基本是实时滚动的。
就像腾讯QQ应用的地址选择器一样！

效果截图如下：

这里写图片描述

代码如下：

<!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>
	<!--标准mui.css-->
	<link rel="stylesheet" href="css/mui.min.css">
	<!--App自定义的css-->
	<link rel="stylesheet" type="text/css" href="css/app.css" />
	<link href="css/mui.picker.css" rel="stylesheet" />
	<link href="css/mui.poppicker.css" rel="stylesheet" />
	<!--<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />-->
	<style>
		.mui-btn {
			font-size: 16px;
			padding: 8px;
			margin: 3px;
		}
		h5.mui-content-padded {
			margin-left: 3px;
			margin-top: 20px !important;
		}
		h5.mui-content-padded:first-child {
			margin-top: 12px !important;
		}
		.ui-alert {
			text-align: center;
			padding: 20px 10px;
			font-size: 16px;
		}
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">picker（地址选择器）</h1>
	</header>
	<div class="mui-content">
		<div class="mui-content-padded">
			<h5 class="mui-content-padded">原生 SELECT</h5>
			<select class="mui-btn mui-btn-block">
				<option value="item-1">item-1</option>
				<option value="item-2">item-2</option>
				<option value="item-3">item-3</option>
				<option value="item-4">item-4</option>
				<option value="item-5">item-5</option>
			</select>
			<br />
			<p>原生 SELECT（选择框）在不同的设备上UI可能会有差异，并且不支持多级联动(多个 SELECT 可实现，但较麻烦)，故mui封装了picker组件，参见如下示例。</p>
			<h5 class="mui-content-padded">普通示例</h5>
			<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button>
			<div id='userResult' class="ui-alert"></div>
			<h5 class="mui-content-padded">级联示例</h5>
			<button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>二级联动示例 ...</button>
			<div id='cityResult' class="ui-alert"></div>
			<button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button>
			<div id='cityResult3' class="ui-alert"></div>
		</div>
	</div>
	<script src="js/mui.min.js"></script>
	<!--<script src="js/mui.picker.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>
	<script>
		(function($, doc) {
			$.init();
			$.ready(function() {
				//普通示例
				var userPicker = new $.PopPicker();
				userPicker.setData([{
					value: 'ywj',
					text: '董事长 叶文洁'
				}, {
					value: 'aaa',
					text: '总经理 艾AA'
				}, {
					value: 'lj',
					text: '罗辑'
				}, {
					value: 'ymt',
					text: '云天明'
				}, {
					value: 'shq',
					text: '史强'
				}, {
					value: 'zhbh',
					text: '章北海'
				}, {
					value: 'zhy',
					text: '庄颜'
				}, {
					value: 'gyf',
					text: '关一帆'
				}, {
					value: 'zhz',
					text: '智子'
				}, {
					value: 'gezh', 
					text: '歌者'
				}]);
				var showUserPickerButton = doc.getElementById('showUserPicker');
				var userResult = doc.getElementById('userResult');
				showUserPickerButton.addEventListener('tap', function(event) {
					userPicker.show(function(items) {
						userResult.innerText = JSON.stringify(items[0]);
						//返回 false 可以阻止选择框的关闭
						//return false;
					});
				}, false);
				//-----------------------------------------
				//二级联示例
				var cityPicker = new $.PopPicker({
					layer: 2
				});
				cityPicker.setData(cityData);
				var showCityPickerButton = doc.getElementById('showCityPicker');
				var cityResult = doc.getElementById('cityResult');
				showCityPickerButton.addEventListener('tap', function(event) {
					cityPicker.show(function(items) {
						cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;
						//返回 false 可以阻止选择框的关闭
						//return false;
					});
				}, false);
				//-----------------------------------------
				//三级联示例
				var cityPicker3 = new $.PopPicker({
					layer: 3
				});
				cityPicker3.setData(cityData3);
				var showCityPickerButton = doc.getElementById('showCityPicker3');
				var cityResult3 = doc.getElementById('cityResult3');
				showCityPickerButton.addEventListener('tap', function(event) {
					cityPicker3.show(function(items) {
						cityResult3.innerText = "你选择的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
						//返回 false 可以阻止选择框的关闭
						//return false;
					});
				}, false);
			});
		})(mui, document);
	</script>
</body>
</html>

注意：

使用MUI框架；
选择器选取地址的结果，默认以字符串形式存入指定的div中；
插件可以拓展，指定结果存入特定input value中，便于表单提交；

以上就是关于“ MUI 地址选择器 - picker使用 ” 的全部内容。

草巾冒小子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
MUI 地址选择器 - picker使用

MUI 地址选择器 - picker使用很多安卓原生的地址选择器中，选择器基本是实时滚动的。就像腾讯QQ应用的地址选择器一样！效果截图如下：代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="vie...
复制链接

扫一扫

专栏目录