提交 f118b58e 编写于 作者: hbcui1984's avatar hbcui1984

编译至mui v1.8.0

上级 ac460122
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
.mui-dtpicker {
position: fixed;
left: 0px;
width: 100%;
z-index: 999999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
bottom: 0px;
-webkit-transform: translateY(300px);
}
.mui-dtpicker-header {
padding: 6px;
font-size: 14px;
color: #888;
}
.mui-dtpicker-header button {
font-size: 12px;
padding: 5px 10px;
}
.mui-dtpicker-header button:last-child {
float: right;
}
.mui-dtpicker-body {
position: relative;
width: 100%;
height: 200px;
border-top: solid 1px #eee;
background-color: #fff;
}
.mui-dtpicker-title h5 {
display: inline-block;
width: 20%;
margin: 0px;
padding: 8px;
text-align: center;
border-top: solid 1px #ddd;
background-color: #fafafa;
}
.mui-dtpicker .mui-listpicker {
width: 20%;
height: 100%;
margin: 0px;
float: left;
border: none;
}
.mui-dtpicker .mui-listpicker ul li {
padding: 10px;
}
/*年月日时分*/
[data-type="datetime"] .mui-listpicker,
[data-type="time"] .mui-dtpicker-title h5 {
width: 20%;
}
[data-type="datetime"] [data-id="picker-h"],
[data-type="datetime"] [data-id="title-h"] {
border-left: dotted 1px #ddd;
}
/*年月日*/
[data-type="date"] .mui-listpicker,
[data-type="date"] .mui-dtpicker-title h5 {
width: 33.3%;
}
[data-type="date"] [data-id="picker-h"],
[data-type="date"] [data-id="picker-i"],
[data-type="date"] [data-id="title-h"],
[data-type="date"] [data-id="title-i"] {
display: none;
}
/*年月日时*/
[data-type="hour"] .mui-listpicker,
[data-type="hour"] .mui-dtpicker-title h5 {
width: 25%;
}
[data-type="hour"] [data-id="picker-i"],
[data-type="hour"] [data-id="title-i"] {
display: none;
}
[data-type="hour"] [data-id="picker-h"],
[data-type="hour"] [data-id="title-h"] {
border-left: dotted 1px #ddd;
}
/*时分*/
[data-type="time"] .mui-listpicker,
[data-type="time"] .mui-dtpicker-title h5 {
width: 50%;
}
[data-type="time"] [data-id="picker-y"],
[data-type="time"] [data-id="picker-m"],
[data-type="time"] [data-id="picker-d"],
[data-type="time"] [data-id="title-y"],
[data-type="time"] [data-id="title-m"],
[data-type="time"] [data-id="title-d"] {
display: none;
}
/*年月*/
[data-type="month"] .mui-listpicker,
[data-type="month"] .mui-dtpicker-title h5 {
width: 50%;
}
[data-type="month"] [data-id="picker-d"],
[data-type="month"] [data-id="picker-h"],
[data-type="month"] [data-id="picker-i"],
[data-type="month"] [data-id="title-d"],
[data-type="month"] [data-id="title-h"],
[data-type="month"] [data-id="title-i"] {
display: none;
}
\ No newline at end of file
此差异已折叠。
.mui-poppicker {
position: fixed;
left: 0px;
width: 100%;
z-index: 999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
bottom: 0px;
-webkit-transform: translateY(300px);
}
.mui-poppicker.mui-active {
-webkit-transform: translateY(0px);
}
.mui-android-5-1 .mui-poppicker {
bottom: -300px;
-webkit-transition-property: bottom;
-webkit-transform: none;
}
.mui-android-5-1 .mui-poppicker.mui-active {
bottom: 0px;
-webkit-transition-property: bottom;
-webkit-transform: none;
}
.mui-poppicker-header {
padding: 6px;
font-size: 14px;
color: #888;
}
.mui-poppicker-header .mui-btn {
font-size: 12px;
padding: 5px 10px;
}
.mui-poppicker-btn-cancel {
float: left;
}
.mui-poppicker-btn-ok {
float: right;
}
.mui-poppicker-clear {
clear: both;
height: 0px;
line-height: 0px;
font-size: 0px;
overflow: hidden;
}
.mui-poppicker-body {
position: relative;
width: 100%;
height: 200px;
border-top: solid 1px #ddd;
}
.mui-poppicker-body .mui-listpicker {
width: 100%;
height: 100%;
margin: 0px;
border: none;
float: left;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -10,18 +11,18 @@
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
.mui-btn{
display: block;
width: 120px;
margin: 10px auto;
}
#info{
padding: 20px 10px ;
}
.mui-btn {
display: block;
width: 120px;
margin: 10px auto;
}
#info {
padding: 20px 10px;
}
</style>
</head>
<body>
......@@ -38,72 +39,80 @@
<button id='pickDateBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">日期选择框</button>
<button id='pickTimeBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">时间选择框</button>
<div id="info">
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
//mui初始化
//mui初始化
mui.init({
swipeBack:true //启用右滑关闭功能
swipeBack: true //启用右滑关闭功能
});
var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap',function(){
mui.alert('欢迎使用Hello MUI','Hello MUI',function(){
info.innerText = '你刚关闭了警告框';
});
});
document.getElementById("confirmBtn").addEventListener('tap',function(){
var btnArray = ['',''];
mui.confirm('MUI是个好框架,确认?','Hello MUI',btnArray,function(e){
if(e.index==0){
info.innerText = '你刚确认MUI是个好框架';
}else{
info.innerText = 'MUI没有得到你的认可,继续加油'
}
})
});
//TODO iOS 8.x平台存在bug,使用plus.nativeUI.prompt会造成输入法闪一下又没了,故临时使用click代替tap;
document.getElementById("promptBtn").addEventListener('click',function(){
var btnArray = ['确定','取消'];
mui.prompt('请输入你对MUI的评语:','性能好','Hello MUI',btnArray,function(e){
if(e.index==0){
info.innerText = '谢谢你的评语:'+e.value;
}else{
info.innerText = '你点了取消按钮';
}
})
});
document.getElementById("toastBtn").addEventListener('tap',function(){
mui.toast('欢迎体验Hello MUI');
});
document.getElementById("pickDateBtn").addEventListener('tap',function () {
var dDate=new Date();
dDate.setFullYear(2014,7,16);
var minDate=new Date();
minDate.setFullYear(2010,0,1);
var maxDate=new Date();
maxDate.setFullYear(2016,11,31);
plus.nativeUI.pickDate( function(e) {
var d=e.date;
info.innerText = '您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate();
},function(e){
document.getElementById("alertBtn").addEventListener('tap', function() {
mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() {
info.innerText = '你刚关闭了警告框';
});
});
document.getElementById("confirmBtn").addEventListener('tap', function() {
var btnArray = ['', ''];
mui.confirm('MUI是个好框架,确认?', 'Hello MUI', btnArray, function(e) {
if (e.index == 0) {
info.innerText = '你刚确认MUI是个好框架';
} else {
info.innerText = 'MUI没有得到你的认可,继续加油'
}
})
});
document.getElementById("promptBtn").addEventListener('tap', function(e) {
e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug,使用plus.nativeUI.prompt会造成输入法闪一下又没了
var btnArray = ['确定', '取消'];
mui.prompt('请输入你对MUI的评语:', '性能好', 'Hello MUI', btnArray, function(e) {
if (e.index == 0) {
info.innerText = '谢谢你的评语:' + e.value;
} else {
info.innerText = '你点了取消按钮';
}
})
});
document.getElementById("toastBtn").addEventListener('tap', function() {
mui.toast('欢迎体验Hello MUI');
});
document.getElementById("pickDateBtn").addEventListener('tap', function() {
var dDate = new Date();
dDate.setFullYear(2014, 7, 16);
var minDate = new Date();
minDate.setFullYear(2010, 0, 1);
var maxDate = new Date();
maxDate.setFullYear(2016, 11, 31);
plus.nativeUI.pickDate(function(e) {
var d = e.date;
info.innerText = '您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
}, function(e) {
info.innerText = "您没有选择日期";
},{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate});
}, {
title: "请选择日期",
date: dDate,
minDate: minDate,
maxDate: maxDate
});
})
document.getElementById("pickTimeBtn").addEventListener('tap',function () {
var dTime=new Date();
dTime.setHours(6,0);
plus.nativeUI.pickTime(function(e){
var d=e.date;
info.innerText = "您选择的时间是:"+d.getHours()+":"+d.getMinutes();
},function (e){
info.innerText = "您没有选择时间"
},{title:"请选择时间",is24Hour:true,time:dTime});
document.getElementById("pickTimeBtn").addEventListener('tap', function() {
var dTime = new Date();
dTime.setHours(6, 0);
plus.nativeUI.pickTime(function(e) {
var d = e.date;
info.innerText = "您选择的时间是:" + d.getHours() + ":" + d.getMinutes();
}, function(e) {
info.innerText = "您没有选择时间"
}, {
title: "请选择时间",
is24Hour: true,
time: dTime
});
});
</script>
</body>
</html>
\ No newline at end of file
<!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.listpicker.css" rel="stylesheet" />
<link href="../css/mui.dtpicker.css" rel="stylesheet" />
<style>
html,
body,
.mui-content {
height: 0px;
margin: 0px;
background-color: #efeff4;
}
h5.mui-content-padded {
margin-left: 3px;
margin-top: 20px !important;
}
h5.mui-content-padded:first-child {
margin-top: 12px !important;
}
.mui-btn {
font-size: 16px;
padding: 8px;
margin: 3px;
}
.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">dtpicker(日期时间选择器)</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5 class="mui-content-padded">常规示例</h5>
<button id='demo1' data-options='{}' class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
<h5 class="mui-content-padded">设定年份区间</h5>
<button id='demo2' data-options='{"type":"date","beginYear":2014,"endYear":2016}' class="btn mui-btn mui-btn-block">选择日期 ...</button>
<h5 class="mui-content-padded">设定选中的时间</h5>
<button id='demo3' data-options='{"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020}' class="btn mui-btn mui-btn-block">选择日期时间 ...</button>
<h5 class="mui-content-padded">指定类型</h5>
<button id='demo4' data-options='{"type":"date"}' class="btn mui-btn mui-btn-block">选择日期 ...</button>
<button id='demo5' data-options='{"type":"time"}' class="btn mui-btn mui-btn-block">选择时间 ...</button>
<button id='demo6' data-options='{"type":"month"}' class="btn mui-btn mui-btn-block">选择月份 ...</button>
<h5 class="mui-content-padded">自定义数据</h5>
<button id='demo7' data-options='{"type":"hour","customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"},{"text":"晚上","value":"晚上"}]},"labels":["年", "月", "日", "时段", "分"]}' class="btn mui-btn mui-btn-block">选择时段 ...</button>
<div id='result' class="ui-alert"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.listpicker.js"></script>
<script src="../js/mui.dtpicker.js"></script>
<script>
(function($) {
$.init();
var result = $('#result')[0];
var btns = $('.btn');
var pickers = {};
btns.each(function(i, btn) {
btn.addEventListener('tap', function() {
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
var id = this.getAttribute('id');
/*
* 首次显示时实例化组件
* 示例为了简洁,将 options 放在了按钮的 dom 上
* 也可以直接通过代码声明 optinos 用于实例化 DtPicker
*/
pickers[id] = pickers[id] || new $.DtPicker(options);
pickers[id].show(function(rs) {
/*
* rs.value 拼合后的 value
* rs.text 拼合后的 text
* rs.y 年,可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
* rs.m 月,用法同年
* rs.d 日,用法同年
* rs.h 时,用法同年
* rs.i 分(minutes 的第二个字母),用法同年
*/
result.innerText = '选择结果: ' + rs.text;
});
}, false);
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</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">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style type="text/css">
.mui-fullscreen{
position: fixed;
z-index: 20;
background-color: #000;
}
p img{
max-width: 100%;
height: auto;
}
</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">图片放大预览示例</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>这是图片放大预览示例,点击如下图片体验全屏预览功能</p>
<p><img src="../images/1.jpg" alt="" class="mui-action-preview"/></p>
<p>图片全屏后,左右滑动可查看本页其它图片,点击会关闭预览</p>
<p><img src="../images/2.jpg" alt="" class="mui-action-preview" /></p>
<p>第三张图片,纯粹为了占位: </p>
<p><img src="../images/3.jpg" alt="" class="mui-action-preview"/></p>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script>
mui.init();
mui.ready(function () {
var imgs = document.querySelectorAll("img.mui-action-preview");
imgs = mui.slice.call(imgs);
if(imgs&&imgs.length>0){
var slider = document.createElement("div");
slider.setAttribute("id","__mui-imageview__");
slider.classList.add("mui-slider");
slider.classList.add("mui-fullscreen");
slider.style.display = "none";
slider.addEventListener("tap",function () {
slider.style.display = "none";
});
slider.addEventListener("touchmove",function (event) {
event.preventDefault();
})
var slider_group = document.createElement("div");
slider_group.setAttribute("id","__mui-imageview__group");
slider_group.classList.add("mui-slider-group");
imgs.forEach(function (value,index,array) {
//给图片添加点击事件,触发预览显示;
value.addEventListener('tap',function () {
slider.style.display = "block";
_slider.refresh();
_slider.gotoItem(index,0);
})
var item = document.createElement("div");
item.classList.add("mui-slider-item");
var a = document.createElement("a");
a.setAttribute("href","#");
var img = document.createElement("img");
img.setAttribute("src",value.src);
a.appendChild(img)
item.appendChild(a);
slider_group.appendChild(item);
});
slider.appendChild(slider_group);
document.body.appendChild(slider);
var _slider = mui(slider).slider();
}
});
</script>
</html>
\ No newline at end of file
......@@ -48,7 +48,7 @@
</p>
<p>更多详细介绍,请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看;</p>
<h4>版本介绍</h4>
<p>当前版本为1.7.0,可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为1.8.0,可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<h4>License</h4>
<p>
mui遵循MIT License,源码已提交至Github,<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
......@@ -5,13 +5,16 @@
<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.min.css" rel="stylesheet" />
<link href="../css/mui.listpicker.css" rel="stylesheet" />
<style>
html,
body,
.mui-content {
height: 0px;
margin: 0px;
background-color: #efeff4;
}
h5.mui-content-padded {
margin-left: 3px;
margin-top: 20px !important;
......@@ -19,131 +22,58 @@
h5.mui-content-padded:first-child {
margin-top: 12px !important;
}
.ui-alert {
text-align: center;
padding: 20px 10px;
font-size: 16px;
#userPicker {
height: 185px;
}
.mui-btn {
font-size: 16px;
padding: 8px;
margin: 3px;
}
/*用户列表示例*/
.user-panel {
}
.mui-picker-panel{
position: fixed;
left: 0px;
width: 100%;
z-index: 999999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
bottom: 0px;
-webkit-transform: translateY(280px);
.btn-area{
text-align: center;
}
.mui-picker-panel .mui-panel-header {
padding: 6px;
.btn-area button {
width: 47%;
font-size: 14px;
color: #888;
}
.mui-picker-panel .mui-panel-body {
position: relative;
width: 100%;
height: 200px;
border-top: solid 1px #ddd;
}
.user-panel .mui-listpicker {
width: 100%;
height: 100%;
margin: 0px;
border: none;
}
.mui-panel-header button {
font-size: 12px;
padding: 5px 10px;
}
.mui-panel-header button:last-child {
float: right;
}
/**级联示例样式**/
.city-panel {
}
.city-panel .mui-listpicker {
width: 50%;
height: 100%;
margin: 0px;
float: left;
border: none;
.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">list picker(选择列表)</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5 class="mui-content-padded">普通示例</h5>
<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>显示选择人员 ...</button>
<button id='showUserPickerAndSelect' class="mui-btn mui-btn-block" type='button'>显示并选中指定的项(庄颜) ...</button>
<div id='userPickerResult' class="ui-alert"></div>
<div class="user-panel mui-picker-panel">
<div class="mui-panel-header">
<button id='userPickerCancelBtn' class="mui-btn">取消</button>
<button id='userPickerOKBtn' class="mui-btn mui-btn-blue">确定</button>
</div>
<div class="mui-panel-body">
<div id='userPicker' class="mui-listpicker">
<div class="mui-listpicker-inner">
<ul>
<li data-value="ywj">董事长 叶文洁</li>
<li data-value="aaa">总经理 艾AA</li>
<li data-value="lj">罗辑</li>
<li data-value="ymt">云天明</li>
<li data-value="shq">史强</li>
<li data-value="zhbh">章北海</li>
<li data-value="zhy">庄颜</li>
<li data-value="gyf">关一帆</li>
<li data-value="zhz">智子</li>
<li data-value="gezh">歌者</li>
</ul>
</div>
</div>
<div id='userPicker' class="mui-listpicker">
<div class="mui-listpicker-inner">
<ul>
<li data-value="ywj">董事长 叶文洁</li>
<li data-value="aaa">总经理 艾AA</li>
<li data-value="lj">罗辑</li>
<li data-value="ymt">云天明</li>
<li data-value="shq">史强</li>
<li data-value="zhbh">章北海</li>
<li data-value="zhy">庄颜</li>
<li data-value="gyf">关一帆</li>
<li data-value="zhz">智子</li>
<li data-value="gezh">歌者</li>
</ul>
</div>
</div>
<h5 class="mui-content-padded">级联示例</h5>
<button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>显示选择城市 ...</button>
<div id='cityPickerResult' class="ui-alert"></div>
<div class="city-panel mui-picker-panel">
<div class="mui-panel-header">
<button id='cityPickerCancel' class="mui-btn">取消</button>
<button id='cityPickerOK' class="mui-btn mui-btn-blue">确定</button>
</div>
<div class="mui-panel-body">
<div id='provincePicker' class="mui-listpicker">
<div class="mui-listpicker-inner">
<ul>
</ul>
</div>
</div>
<div id='cityPicker' class="mui-listpicker">
<div class="mui-listpicker-inner">
<ul>
</ul>
</div>
</div>
</div>
</div>
<!--<div class="ui-mask"></div>-->
<p class="btn-area">
<button data-method='getSelectedIndex' data-args='' class="mui-btn api-btn" type='button'>获取选中的索引</button>
<button data-method='getSelectedValue' data-args='' class="mui-btn api-btn" type='button'>获取选中的值</button>
<button data-method='getSelectedText' data-args='' class="mui-btn api-btn" type='button'>获取选中的文本</button>
<button data-method='getSelectedItem' data-args='' class="mui-btn api-btn" type='button'>获取选中的项</button>
<button data-method='setSelectedIndex' data-args='6' class="mui-btn api-btn" type='button'>设置选中的索引(6)</button>
<button data-method='setSelectedValue' data-args='zhz' class="mui-btn api-btn" type='button'>设置选中的值(智子)</button>
</p>
<div id='result' class="ui-alert"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
......@@ -152,202 +82,26 @@
(function($, doc) {
$.init();
$.ready(function() {
// var mask = doc.querySelector('.ui-mask');
var mask = mui.createMask(_hidePickerPanel);
var currentPanel = null;
//普通示例****************************************************
var showUserPickerBtn = doc.querySelector('#showUserPicker');
var showUserPickerAndSelect = doc.querySelector('#showUserPickerAndSelect');
var userPickerPanel = doc.querySelector('.user-panel');
var userPickerOKBtn = doc.querySelector('#userPickerOKBtn');
var userPickerCancelBtn = doc.querySelector('#userPickerCancelBtn');
var userPickerResult = doc.querySelector('#userPickerResult');
var userPicker = doc.querySelector('#userPicker');
userPicker.setSelectedValue('shq');
var showUserPanel = function() {
// mask.style.display = 'block';
mask.show();
currentPanel = userPickerPanel;
userPickerPanel.style.webkitTransform = 'translateY(0px)';
};
// function hideUserPanel() {
// userPickerPanel.style.webkitTransform = 'translateY(280px)';
// mask.style.display = 'none';
// }
//关闭弹出的选择面板
function _hidePickerPanel () {
if(currentPanel){
currentPanel.style.webkitTransform = 'translateY(280px)';
currentPanel = null;
}
}
//关闭弹出的选择面板
function hidePickerPanel () {
_hidePickerPanel();
mask.close();
}
// mask.addEventListener('tap', hideUserPanel, false);
showUserPickerBtn.addEventListener('tap', showUserPanel, false);
showUserPickerAndSelect.addEventListener('tap', function() {
userPicker.setSelectedValue('zhy');
showUserPanel();
}, false);
//确定按钮的点击事件
userPickerOKBtn.addEventListener('tap', function() {
var buffer = [];
buffer.push('索引: ' + userPicker.getSelectedIndex());
buffer.push('值: ' + userPicker.getSelectedValue());
buffer.push('文本: ' + userPicker.getSelectedText());
buffer.push('项: ' + JSON.stringify(userPicker.getSelectedItem()));
userPickerResult.innerHTML = buffer.join(' , ');
hidePickerPanel();
}, false);
//取消按钮的点击事件
userPickerCancelBtn.addEventListener('tap', hidePickerPanel, false);
/*
//
var userPicker = doc.getElementById('userPicker');
var result = doc.getElementById('result');
userPicker.setSelectedValue('ymt');
userPicker.addEventListener('change', function(event) {
var item = event.detail.item;
console.log(item.value);
var index = event.detail.index;
console.log(index);
}, false);
*/
//级联示例********************************************
var showCityPickerBtn = doc.querySelector('#showCityPicker');
var cityPickerPanel = doc.querySelector('.city-panel');
var cityCancelBtn = doc.querySelector('#cityPickerCancel');
var cityOKBtn = doc.querySelector('#cityPickerOK');
var provincePicker = doc.querySelector('#provincePicker');
var cityPicker = doc.querySelector('#cityPicker');
var cityPickerResult = doc.querySelector('#cityPickerResult');
var showCityPanel = function() {
// mask.style.display = 'block';
mask.show();
currentPanel = cityPickerPanel;
cityPickerPanel.style.webkitTransform = 'translateY(0px)';
};
// var hideCityPanel = function() {
// cityPickerPanel.style.webkitTransform = 'translateY(280px)';
// mask.style.display = 'none';
// };
//TODO chb
// mask.addEventListener('tap', function() {
// hideCityPanel();
// }, false);
showCityPickerBtn.addEventListener('tap', showCityPanel, false);
cityCancelBtn.addEventListener('tap', hidePickerPanel, false);
//城市级联选择的确定按钮
cityOKBtn.addEventListener('tap', function() {
cityPickerResult.innerText = '您选择了: ' + provincePicker.getSelectedText() + cityPicker.getSelectedText();
hidePickerPanel();
}, false);
//城市列表数据
var provinces = [{
value: 'sx',
text: '陕西',
citys: [{
value: 'xy',
text: '咸阳'
}, {
value: 'xa',
text: '西安'
}, {
value: 'ya',
text: '延安'
}, {
value: 'bj',
text: '宝鸡'
}, {
value: 'tc',
text: '铜川'
}, {
value: 'wn',
text: '渭南'
}, {
value: 'sl',
text: '商洛 '
}, {
value: 'hz',
text: '汉中 '
}]
}, {
value: 'hn',
text: '河南',
citys: [{
value: 'ly',
text: '洛阳'
}, {
value: 'df',
text: '开封'
}, {
value: 'ny',
text: '南阳'
}, {
value: 'ay',
text: '安阳'
}, {
value: 'jy',
text: '济源'
}, {
value: 'jz',
text: '焦作'
}, {
value: 'xx',
text: '新乡'
}, {
value: 'xy',
text: '信阳'
}, {
value: 'py',
text: '濮阳'
}, {
value: 'smx',
text: '三门峡'
}, {
value: 'sq',
text: '商丘'
}, {
value: 'zk',
text: '周口'
}, {
value: 'pds',
text: '平顶山'
}]
}, {
value: 'sd',
text: '山东',
citys: [{
value: 'qf',
text: '曲阜'
}, {
value: 'jn',
text: '济南'
}, {
value: 'qd',
text: '青岛'
}, {
value: 'wh',
text: '威海'
}, {
value: 'yc',
text: '烟台'
}, {
value: 'hz',
text: '荷泽'
}, {
value: 'ta',
text: '泰安'
}]
}];
//绑定
provincePicker.setItems(provinces);
provincePicker.addEventListener('change', function(event) {
var eventData = event.detail;
cityPicker.setItems(eventData.item.citys);
}, false);
setTimeout(function() {
provincePicker.setSelectedIndex(1);
}, 200);
var apiBtns = [].slice.call($('.api-btn'));
for (var i in apiBtns) {
var btn = apiBtns[i];
btn.addEventListener('tap', function(event) {
var method = this.getAttribute('data-method');
var args = this.getAttribute('data-args');
var rs = userPicker[method](args);
if (rs !== null && rs !== undefined) {
result.innerText = (typeof(rs) == 'string' ? rs : JSON.stringify(rs));
}
}, false);
}
});
})(mui, document);
</script>
......
<!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.listpicker.css" rel="stylesheet" />
<link href="../css/mui.poppicker.css" rel="stylesheet" />
<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">list picker(选择列表)</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<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>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.listpicker.js"></script>
<script src="../js/mui.poppicker.js"></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);
//-----------------------------------------
//级联示例
var cityPicker = new $.PopPicker({
layer: 2
});
cityPicker.setData([{
value: 'sx',
text: '陕西',
children: [{
value: 'xy',
text: '咸阳'
}, {
value: 'xa',
text: '西安'
}, {
value: 'ya',
text: '延安'
}, {
value: 'bj',
text: '宝鸡'
}, {
value: 'tc',
text: '铜川'
}, {
value: 'wn',
text: '渭南'
}, {
value: 'sl',
text: '商洛 '
}, {
value: 'hz',
text: '汉中 '
}]
}, {
value: 'hn',
text: '河南',
children: [{
value: 'ly',
text: '洛阳'
}, {
value: 'df',
text: '开封'
}, {
value: 'ny',
text: '南阳'
}, {
value: 'ay',
text: '安阳'
}, {
value: 'jy',
text: '济源'
}, {
value: 'jz',
text: '焦作'
}, {
value: 'xx',
text: '新乡'
}, {
value: 'xy',
text: '信阳'
}, {
value: 'py',
text: '濮阳'
}, {
value: 'smx',
text: '三门峡'
}, {
value: 'sq',
text: '商丘'
}, {
value: 'zk',
text: '周口'
}, {
value: 'pds',
text: '平顶山'
}]
}, {
value: 'sd',
text: '山东',
children: [{
value: 'qf',
text: '曲阜'
}, {
value: 'jn',
text: '济南'
}, {
value: 'qd',
text: '青岛'
}, {
value: 'wh',
text: '威海'
}, {
value: 'yc',
text: '烟台'
}, {
value: 'hz',
text: '荷泽'
}, {
value: 'ta',
text: '泰安'
}]
}]);
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);
});
})(mui, document);
</script>
</body>
</html>
\ No newline at end of file
此差异已折叠。
......@@ -26,8 +26,8 @@
mui.init({
swipeBack: false,
statusBarBackground: '#f7f7f7',
gestureConfig:{
doubletap:true
gestureConfig: {
doubletap: true
},
subpages: [{
id: 'list',
......@@ -39,9 +39,7 @@
}
}]
});
mui.plusReady(function() {
if (mui.os.android) {
plus.screen.lockOrientation("portrait-primary");
}
......@@ -63,14 +61,20 @@
});
}, 200);
});
var isInTransition = false;
/**
* 显示侧滑菜单
*/
function openMenu() {
if (isInTransition) {
return;
}
if (!showMenu) {
//侧滑菜单处于隐藏状态,则立即显示出来;
isInTransition = true;
menu.setStyle({
mask: 'rgba(0,0,0,0)'
}); //menu设置透明遮罩防止点击
menu.show('none', 0, function() {
//主窗体开始侧滑并显示遮罩
main.setStyle({
......@@ -80,17 +84,27 @@
duration: 150
}
});
mui.later(function() {
isInTransition = false;
menu.setStyle({
mask: "none"
}); //移除menu的mask
}, 160);
showMenu = true;
});
}
}
};
/**
* 关闭菜单
*/
function closeMenu() {
if (isInTransition) {
return;
}
if (showMenu) {
//关闭遮罩;
//主窗体开始侧滑;
isInTransition = true;
main.setStyle({
mask: 'none',
left: '0',
......@@ -100,12 +114,13 @@
});
showMenu = false;
//等动画结束后,隐藏菜单webview,节省资源;
setTimeout(function() {
mui.later(function() {
isInTransition = false;
menu.hide();
}, 300);
}
}
//点击左上角侧滑图标,打开侧滑菜单;
};
//点击左上角侧滑图标,打开侧滑菜单;
document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {
if (showMenu) {
closeMenu();
......@@ -113,8 +128,8 @@
openMenu();
}
});
//敲击顶部导航,内容区回到顶部
document.querySelector('header').addEventListener('doubletap',function () {
//敲击顶部导航,内容区回到顶部
document.querySelector('header').addEventListener('doubletap', function() {
main.children()[0].evalJS('mui.scrollTo(0, 100)');
});
//主界面向右滑动,若菜单未显示,则显示菜单;否则不做任何操作
......@@ -124,17 +139,15 @@
//侧滑菜单触发关闭菜单命令
window.addEventListener("menu:close", closeMenu);
window.addEventListener("menu:open", openMenu);
//重写mui.menu方法,Android版本menu按键按下可自动打开、关闭侧滑菜单;
mui.menu = function() {
if (showMenu) {
closeMenu();
} else {
openMenu();
if (showMenu) {
closeMenu();
} else {
openMenu();
}
}
}
//处理右上角关于图标的点击事件;
//处理右上角关于图标的点击事件;
var subWebview = null,
template = null;
document.getElementById('info').addEventListener('tap', function() {
......@@ -142,8 +155,8 @@
//获取共用父窗体
template = plus.webview.getWebviewById("default-main");
}
if(template){
subWebview = template.children()[0];
if (template) {
subWebview = template.children()[0];
subWebview.loadURL('examples/info.html');
//修改共用父模板的标题
mui.fire(template, 'updateHeader', {
......@@ -153,7 +166,6 @@
template.show('slide-in-right', 150);
}
});
//首页返回键处理
//处理逻辑:1秒内,连续两次按返回键,则退出应用;
var first = null;
......
此差异已折叠。
此差异已折叠。
......@@ -26,10 +26,10 @@
//plugin
$.fn.listpicker = function(options) {
return this.each(function(index, box) {
if (box.getAttribute('data-listpicker-inited')) {
return;
}
box.setAttribute('data-listpicker-inited', '1');
//避免重复初始化开始
if (box.__listpicker_inited) return;
box.__listpicker_inited = true;
//避免重复初始化结束
//
var boxInner = $('.mui-listpicker-inner', box)[0];
if ($.os.ios) {
......@@ -65,9 +65,9 @@
boxInner.scrollTop-=remainder;
}*/
var fiexd = parseInt((boxInner.scrollTop / itemHeight).toFixed(0));
box.setSelectedIndex(fiexd);
setTimeout(function() {
disabledScrollEnd = false;
box.setSelectedIndex(fiexd);
$.trigger(box, 'change', {
index: box.getSelectedIndex(),
value: box.getSelectedValue(),
......@@ -76,7 +76,8 @@
element: box.getSelectedElement()
});
handleHighlight(event);
}, 200);
disabledScrollEnd = false;
}, 0);
};
var handleHighlight = function(event) {
var fiexd = parseInt((boxInner.scrollTop / itemHeight).toFixed(0));
......@@ -109,17 +110,36 @@
*/
};
var isTouchDown = false;
var delayExecScrollEnd = false;
var isScrolling = false;
boxInner.addEventListener('scroll', function(event) {
if (disabledScrollEnd) return;
isScrolling = true;
if (boxInner.scrollTimer) {
clearTimeout(boxInner.scrollTimer);
}
handleHighlight(event);
isTouchDown = true;
boxInner.scrollTimer = setTimeout(function() {
scrollEnd(event);
}, 80);
isScrolling = false;
if (!isTouchDown || !mui.os.ios) {
scrollEnd(event);
}
}, 100);
}, false);
//在 ios 上手指不弹起时,防止定位抖动开始
if (mui.os.ios) {
boxInner.addEventListener('touchstart', function(event) {
isTouchDown = true;
}, false);
boxInner.addEventListener('touchend', function(event) {
isTouchDown = false;
if (!isScrolling) {
setTimeout(function() {
scrollEnd(event);
}, 0);
}
}, false);
}
//在 ios 上手指不弹起时,防止定位抖动结束
$(boxInner).on('tap', 'li', function(event) {
var tapItem = this;
var items = [].slice.call($('li', ul));
......@@ -137,7 +157,9 @@
var aniScrollTop = function(y1, y2, dur, callback) {
var stepNum = dur / 13;
var stepSize = (y2 - y1) / stepNum;
_aniScrollTop(y1, y2, 0, stepNum, stepSize, callback);
setTimeout(function() {
_aniScrollTop(y1, y2, 0, stepNum, stepSize, callback);
}, 13);
};
var _aniScrollTop = function(y1, y2, stepIndex, stepNum, stepSize, callback) {
var val = stepIndex * stepSize;
......
......@@ -19,6 +19,26 @@
var times = 4;
function getElementLeft(element) {    
var actualLeft = element.offsetLeft;    
var current = element.offsetParent;    
while (current !== null) {      
actualLeft += current.offsetLeft;      
current = current.offsetParent;    
}    
return actualLeft;  
}  
function getElementTop(element) {    
var actualTop = element.offsetTop;    
var current = element.offsetParent;    
while (current !== null) {      
actualTop += current.offsetTop;      
current = current.offsetParent;    
}    
return actualTop;  
}
//定义 Locker 类
var Locker = $.Locker = $.Class.extend({
R: 26,
......@@ -36,6 +56,11 @@
throw "构造 Locker 时缺少容器元素";
}
self.holder = holder;
//避免重复初始化开始
if (self.holder.__locker_inited) return;
self.holder.__locker_inited = true;
//避免重复初始化结束
//
self.options = options || {};
self.options.callback = self.options.callback || self.options.done || $.noop;
self.holder.innerHTML = '<canvas></canvas>';
......@@ -52,8 +77,8 @@
//
if (self.options.width) self.holder.style.width = self.options.width + 'px';
if (self.options.height) self.holder.style.height = self.options.height + 'px';
self.CW = self.holder.offsetWidth || self.CW;
self.CH = self.holder.offsetHeight || self.CH;
self.CW = self.options.width || self.holder.offsetWidth || self.CW;
self.CH = self.options.height || self.holder.offsetHeight || self.CH;
//处理 “宽、高” 等数值, 全部扩大 times 倍
self.R *= times;
self.CW *= times;
......@@ -69,7 +94,11 @@
var Y = (self.CH - 2 * self.OffsetY - self.R * 2 * 3) / 2;
self.pointLocationArr = self.caculateNinePointLotion(X, Y);
self.initEvent(canvas, cxt, self.holder);
//console.log(X);
self.draw(cxt, self.pointLocationArr, [], null);
setTimeout(function() {
self.draw(cxt, self.pointLocationArr, [], null);
}, 0);
},
/**
......@@ -161,8 +190,8 @@
//start
self._startHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
self.isPointSelect(e.point, linePoint);
isDown = true;
};
......@@ -172,8 +201,8 @@
if (!isDown) return;
e.preventDefault();
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
var touches = e.point;
self.isPointSelect(touches, linePoint);
cxt.clearRect(0, 0, self.CW, self.CH);
......@@ -186,8 +215,8 @@
//end
self._endHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(cxt, self.pointLocationArr, linePoint, null);
//事件数据
......@@ -265,10 +294,11 @@
};
//自动处理 class='mui-locker' 的 dom
try {
$('.' + lockerClassName).locker();
} catch (ex) {}
$.ready(function() {
setTimeout(function() {
$('.' + lockerClassName).locker();
}, 350);
$('.' + lockerClassName).locker();
});
}(mui, document));
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
......@@ -9,7 +9,9 @@
var handle = function(event, target) {
if (target.className && ~target.className.indexOf(CLASS_ACTION)) {
event.preventDefault();
if (target.classList.contains($.className('action-back'))) {
event.preventDefault();
}
return target;
}
return false;
......
此差异已折叠。
......@@ -11,7 +11,7 @@
index: 5,
handle: function() {
//popover
if ($.targets._popover) {
if ($.targets._popover && $.targets._popover.classList.contains($.className('active'))) {
$($.targets._popover).popover('hide');
return true;
}
......@@ -44,18 +44,18 @@
if (e.canBack) { //webview history back
window.history.back();
} else { //webview close or hide
var opener = wobj.opener();
if (opener) {
//fixed by fxy 此处不应该用opener判断,因为用户有可能自己close掉当前窗口的opener。这样的话。opener就为空了,导致不能执行close
if (wobj.id === plus.runtime.appid) { //首页
//首页不存在opener的情况下,后退实际上应该是退出应用;
//这个交给项目具体实现,框架暂不处理;
//plus.runtime.quit();
} else { //其他页面,
if (wobj.preload) {
wobj.hide("auto");
} else {
//关闭页面时,需要将其打开的所有子页面全部关闭;
$.closeAll(wobj);
}
} else {
//首页不存在opener的情况下,后退实际上应该是退出应用;
//这个交给项目具体实现,框架暂不处理;
//plus.runtime.quit();
}
}
});
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
......@@ -21,7 +21,7 @@
}
}
var target = e.target;
if (target.tagName && target.tagName === 'INPUT' && target.type === 'text') {
if (target.tagName && target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')) {
if (target.disabled || target.readOnly) {
return;
}
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
......@@ -452,6 +452,7 @@
radioOrCheckboxClick();
}
});
var preventDefaultException = /^(INPUT|TEXTAREA|BUTTON|SELECT)$/;
window.addEventListener('tap', function(event) {
if (!cell) {
return;
......@@ -479,7 +480,10 @@
return;
}
if (classList.contains($.className('collapse')) && !cell.parentNode.classList.contains($.className('unfold'))) {
event.detail.gesture.preventDefault();
if (!preventDefaultException.test(event.target.tagName)) {
event.detail.gesture.preventDefault();
}
if (!classList.contains(CLASS_ACTIVE)) { //展开时,需要收缩其他同类
var collapse = cell.parentNode.querySelector($.classSelector('.collapse.active'));
if (collapse) {
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册