<!VDNDOC "PageBase":"nvo_Picker","IniEvent":"PageIni">
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>VDN选择器</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<style>
			.mui-content>.mui-input-row {
				height: 50px;
				margin: 0px 5px;
				padding-top: 2px;
				padding-bottom: 0px;
			}
			
			.mui-content>.mui-input-row input {
				width: 78%;
				line-height: 1.1;
			}
			
			.mui-content>.mui-input-row .mui-btn {
				width: 20%;
				padding: 10px 0px;
				line-height: 1.24;
			}
			
			.mui-content {
				background-color: white;
			}
			
			.mui-search-content{
				height:40px;
			}
			.mui-icon-search {
				padding: 2px 6px;
				height: 36px;
			}
			
			.no-margin{
				margin-bottom: 5px !important;
			}
			
			.vdn-selected {
				background-color: #0062CC;
				color: white;
			}
			
			.vdn-response {
				display: none;
			}
		</style>
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/AppStyle.css" />
	</head>

	<body>

		<div class="mui-content">
			<div class="mui-content-padded" style="margin: 5px;">
				<p style="text-indent: 22px;">VDN选择器是在MUI的mask的基础上进行的扩展，相对于MUI本身的picker,VDN Picker可以更加灵活的定制内容、动态的加载数据。</p>
			</div>
			<div class="mui-content-padded" style="margin: 5px;">
				<p style="text-indent: 22px;">除了可以作为选择器使用，还可以作为明细表单录入、信息展示等用途的弹出页面。详细使用参见示例及文档。</p>
			</div>
			<h4>一级单选</h4>
			<div class="mui-input-row">
				<input id="t_1" type="text" /><button id="btn_1" type="button" class="mui-btn mui-btn-blue" AutoPost="false">选择</button>
			</div>
			<h4>一级多选</h4>
			<div class="mui-input-row">
				<input id="t_2" type="text" /><button id="btn_2" type="button" class="mui-btn mui-btn-blue" AutoPost="false">选择</button>
			</div>
			<h4>二级单选</h4>
			<div class="mui-input-row">
				<input id="t_3" type="text" /><button id="btn_3" type="button" class="mui-btn mui-btn-blue" AutoPost="false">选择</button>
			</div>
			<h4>二级多选</h4>
			<div class="mui-input-row">
				<input id="t_4" type="text" /><button id="btn_4" type="button" class="mui-btn mui-btn-blue" AutoPost="false">选择</button>
			</div>
			<h4>三级单选</h4>
			<div class="mui-input-row">
				<input id="t_5" type="text" /><button id="btn_5" type="button" class="mui-btn mui-btn-blue" AutoPost="false">选择</button>
			</div>
			<h4>复合单选</h4>
			<div class="mui-input-row">
				<input id="t_6" type="text" /><button id="btn_6" type="button" class="mui-btn mui-btn-blue" AutoPost="false">选择</button>
			</div>
			<h4>表单输入</h4>
			<div class="mui-input-row">
				<input id="t_7" type="text" /><button id="btn_7" type="button" class="mui-btn mui-btn-blue" AutoPost="false">表单输入</button>
			</div>

		</div>
		<!--一级单选-->
		<div id="picker1" title="选择省市" showbar="true" alpha="false" class="vdn-response">
			<div class="mui-content">
				<div class="mui-scroll-wrapper  vdn-response-content">
					<div class="mui-scroll">
						<ul id="picker1Content" class="mui-table-view">
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--一级多选-->
		<div id="picker2" title="选择省市" class="vdn-response">
			<div class="mui-content">
				<div class="mui-scroll-wrapper vdn-response-content">
					<div class="mui-scroll">
						<ul id="picker2Content" class="mui-table-view">
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--二级单选-->
		<div id="picker3" title="选择城市" class="vdn-response">
			<div class="mui-content">
				<div class="mui-row">
					<div class="mui-col-xs-6">
						<div class="mui-scroll-wrapper vdn-response-content">
							<div class="mui-scroll">
								<ul id="picker3Content1" class="mui-table-view">
								</ul>
							</div>
						</div>
					</div>
					<div class="mui-col-xs-6">
						<div class="mui-scroll-wrapper vdn-response-content">
							<div class="mui-scroll">
								<ul id="picker3Content2" class="mui-table-view">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--二级多选-->
		<div id="picker4" title="选择城市" class="vdn-response">
			<div class="mui-content">
				<div class="mui-row">
					<div class="mui-col-xs-6">
						<div class="mui-scroll-wrapper vdn-response-content">
							<div class="mui-scroll">
								<ul id="picker4Content1" class="mui-table-view">
								</ul>
							</div>
						</div>
					</div>
					<div class="mui-col-xs-6">
						<div class="mui-scroll-wrapper vdn-response-content">
							<div class="mui-scroll">
								<ul id="picker4Content2" class="mui-table-view">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--三级单选-->
		<div id="picker5" title="选择区域" class="vdn-response">
			<div class="mui-content">
				<div class="mui-row">
					<div class="mui-col-xs-4">
						<div class="mui-scroll-wrapper vdn-response-content">
							<div class="mui-scroll">
								<ul id="picker5Content1" class="mui-table-view">
								</ul>
							</div>
						</div>
					</div>
					<div class="mui-col-xs-4">
						<div class="mui-scroll-wrapper vdn-response-content">
							<div class="mui-scroll">
								<ul id="picker5Content2" class="mui-table-view">
								</ul>
							</div>
						</div>
					</div>
					<div class="mui-col-xs-4">
						<div class="mui-scroll-wrapper vdn-response-content">
							<div class="mui-scroll">
								<ul id="picker5Content3" class="mui-table-view">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--复合单选-->
		<div id="picker6" title="查询" showbar="true" alpha="false" class="vdn-response">
			<div class="mui-content">
				<div class="mui-row mui-content-padded vnd-fixed mui-search-content">
					<div class="mui-col-xs-12 ">
						<div class="mui-input-row mui-search">
							<input id="search_input" type="search" class="mui-input-clear no-margin" placeholder="名称、拼音码查找">
						</div>
					</div>
				</div>
				<div class="mui-scroll-wrapper vdn-response-content">
					<ul id="picker6Content" class="mui-table-view">
					</ul>
				</div>
			</div>
		</div>
		<!--输入表单-->
		<div id="picker7" title="表单录入" alpha="false" class="vdn-response" buttons="返回,OK">
			<div class="mui-content vdn-response-content">
				<div class="mui-scroll-wrapper vdn-response-content">
					<div class="mui-input-group">
						<div class="mui-input-group">
							<div class="mui-input-row">
								<label>姓名:</label>
								<input id="t_name" type="text" placeholder="请输入姓名" />
							</div>
							<div class="mui-input-row">
								<label>电话:</label>
								<input id="t_tel" type="text" placeholder="请输入电话" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript" src="js/jquery.tmpl.js"></script>
		<script type="text/javascript" src="js/vdn.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui('.mui-scroll-wrapper').scroll();
			var province = "/*<!--INCLUDE:province;JS-->*/";

			mui.ready(function() {
				//======================一级单选========================================
				$(document).on("tap","#btn_1", function() {
					//打开选择器 
					vdn.openResponse({
						id: "picker1",
						ini: function(first) {
							//第一次打开加载数据
							if(first) {
								//获取数据
								var fmt = '<li class="mui-table-view-cell vdn-select-item">${province}</li>'
								vdn.appendTo("picker1Content", fmt, province);
							}
							//默认选择项
							vdn.selectItem(0);
						},
						confirm: function() {
							//获取值
							selected = vdn.getSelectedItem();
							if(selected.item.length > 0) {
								$("#t_1").val(selected.value);
							} else {
								mui.toast("没有选中任何值");
								return false; //这里如果返回fase就不会关闭对话框
							}
						},
						//实际使用下面这个不是必须的
						cancel: function() {
							mui.toast("点解了取消按钮");
						}
					});
				})
				//======================一级多选========================================
				$("#btn_2").on("tap", function() {
					vdn.openResponse({
						id: "picker2",
						ini: function(first) {
							//第一次打开加载数据
							if(first) {
								//获取数据
								var fmt = '<li class="mui-table-view-cell vdn-select-item-multy">${province}</li>'
								vdn.appendTo("picker2Content", fmt, province);
							}
							//清空之前的选择
							//vdn._clearSelected();
							//默认选择项
							//vdn.selectItem(0);
						},
						confirm: function() {
							//多选value值为数组
							$("#t_2").val(vdn.getSelectedValue().join(","));
						}
					});
				});
				//======================二级单选========================================
				$("#btn_3").on("tap", function() {
					//打开选择器
					vdn.openResponse({
						id: "picker3",
						ini: function(first) {
							//第一次打开加载数据
							if(first) {
								//获取数据
								var fmt = '<li nav="nav1" class="mui-table-view-cell vdn-select-item">${province}</li>'
								vdn.appendTo("picker3Content1", fmt, province);
								//默认选择项
								vdn.selectItemNav("nav1", 0);
							}
							//清除选择项
							//vdn.clearSelectedNav();
						},
						confirm: function() {
							$("#t_3").val(vdn.getSelectedValue());
						},
						changed: function(item, isNav) {
							//如果是第一列（导航栏）则动态加载数据
							if(isNav) {
								//清空对象并控制滚动条
								vdn.clearItems("picker3Content2");
								vdn.get({
										method: 'nvo_Picker.getcity_json',
										params: $(item).text()
									}, function(data) {
										//模板
										var fmt = '<li class="mui-table-view-cell vdn-select-item">${city}</li>'
										vdn.appendTo("picker3Content2", fmt, data.Result);
										//默认选择项
										vdn.selectItem(0);
									},
									function(err) {
										alert(err.Message + "(" + err.Code.toString() + ")");
									});
							}
						}
					});
				});
				//======================二级多选========================================
				$("#btn_4").on("tap", function() {
					//打开选择器
					vdn.openResponse({
						id: "picker4",
						ini: function(first) {
							//第一次打开加载数据
							if(first) {
								//获取数据
								var fmt = '<li nav="nav1" class="mui-table-view-cell vdn-select-item">${province}</li>'
								vdn.appendTo("picker4Content1", fmt, province);
								//默认选择项
								vdn.selectItemNav("nav1", 0);
							}

						},
						confirm: function() {
							$("#t_4").val(vdn.getSelectedValue());
						},
						changed: function(item, isNav) {
							//如果是第一列（导航栏）则动态加载数据
							if(isNav) {
								//清空对象并控制滚动条
								vdn.clearItems("picker4Content2");
								//滚动条到顶部
								mui($("#picker4Content2").closest(".mui-scroll-wrapper")[0]).scroll().scrollTo(0, 0, 100);
								vdn.get({
										"method": 'nvo_Picker.getcity_json',
										"params": $(item).text()
									}, function(data) {
										//模板
										var fmt = '<li class="mui-table-view-cell vdn-select-item-multy">${city}</li>'
										vdn.appendTo("picker4Content2", fmt, data.Result);
										//滚动条到顶部
										mui($("#picker4Content2").closest(".mui-scroll-wrapper")[0]).scroll().scrollTo(0, 0, 100);
									},
									function(err) {
										alert(err.Message + "(" + err.Code.toString() + ")");
									});
							}
						}
					});
				});
				//======================三级单选========================================
				$("#btn_5").on("tap", function() {
					//打开选择器
					vdn.openResponse({
						id: "picker5",
						ini: function(first) {
							//第一次打开加载数据
							if(first) {
								//获取数据
								var fmt = '<li nav="nav1" class="mui-table-view-cell vdn-select-item">${province}</li>'
								vdn.appendTo("picker5Content1", fmt, province);
								//默认选择项
								vdn.selectItemNav("nav1", 0);
							}
							//清除选择项
							//vdn.clearSelectedNav();
						},
						confirm: function() {
							var selected = vdn.getSelectedItem();
							if(selected.item.length > 0) {
								$("#t_5").val(vdn.getSelectedValue("nav1") + "-" + vdn.getSelectedValue("nav2") + "-" + selected.value);
							}
						},
						changed: function(item, isNav) {
							//如果是第一列（导航栏）则动态加载数据
							if(isNav) {
								//根据nav属性区分
								if($(item).attr("nav") == "nav1") {
									vdn.get({
											method: 'nvo_Picker.getcity_json',
											params: $(item).text()
										}, function(data) {
											//清空对象并控制滚动条
											vdn.clearItems("picker5Content2");
											//模板
											var fmt = '<li nav="nav2" class="mui-table-view-cell vdn-select-item">${city}</li>'
											vdn.appendTo("picker5Content2", fmt, data.Result);
											//默认选择项
											vdn.selectItemNav("nav2", 0);
										},
										function(err) {
											alert(err.Message + "(" + err.Code.toString() + ")");
										});
								} else {
									//nav2
									vdn.get({
											method: 'nvo_Picker.getarea_json',
											params: $(item).text()
										}, function(data) {
											//清空对象并控制滚动条
											vdn.clearItems("picker5Content3");
											//模板
											var fmt = '<li class="mui-table-view-cell vdn-select-item">${area}</li>'
											vdn.appendTo("picker5Content3", fmt, data.Result);
											//默认选择项
											vdn.selectItem(0);
										},
										function(err) {
											alert(err.Message + "(" + err.Code.toString() + ")");
										});
								}
							}
						}
					});
				});
				//======================复合单选========================================
				$("#btn_6").on("tap", function() {
					//打开选择器 
					vdn.openResponse({
						id: "picker6",
						ini: function(first) {
							//第一次打开加载数据
							if(first) {
								//获取数据

								vdn.get({
										method: 'nvo_Picker.getareaex_json'
									}, function(data) {
										//清空对象并控制滚动条
										vdn.clearItems("picker6Content");
										//模板
										var fmt = '<li class="mui-table-view-cell vdn-select-item">';
										fmt += '<h4 id="area">${area} </h4><div class="mui-row">';
										fmt += '<div class="mui-table-cell mui-col-xs-6">';
										fmt += '<h5 id="province">${province}</h5></div>';
										fmt += '<div class="mui-table-cell mui-col-xs-6">';
										fmt += '<h5 id="city">${city}</h5></div>';
										fmt += '</div><h5>显示的其他内容</h5></li>';
										vdn.appendTo("picker6Content", fmt, data.Result);
										//默认选择项
										vdn.selectItem(0);
									},
									function(err) {
										alert(err.Message + "(" + err.Code.toString() + ")");
									});
							}

						},
						confirm: function() {
							//获取值
							selected = vdn.getSelectedItem();
							if(selected.item.length > 0) {
								var v1 = selected.item.find("#province").text();
								var v2 = selected.item.find("#city").text();
								var v3 = selected.item.find("#area").text();
								$("#t_6").val(v1 + "-" + v2 + "-" + v3);
							} else {
								mui.toast("没有选中任何值");
								return false; //这里如果返回fase就不会关闭对话框
							}
						},
						//实际使用下面这个不是必须的
						cancel: function() {
							mui.toast("点解了取消按钮");
						}
					});
				});
				//======================表单输入========================================
				$("#btn_7").on("tap", function() {
					vdn.openResponse({
						id: "picker7",
						ini: function(first) {
							$("#t_name").val("VDN");
							$("#t_tel").val("2018");
						},
						confirm: function() {
							//value值为数组
							$("#t_7").val($("#t_name").val() + "/" + $("#t_tel").val());
						}
					});
				});
				//过滤 2022-4-30
				$("#search_input").on("input",function(){
					var filter = $("#search_input").val().trim();
					$("#picker6Content").find("li").show();
					if (filter.length >0){
						$("#picker6Content").find("li:not(:contains('" +filter +"'))").hide();
					}
				})
			})
		</script>

	</body>

</html>