mui 地址管理

最新推荐文章于 2022-09-22 08:00:00 发布
最新推荐文章于 2022-09-22 08:00:00 发布
阅读量1.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eyugod/article/details/73348360
版权
<!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">
<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" οnclick="return false;">确认</button>&nbsp;&nbsp;
</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>
eyugod
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mui.min.css
06-15
mui的css
MUI 地址选择器 - picker使用
草巾冒小子的博客
09-07 4059
MUI 地址选择器 - picker使用 很多安卓原生的地址选择器中，选择器基本是实时滚动的。 就像腾讯QQ应用的地址选择器一样！ 效果截图如下： 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="vie...
dcloud管理收货地址mui
weixin_33827731的博客
01-15 203
为什么80%的码农都做不了架构师？>>> ...
H5 MUI 高德地图选择地址功能
奋斗小威的专栏
09-22 579
【代码】H5 MUI 高德地图选择地址功能。
mui日期地址选择插件
xiaoququ的博客
02-28 572
引入文件 // 文件在GitHub的mui中的plugin中picker文件夹中 &amp;amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;../assets/picker/css/mui.picker.css&amp;quot;&amp;amp;gt; &amp;amp;lt;link rel=&amp;quot;stylesheet&amp;q
MUI
08-13
1. **安装与引入**：开发者可以通过下载MUI的压缩包，将资源文件引入到项目中，或者使用npm等包管理工具进行安装。在HTML文件中引入CSS和JS文件，即可开始使用MUI的组件。 2. **组件使用**：每个组件都有详细的API...
MUI快速开发笔记文档
07-17
`plus.webview`是MUI提供的一个强大的API，用于管理和操作WebView窗口。通过`plus.webview`可以实现窗口的创建、显示、隐藏、关闭等功能。 - **获取当前WebView**： ```javascript var currentWebView = plus....
mui电商系统页面
09-19
4. **个人中心**：个人中心页面通常包括订单管理、收货地址、个人信息等模块。Mui的导航栏和抽屉式侧滑菜单可以构建清晰的页面结构，而列表组件则可用于展示用户的订单和地址信息。通过API接口与后台数据对接，用户...
mui手机商城源码.zip
07-07
5. 用户系统：登录注册、个人信息管理、收货地址管理等。 四、mui组件的使用 1. `mui.init()`：初始化全局配置，如下拉刷新、上拉加载等。 2. `mui.swiper()`：创建滑动切换效果，常用于首页轮播图。 3. `mui....
MUI开发手册
12-27
通过以上配置，MUI框架可以有效地管理页面之间的过渡动画，提高用户体验，同时也减少了DOM节点的数量，优化了性能。 ### 总结 MUI框架是一个强大且灵活的移动Web应用开发工具，通过其核心方法`mui.init()`和`mui....
基于mui框架修改的移动端城市地址选择
06-01
基于mui框架机场地址选择改版的一个城市选择插件，上面可以添加热门城市自动适应屏幕的宽度和高度
mui的省市区联动插件
09-19
此jar包含mui.min.css,mui.min.js和mui.picker.min.css,mui.picker.min.js
基于mui写的H5移动端全国地区三级联动菜单
02-28
基于mui写的H5移动端全国地区三级联动菜单，使用静态全国省市地区资源，加载速度快，亲测可用欢迎下载。
mui 全部js及css
04-01
mui中的全部js,css都有，自行解压获取。
dcloud编辑收货地址mui
weixin_34293141的博客
01-15 157
为什么80%的码农都做不了架构师？>>> ...
MUI实现自定义图标
浪子四方
09-03 1270
引言 在日常生活中，我们对图的感知能力总要强于对字的感知能力，所以在开发过程中适当的在应用里添加一些小巧又漂亮的图标是很有必要的，这可以轻轻松松的提高一大截的用户体验。笔者喜欢用MUI来做混合开发，可是在使用的过程中发现MUI自带的小图标并不能满足日常的开发，所以留下此笔记希望能帮助到遇到同样问题的小伙伴们。 MUI自带的图标 传送门：https://dev.dcloud.net.cn...
java-js知识库之十四——vue使用mui开发
这是个什么的博客
01-06 537
一、下载mui文件 mui下载地址 二、vue引入mui 2.1 文件迁入 mui-master下载完成后，将mui-master\dist\目录下的文件夹放入vue项目中 本人在src目录下新建了mui目录，将css、fonts和js三个文件夹放入在该目录下。 2.2 修改webpack.config.js 在rules数组下最后一项增加 |ttf ，因为引入的mui文件包含.ttf文件 t...
node 环境(vue 项目 引入mui.min.css 打包报错
Sophiego的博客
05-08 2944
引用mui.min.csss,运行没问题，打包就报错，样式明显是没引用mui.min.css的，所以百度找到了方法；[1m[31mERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true,"publicPath":"../../"}!./~/vue-style-loader!./~/css-loader?{...
Dialog MUI
最新发布
03-22
Dialog MUI（Dialog Multi-User Interaction）是一种多用户交互的对话系统。它是基于自然语言处理和人工智能技术的，旨在实现多用户之间的自然对话。Dialog MUI可以同时处理多个用户的输入，并根据上下文和语义理解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值