mui中一级联动

最新推荐文章于 2021-04-07 16:49:10 发布
最新推荐文章于 2021-04-07 16:49:10 发布
阅读量106 收藏
点赞数
文章标签： 数据库
原文链接：http://www.cnblogs.com/maxiaowei/p/11049326.html
版权

<!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.css" rel="stylesheet" />
<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 type="text/css">
.mui-content>.mui-table-view:first-child {
margin-top: 8px;
}

.mui-bar-nav {
box-shadow: 0 1px 6px #FAFAFA;
background-color: #fff;
}

.mui-content {
background-color: #F7F7F7;
}

body {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 13px;
}

.mui-icon-back:before,
.mui-icon-left-nav:before {
color: #CCCCCC;
}

.mui-table-view-cell input {
text-align: right;
padding: 0px;
width: 70%;
right: 30px;
margin-bottom: 0;
border: none;
position: absolute;
height: 25px;
background: none;
}


</style>
</head>

<body>
<header id="header" class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left a"></a>
<h1 class="mui-title">我的资料</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view ">
<li class="mui-table-view-cell" id="showUserPicker">
<label class="mui-navigate-right">性别</label>
<input type="text" name="" id="userPicker" value="" readonly="readonly" />
</li>
</ul>

</div>

<script src="js/mui.js"></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<script type="text/javascript">
mui.init()
var userPicker = new mui.PopPicker();
userPicker.setData([{
value: 'man',
text: '女'
}, {
value: 'women',
text: '男'
}]);
var showUserPickerButton = document.getElementById('showUserPicker');
showUserPickerButton.addEventListener('tap', function(event) {
userPicker.show(function(items) {
let sex = JSON.stringify(items[0]);
console.log(sex);
document.getElementById('userPicker').value = JSON.parse(sex).text;
});
}, false);

</script>
</body>

</html>

转载于:https://www.cnblogs.com/maxiaowei/p/11049326.html

weixin_30432179
关注
MUI实现城市二级联动选择器
浪子四方
08-28 1443
引言 城市的二级联动跟城市的三级联动差不多，不过使用的场景还是有一小点区别的，三级联动往往设计详细信息，而二级联动显示的是一个大概信息，比如在个人信息中要描述用户所在的地区等，下面我们来看一个城市二级联动的小案例。 实现的效果 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-...
mui制作的一级联动选择demo
12-07
利用mui中的picker选择组件制作的小型一级普通联动demo
MUI-picker（选择器），一级、二级联动、三级联动
热门推荐
LzzMandy的博客
12-19 1万+
mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现 1、文件引用 poppicker组件依赖mui.picker.js/.css   mui.poppicker.js/.css 请务必在mui.js/css后中引用,也可统一引用 压缩版本:mui.picker.min.js 2、mui涉及到的方法如下...
多级联动下拉选择框，动态获取下一级
01-05
多级联动下拉选择框，动态获取下一级，每一级数据为XML，可支持无限级（浏览器端需要Microsoft.XMLDOM支持） 项目需要，一个材料类别表，三级，总共有7000多条记录，如果一次获取会很慢的，所以就是用了动态读取，每次就读一级，且服务器端使用了缓存，效率还不错。
MUI实现省和城市之间的二级联动.zip
01-04
MUI实现省和城市之间的二级联动.zip
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框架开发的一个适用于移动设备的HTML5页面，该页面包含一个具有三级结构的地区选择菜单。这个菜单设计能够帮助用户快速、方便地选择他们所在的省份...
二级联动mui客户端下拉赋值及回显
凉梦的博客
04-07 996
mui框架的实例中，下拉都是固定的json格式数据，但是我们实际开发过程中，需要从后来动态获取值，并回显到下拉框，效果如下 前端以jsp为例： 由于需要向后台传值，我们采用form表单的方式进行提交，所以，增加input隐藏域，方便后台接收参数，如果是ajax方式传参，可以讲跟在地址后面， 默认状态是请选择 <!--状态下拉--> <input name="scheduleAddr" id="scheduleAddr" value="${addrType}" type="hi
二级联动，级联，省份城市联动
07-02
二级联动。
二级联动选择框的实现
weixin_33957648的博客
12-28 566
二级联动下拉菜单选择应用在在很多地方，比如说省市下拉联动，商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现的效果就是当选择大类时，小类下拉框里的选项内容也随着改变。实现原理：根据大类的值，通过jQuery把值传给后台PHP处理，PHP通过查询MySQl数据库，得到相应的小类，并返回JSON数据给前端处理。 首先我们要建立两个下拉选...
mui城市列表三级联动,修正后的
02-19
官方mui城市三级联动,列表有些城市对应县区不正确,上面是经过修改后的
省市区联动插件
09-01
基于jq的全国省市区联动插件。
微信小程序省市二级联动picke
weixin_43899969的博客
05-26 2327
** 微信小程序省市二级联动picker ** 微信小程序官方文档上的的picker是省市区三级联动，有时我们只需要二级联动，这就需要我们自己作修改，之前在网上也查找了很多资料，省市数据都不太完善，今天做了一个相对完善的版本，话不多说，上代码 wxml代码：在这里插入代 <view class="section"> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMu
MUI 地址选择器 - picker使用
草巾冒小子的博客
09-07 4063
MUI 地址选择器 - picker使用 很多安卓原生的地址选择器中，选择器基本是实时滚动的。 就像腾讯QQ应用的地址选择器一样！ 效果截图如下： 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="vie...
【MUI】记录省市区三级联动开发
前端开发
11-18 9515
本文利用mui框架及其封装的picker组件进行编辑。
Mui级联组件从后台获取数据
Charlie_one的博客
03-19 1340
开发中用到picker组件，3级级联。选择省市县。 参考Mui官方文档，做些修改即可实现功能。 官方的数据是写死的，如果想从后台那数据的话，最好让后台把数据改成这种样式的Json数据。 [{ "value": "110000", "text": "北京市", children: [{ "value": "110100", "text": "北京市", children: [{ ...
Javascript 城市联动选择，支持一级，二级，三级联动
小强的码屋
05-11 2738
多模式的城市联动选择JS脚本。
mui 日期选择 和省市区三级联动实现
weixin_42340514的博客
05-29 1301
代码部分 <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></titl...
mui下拉框picker选择器
Bling Bling ~~
11-03 3739
经常做pc端的下拉框（图一），所以在做手机端下拉框的时候发现很少有图一样式的，然后在网上找了很长时间，发现大多的UI库都是如图三中的展示，所以开始我在努力的往图一样式靠（重新引入的样式组件js+css），花了很长时间，最后还是因为样式和取值复杂而放弃啦 图一： 然后我开始用其原生的select,虽然样式也改动了部分但是还是觉得有点丑，最后也放弃啦 图二： 最后由于时间的关系最终决定还是用mui自带的这个picker选择器，虽然丑了点但是改改之后还是可以看下去的。 图三： 图四就是我用mui修改后的效果，虽
限制mui左滑返回上一级
最新发布
07-27
对于限制mui左滑返回上一级的问题，你可以尝试以下方法： 1. 使用`preventDefault`方法阻止默认的左滑返回行为。你可以在页面加载时或者需要限制左滑返回的页面上添加以下代码： ```javascript document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值