mui 地址管理
2017-06-16 18:12
246 查看
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/mui.picker.css" rel="stylesheet" />
<link href="css/mui.poppicker.css" rel="stylesheet" />
<style>
body{
/**font-size:14px;**/
}
.addressTabContent input,
.addressTabContent button,
.addressTabContent .mui-btn {
margin-top: 10px;
margin-left: 10px;
}
.mui-modal,
.mui-modal .mui-content {
background-color: #efeff4;
}
.mui-input-group {
padding-top: 15px;
}
.btnwidth {
width: 100%;
}
.mui-input-row label {
/**font-weight: bold;**/
}
.mui-modal .mui-content .mui-card {
margin-left: 0px;
margin-right: 0px;
border-radius: 0px;
}
#addressList .mui-btn{
padding: 5px;
}
#editAddress .mui-btn{
padding: 10px;
}
.mui-backdrop{
z-index: 9998;
}
.mui-poppicker{
z-index: 9999;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a href="main.html" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">地址管理</h1>
<a href="#editAddress" class="mui-btn mui-btn-link mui-pull-right">新增</a>
</header>
<div class="mui-content">
<div class="mui-scroll" id="addressList">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1" id="addtab1">寄件人地址</a>
<a class="mui-control-item" href="#item2" id="addtab2">收件人地址</a>
</div>
</div>
<div class="addressTabContent">
<div id="item1" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-8">
<h4 class="mui-ellipsis">王明阳</h4>
</div>
<div class="mui-table-cell mui-col-xs-4 mui-text-right">
<span class="mui-h5">18721037940</span>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12"&g
4000
t;
<p class="mui-h6 mui-ellipsis">Hi,李明明,申请交行信息卡,100元等你拿,李明明,申请交行信息卡,100元等你拿,</p>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<a href="javascript:void(0)" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-right delBtn">删除</a>
<a href="#editAddress" class="mui-btn mui-btn-outlined mui-pull-right">编辑</a>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-8">
<h4 class="mui-ellipsis">王明阳</h4>
</div>
<div class="mui-table-cell mui-col-xs-4 mui-text-right">
<span class="mui-h5">18721037940</span>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<p class="mui-h6 mui-ellipsis">Hi,李明明,申请交行信息卡,100元等你拿,李明明,申请交行信息卡,100元等你拿,</p>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<a href="javascript:void(0)" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-right delBtn">删除</a>
<a href="#editAddress" class="mui-btn mui-btn-outlined mui-pull-right">编辑</a>
</div>
</div>
</li>
</ul>
</div>
<div id="item2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-8">
<h4 class="mui-ellipsis">王明阳</h4>
</div>
<div class="mui-table-cell mui-col-xs-4 mui-text-right">
<span class="mui-h5">18721037940</span>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<p class="mui-h6 mui-ellipsis">Hi,李明明,申请交行信息卡,100元等你拿,李明明,申请交行信息卡,100元等你拿,</p>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<a href="javascript:void(0)" class="mui-btn mui-btn-danger mui-pull-right delBtn">删除</a>
<a href="#editAddress" class="mui-btn mui-btn-primary mui-pull-right">编辑</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="editAddress" class="mui-modal">
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-close mui-pull-right" href="#editAddress"></a>
<h1 class="mui-title">编辑地址</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 0px;">
<form class="mui-input-group">
<div class="mui-input-row">
<label>姓名</label>
<input type="text" class="mui-input-clear" placeholder="请输入姓名">
</div>
<div class="mui-input-row">
<label>电话</label>
<input type="text" class="mui-input-clear" placeholder="请输入手机号">
</div>
<div class="mui-input-row">
<label>所在地区</label>
<input type="text" placeholder="选择地区" id="area" readonly="readonly" >
</div>
<div class="mui-input-row" style="height:90px;">
<label>详细地址</label>
<textarea id="textarea" rows="3" placeholder="请输入详细地址"></textarea>
</div>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<span>设置为默认地址</span>
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div class="mui-content-padded">
<button type="button" id="addSubmitBtn" class="mui-btn mui-btn-block mui-btn-primary mybtn" onclick="return false;">确认</button>
</div>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/city.data-3.js"></script>
<script type="text/javascript">
mui.init({
swipeBack: true //启用右滑关闭功能
}
);
function getCode(locationStr){
var arr = locationStr.split(","),
i=0,len= cityData3.length,
child;
if(arr.length===0){
return [];
}
var res = [];
for(i=0;i<len;i++){
if(cityData3[i].text === arr[0]){
res.push(cityData3[i].value);
child = cityData3[i].children;
len = child.length;
for(i=0;i<len;i++){
if(child[i].text === arr[1]){
res.push( child[i].value);
child = child[i].children;
len = child.length;
for(i=0;i<len;i++){
if(child[i].text === arr[2]){
res.push(child[i].value);
return res;
}
}
}
}
}
}
return [];
}
(function($, doc) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
});
var delBtns = document.querySelectorAll(".delBtn");
[].forEach.call(delBtns, function(item, index) {
item.addEventListener('tap', function() {
var btnArray = ['否', '是'];
mui.confirm('确认删除吗?', '', btnArray, function(e) {
if(e.index == 1) {
//info.innerText = '你刚确认MUI是个好框架';
} else {
//info.innerText = 'MUI没有得到你的认可,继续加油'
}
})
});
});
//
var segmentedControl = document.getElementById('segmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if(this.checked) {
var styleEl = document.querySelector('input[name="style"]:checked');
var colorEl = document.querySelector('input[name="color"]:checked');
if(styleEl && colorEl) {
var style = styleEl.value;
var color = colorEl.value;
segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
}
}
});
//
var _getParam = function(obj, param) {
return obj[param] || '';
};
var cityPicker3 = new $.PopPicker({
layer: 3
});
var isSelected = false;
cityPicker3.setData(cityData3);
var showCityPickerButton = doc.getElementById('area');
var cityResult3 = doc.getElementById('area');
showCityPickerButton.addEventListener('tap', function(event) {
var codeArr = getCode("江苏省,扬州市,广陵区")
if(!isSelected && codeArr.length !==0){
cityPicker3.pickers[0].setSelectedValue(codeArr[0], 0, function() {
// 设定市初始值
cityPicker3.pickers[1].setSelectedValue(codeArr[1], 0, function() {
// 设定区初始值
cityPicker3.pickers[2].setSelectedValue(codeArr[2]);
});
});
}
cityPicker3.show(function(items) {
cityResult3.value = _getParam(items[0], 'text') + "," + _getParam(items[1], 'text') + "," + _getParam(items[2], 'text');
isSelected = true;
//返回 false 可以阻止选择框的关闭
//return false;
console.dir(items);
});
}, false);
}
)(mui, document);
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/mui.picker.css" rel="stylesheet" />
<link href="css/mui.poppicker.css" rel="stylesheet" />
<style>
body{
/**font-size:14px;**/
}
.addressTabContent input,
.addressTabContent button,
.addressTabContent .mui-btn {
margin-top: 10px;
margin-left: 10px;
}
.mui-modal,
.mui-modal .mui-content {
background-color: #efeff4;
}
.mui-input-group {
padding-top: 15px;
}
.btnwidth {
width: 100%;
}
.mui-input-row label {
/**font-weight: bold;**/
}
.mui-modal .mui-content .mui-card {
margin-left: 0px;
margin-right: 0px;
border-radius: 0px;
}
#addressList .mui-btn{
padding: 5px;
}
#editAddress .mui-btn{
padding: 10px;
}
.mui-backdrop{
z-index: 9998;
}
.mui-poppicker{
z-index: 9999;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a href="main.html" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">地址管理</h1>
<a href="#editAddress" class="mui-btn mui-btn-link mui-pull-right">新增</a>
</header>
<div class="mui-content">
<div class="mui-scroll" id="addressList">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1" id="addtab1">寄件人地址</a>
<a class="mui-control-item" href="#item2" id="addtab2">收件人地址</a>
</div>
</div>
<div class="addressTabContent">
<div id="item1" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-8">
<h4 class="mui-ellipsis">王明阳</h4>
</div>
<div class="mui-table-cell mui-col-xs-4 mui-text-right">
<span class="mui-h5">18721037940</span>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12"&g
4000
t;
<p class="mui-h6 mui-ellipsis">Hi,李明明,申请交行信息卡,100元等你拿,李明明,申请交行信息卡,100元等你拿,</p>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<a href="javascript:void(0)" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-right delBtn">删除</a>
<a href="#editAddress" class="mui-btn mui-btn-outlined mui-pull-right">编辑</a>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-8">
<h4 class="mui-ellipsis">王明阳</h4>
</div>
<div class="mui-table-cell mui-col-xs-4 mui-text-right">
<span class="mui-h5">18721037940</span>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<p class="mui-h6 mui-ellipsis">Hi,李明明,申请交行信息卡,100元等你拿,李明明,申请交行信息卡,100元等你拿,</p>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<a href="javascript:void(0)" class="mui-btn mui-btn-danger mui-btn-outlined mui-pull-right delBtn">删除</a>
<a href="#editAddress" class="mui-btn mui-btn-outlined mui-pull-right">编辑</a>
</div>
</div>
</li>
</ul>
</div>
<div id="item2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-8">
<h4 class="mui-ellipsis">王明阳</h4>
</div>
<div class="mui-table-cell mui-col-xs-4 mui-text-right">
<span class="mui-h5">18721037940</span>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<p class="mui-h6 mui-ellipsis">Hi,李明明,申请交行信息卡,100元等你拿,李明明,申请交行信息卡,100元等你拿,</p>
</div>
</div>
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-12">
<a href="javascript:void(0)" class="mui-btn mui-btn-danger mui-pull-right delBtn">删除</a>
<a href="#editAddress" class="mui-btn mui-btn-primary mui-pull-right">编辑</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="editAddress" class="mui-modal">
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-close mui-pull-right" href="#editAddress"></a>
<h1 class="mui-title">编辑地址</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 0px;">
<form class="mui-input-group">
<div class="mui-input-row">
<label>姓名</label>
<input type="text" class="mui-input-clear" placeholder="请输入姓名">
</div>
<div class="mui-input-row">
<label>电话</label>
<input type="text" class="mui-input-clear" placeholder="请输入手机号">
</div>
<div class="mui-input-row">
<label>所在地区</label>
<input type="text" placeholder="选择地区" id="area" readonly="readonly" >
</div>
<div class="mui-input-row" style="height:90px;">
<label>详细地址</label>
<textarea id="textarea" rows="3" placeholder="请输入详细地址"></textarea>
</div>
</form>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<span>设置为默认地址</span>
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div class="mui-content-padded">
<button type="button" id="addSubmitBtn" class="mui-btn mui-btn-block mui-btn-primary mybtn" onclick="return false;">确认</button>
</div>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/city.data-3.js"></script>
<script type="text/javascript">
mui.init({
swipeBack: true //启用右滑关闭功能
}
);
function getCode(locationStr){
var arr = locationStr.split(","),
i=0,len= cityData3.length,
child;
if(arr.length===0){
return [];
}
var res = [];
for(i=0;i<len;i++){
if(cityData3[i].text === arr[0]){
res.push(cityData3[i].value);
child = cityData3[i].children;
len = child.length;
for(i=0;i<len;i++){
if(child[i].text === arr[1]){
res.push( child[i].value);
child = child[i].children;
len = child.length;
for(i=0;i<len;i++){
if(child[i].text === arr[2]){
res.push(child[i].value);
return res;
}
}
}
}
}
}
return [];
}
(function($, doc) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
});
var delBtns = document.querySelectorAll(".delBtn");
[].forEach.call(delBtns, function(item, index) {
item.addEventListener('tap', function() {
var btnArray = ['否', '是'];
mui.confirm('确认删除吗?', '', btnArray, function(e) {
if(e.index == 1) {
//info.innerText = '你刚确认MUI是个好框架';
} else {
//info.innerText = 'MUI没有得到你的认可,继续加油'
}
})
});
});
//
var segmentedControl = document.getElementById('segmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if(this.checked) {
var styleEl = document.querySelector('input[name="style"]:checked');
var colorEl = document.querySelector('input[name="color"]:checked');
if(styleEl && colorEl) {
var style = styleEl.value;
var color = colorEl.value;
segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
}
}
});
//
var _getParam = function(obj, param) {
return obj[param] || '';
};
var cityPicker3 = new $.PopPicker({
layer: 3
});
var isSelected = false;
cityPicker3.setData(cityData3);
var showCityPickerButton = doc.getElementById('area');
var cityResult3 = doc.getElementById('area');
showCityPickerButton.addEventListener('tap', function(event) {
var codeArr = getCode("江苏省,扬州市,广陵区")
if(!isSelected && codeArr.length !==0){
cityPicker3.pickers[0].setSelectedValue(codeArr[0], 0, function() {
// 设定市初始值
cityPicker3.pickers[1].setSelectedValue(codeArr[1], 0, function() {
// 设定区初始值
cityPicker3.pickers[2].setSelectedValue(codeArr[2]);
});
});
}
cityPicker3.show(function(items) {
cityResult3.value = _getParam(items[0], 'text') + "," + _getParam(items[1], 'text') + "," + _getParam(items[2], 'text');
isSelected = true;
//返回 false 可以阻止选择框的关闭
//return false;
console.dir(items);
});
}, false);
}
)(mui, document);
</script>
</body>
</html>
相关文章推荐
- dcloud管理收货地址mui
- 兄弟连Linux基础知识与系统管理视频教程下载地址汇总
- 地址管理
- lduan Exchange 2013 地址列表管理(四)
- 10款最好用的MySQL数据库客户端图形界面管理工具-带下载地址
- Java网络编程从入门到精通(15):为什么要使用SocketAddress来管理网络地址
- 【强烈推荐】<<国土档案管理信息系统>>产品使用说明书系列目录【附下载地址】
- 互联网地址资源的管理与分配
- C# ASP.NET 走火入魔通用权限管理系统组件V3.2试用版下载地址【含数据库设计文档、使用手册】
- 网站备案管理系统 新地址 miitbeian miibeian.gov.cn www.miibeian.gov.cn
- maven管理地址
- cloudstack ssvm 管理地址不够造成无法启动修复过程
- 2950配置管理IP地址
- Exchange 2013脱机地址列表管理
- 虚拟地址空间管理之虚拟地址空间布局
- 易宝典文章——怎样管理Exchange Server 2013邮箱地址
- chrome 的插件管理地址
- 高校微后勤管理平台演示地址
- 完美解决ecshop收货地址管理app接口与其他端不同步
- 为什么要使用SocketAddress来管理网络地址