Skip to content

M
mui
Commit f118b58e authored by hbcui1984's avatar hbcui1984
Browse files
Options

编译至mui v1.8.0

parent ac460122
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 11104 additions and 6469 deletions
dist/css/mui.css
View file @ f118b58e
This diff is collapsed.
dist/css/mui.min.css
View file @ f118b58e
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ f118b58e
This diff is collapsed.
dist/js/mui.min.js
View file @ f118b58e
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/mui.css
View file @ f118b58e
This diff is collapsed.
examples/hello-mui/css/mui.dtpicker.css 0 → 100644
View file @ f118b58e
.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
examples/hello-mui/css/mui.min.css
View file @ f118b58e
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/mui.poppicker.css 0 → 100644
View file @ f118b58e
.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
examples/hello-mui/examples/dialog.html
View file @ f118b58e
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -10,18 +11,18 @@ ...@@ -10,18 +11,18 @@
<!--标准mui.css--> <!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css--> <!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/> <link rel="stylesheet" type="text/css" href="../css/app.css" />
<style> <style>
.mui-btn{ .mui-btn {
display: block; display: block;
width: 120px; width: 120px;
margin: 10px auto; margin: 10px auto;
} }
#info{ #info {
padding: 20px 10px ; padding: 20px 10px;
} }
</style> </style>
</head> </head>
<body> <body>
...@@ -38,72 +39,80 @@ ...@@ -38,72 +39,80 @@
<button id='pickDateBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">日期选择框</button> <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> <button id='pickTimeBtn' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">时间选择框</button>
<div id="info"> <div id="info">
</div> </div>
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
//mui初始化 //mui初始化
mui.init({ mui.init({
swipeBack:true //启用右滑关闭功能 swipeBack: true //启用右滑关闭功能
}); });
var info = document.getElementById("info"); var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap',function(){ document.getElementById("alertBtn").addEventListener('tap', function() {
mui.alert('欢迎使用Hello MUI','Hello MUI',function(){ mui.alert('欢迎使用Hello MUI', 'Hello MUI', function() {
info.innerText = '你刚关闭了警告框'; info.innerText = '你刚关闭了警告框';
}); });
}); });
document.getElementById("confirmBtn").addEventListener('tap', function() {
document.getElementById("confirmBtn").addEventListener('tap',function(){ var btnArray = ['是', '否'];
var btnArray = ['是','否']; mui.confirm('MUI是个好框架，确认？', 'Hello MUI', btnArray, function(e) {
mui.confirm('MUI是个好框架，确认？','Hello MUI',btnArray,function(e){ if (e.index == 0) {
if(e.index==0){ info.innerText = '你刚确认MUI是个好框架';
info.innerText = '你刚确认MUI是个好框架'; } else {
}else{ info.innerText = 'MUI没有得到你的认可，继续加油'
info.innerText = 'MUI没有得到你的认可，继续加油' }
} })
}) });
}); document.getElementById("promptBtn").addEventListener('tap', function(e) {
e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
//TODO iOS 8.x平台存在bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了，故临时使用click代替tap； var btnArray = ['确定', '取消'];
document.getElementById("promptBtn").addEventListener('click',function(){ mui.prompt('请输入你对MUI的评语：', '性能好', 'Hello MUI', btnArray, function(e) {
var btnArray = ['确定','取消']; if (e.index == 0) {
mui.prompt('请输入你对MUI的评语：','性能好','Hello MUI',btnArray,function(e){ info.innerText = '谢谢你的评语：' + e.value;
if(e.index==0){ } else {
info.innerText = '谢谢你的评语：'+e.value; info.innerText = '你点了取消按钮';
}else{ }
info.innerText = '你点了取消按钮'; })
} });
}) document.getElementById("toastBtn").addEventListener('tap', function() {
}); mui.toast('欢迎体验Hello MUI');
document.getElementById("toastBtn").addEventListener('tap',function(){ });
mui.toast('欢迎体验Hello MUI'); document.getElementById("pickDateBtn").addEventListener('tap', function() {
}); var dDate = new Date();
document.getElementById("pickDateBtn").addEventListener('tap',function () { dDate.setFullYear(2014, 7, 16);
var dDate=new Date(); var minDate = new Date();
dDate.setFullYear(2014,7,16); minDate.setFullYear(2010, 0, 1);
var minDate=new Date(); var maxDate = new Date();
minDate.setFullYear(2010,0,1); maxDate.setFullYear(2016, 11, 31);
var maxDate=new Date(); plus.nativeUI.pickDate(function(e) {
maxDate.setFullYear(2016,11,31); var d = e.date;
plus.nativeUI.pickDate( function(e) { info.innerText = '您选择的日期是:' + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
var d=e.date; }, function(e) {
info.innerText = '您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate();
},function(e){
info.innerText = "您没有选择日期"; info.innerText = "您没有选择日期";
},{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate}); }, {
title: "请选择日期",
date: dDate,
minDate: minDate,
maxDate: maxDate
});
}) })
document.getElementById("pickTimeBtn").addEventListener('tap',function () { document.getElementById("pickTimeBtn").addEventListener('tap', function() {
var dTime=new Date(); var dTime = new Date();
dTime.setHours(6,0); dTime.setHours(6, 0);
plus.nativeUI.pickTime(function(e){ plus.nativeUI.pickTime(function(e) {
var d=e.date; var d = e.date;
info.innerText = "您选择的时间是："+d.getHours()+":"+d.getMinutes(); info.innerText = "您选择的时间是：" + d.getHours() + ":" + d.getMinutes();
},function (e){ }, function(e) {
info.innerText = "您没有选择时间" info.innerText = "您没有选择时间"
},{title:"请选择时间",is24Hour:true,time:dTime}); }, {
title: "请选择时间",
is24Hour: true,
time: dTime
});
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/dtpicker.html 0 → 100644
View file @ f118b58e
<!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
examples/hello-mui/examples/imageviewer-new.html 0 → 100644
View file @ f118b58e
<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
examples/hello-mui/examples/info.html
View file @ f118b58e
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</p> </p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p> <p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4> <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> <h4>License</h4>
<p> <p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>; mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
examples/hello-mui/examples/listpicker.html
View file @ f118b58e
This diff is collapsed.
examples/hello-mui/examples/poppicker.html 0 → 100644
View file @ f118b58e
<!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
examples/hello-mui/examples/pullrefresh_with_tab.html 0 → 100644
View file @ f118b58e
This diff is collapsed.
examples/hello-mui/index.html
View file @ f118b58e
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
mui.init({ mui.init({
swipeBack: false, swipeBack: false,
statusBarBackground: '#f7f7f7', statusBarBackground: '#f7f7f7',
gestureConfig:{ gestureConfig: {
doubletap:true doubletap: true
}, },
subpages: [{ subpages: [{
id: 'list', id: 'list',
...@@ -39,9 +39,7 @@ ...@@ -39,9 +39,7 @@
} }
}] }]
}); });
mui.plusReady(function() { mui.plusReady(function() {
if (mui.os.android) { if (mui.os.android) {
plus.screen.lockOrientation("portrait-primary"); plus.screen.lockOrientation("portrait-primary");
} }
...@@ -63,14 +61,20 @@ ...@@ -63,14 +61,20 @@
}); });
}, 200); }, 200);
}); });
var isInTransition = false;
/** /**
* 显示侧滑菜单 * 显示侧滑菜单
*/ */
function openMenu() { function openMenu() {
if (isInTransition) {
return;
}
if (!showMenu) { if (!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来； //侧滑菜单处于隐藏状态，则立即显示出来；
isInTransition = true;
menu.setStyle({
mask: 'rgba(0,0,0,0)'
}); //menu设置透明遮罩防止点击
menu.show('none', 0, function() { menu.show('none', 0, function() {
//主窗体开始侧滑并显示遮罩 //主窗体开始侧滑并显示遮罩
main.setStyle({ main.setStyle({
...@@ -80,17 +84,27 @@ ...@@ -80,17 +84,27 @@
duration: 150 duration: 150
} }
}); });
mui.later(function() {
isInTransition = false;
menu.setStyle({
mask: "none"
}); //移除menu的mask
}, 160);
showMenu = true; showMenu = true;
}); });
} }
} };
/** /**
* 关闭菜单 * 关闭菜单
*/ */
function closeMenu() { function closeMenu() {
if (isInTransition) {
return;
}
if (showMenu) { if (showMenu) {
//关闭遮罩； //关闭遮罩；
//主窗体开始侧滑； //主窗体开始侧滑；
isInTransition = true;
main.setStyle({ main.setStyle({
mask: 'none', mask: 'none',
left: '0', left: '0',
...@@ -100,12 +114,13 @@ ...@@ -100,12 +114,13 @@
}); });
showMenu = false; showMenu = false;
//等动画结束后，隐藏菜单webview，节省资源； //等动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() { mui.later(function() {
isInTransition = false;
menu.hide(); menu.hide();
}, 300); }, 300);
} }
} };
//点击左上角侧滑图标，打开侧滑菜单； //点击左上角侧滑图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) { document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {
if (showMenu) { if (showMenu) {
closeMenu(); closeMenu();
...@@ -113,8 +128,8 @@ ...@@ -113,8 +128,8 @@
openMenu(); openMenu();
} }
}); });
//敲击顶部导航，内容区回到顶部 //敲击顶部导航，内容区回到顶部
document.querySelector('header').addEventListener('doubletap',function () { document.querySelector('header').addEventListener('doubletap', function() {
main.children()[0].evalJS('mui.scrollTo(0, 100)'); main.children()[0].evalJS('mui.scrollTo(0, 100)');
}); });
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作 //主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
...@@ -124,17 +139,15 @@ ...@@ -124,17 +139,15 @@
//侧滑菜单触发关闭菜单命令 //侧滑菜单触发关闭菜单命令
window.addEventListener("menu:close", closeMenu); window.addEventListener("menu:close", closeMenu);
window.addEventListener("menu:open", openMenu); window.addEventListener("menu:open", openMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单； //重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function() { mui.menu = function() {
if (showMenu) { if (showMenu) {
closeMenu(); closeMenu();
} else { } else {
openMenu(); openMenu();
}
} }
} //处理右上角关于图标的点击事件；
//处理右上角关于图标的点击事件；
var subWebview = null, var subWebview = null,
template = null; template = null;
document.getElementById('info').addEventListener('tap', function() { document.getElementById('info').addEventListener('tap', function() {
...@@ -142,8 +155,8 @@ ...@@ -142,8 +155,8 @@
//获取共用父窗体 //获取共用父窗体
template = plus.webview.getWebviewById("default-main"); template = plus.webview.getWebviewById("default-main");
} }
if(template){ if (template) {
subWebview = template.children()[0]; subWebview = template.children()[0];
subWebview.loadURL('examples/info.html'); subWebview.loadURL('examples/info.html');
//修改共用父模板的标题 //修改共用父模板的标题
mui.fire(template, 'updateHeader', { mui.fire(template, 'updateHeader', {
...@@ -153,7 +166,6 @@ ...@@ -153,7 +166,6 @@
template.show('slide-in-right', 150); template.show('slide-in-right', 150);
} }
}); });
//首页返回键处理 //首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用； //处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null; var first = null;
......
examples/hello-mui/js/mui.dtpicker.js 0 → 100644
View file @ f118b58e
/**
* 日期时间插件
* varstion 1.0.5
* by Houfeng
* Houfeng@DCloud.io
*/
(function($) {
var domBuffer = '<div class="mui-dtpicker" data-type="datetime">\
<div class="mui-dtpicker-header">\
<button data-id="btn-cancel" class="mui-btn">取消</button>\
<button data-id="btn-ok" class="mui-btn mui-btn-blue">确定</button>\
</div>\
<div class="mui-dtpicker-title"><h5 data-id="title-y">年</h5><h5 data-id="title-m">月</h5><h5 data-id="title-d">日</h5><h5 data-id="title-h">时</h5><h5 data-id="title-i">分</h5></div>\
<div class="mui-dtpicker-body">\
<div data-id="picker-y" class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
</ul>\
</div>\
</div>\
<div data-id="picker-m" class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
</ul>\
</div>\
</div>\
<div data-id="picker-d" class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
</ul>\
</div>\
</div>\
<div data-id="picker-h" class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
</ul>\
</div>\
</div>\
<div data-id="picker-i" class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
</ul>\
</div>\
</div>\
</div>\
</div>';
//plugin
var DtPicker = $.DtPicker = $.Class.extend({
init: function(options) {
var self = this;
var _picker = $.dom(domBuffer)[0];
document.body.appendChild(_picker);
$('[data-id*="picker"]', _picker).listpicker();
var ui = self.ui = {
picker: _picker,
mask: $.createMask(),
ok: $('[data-id="btn-ok"]', _picker)[0],
cancel: $('[data-id="btn-cancel"]', _picker)[0],
y: $('[data-id="picker-y"]', _picker)[0],
m: $('[data-id="picker-m"]', _picker)[0],
d: $('[data-id="picker-d"]', _picker)[0],
h: $('[data-id="picker-h"]', _picker)[0],
i: $('[data-id="picker-i"]', _picker)[0],
labels: $('[data-id*="title-"]', _picker),
};
ui.cancel.addEventListener('tap', function() {
self.hide();
}, false);
ui.ok.addEventListener('tap', function() {
self.hide();
self.callback(self.getSelected());
}, false);
ui.y.addEventListener('change', function() {
self._createDay();
}, false);
ui.m.addEventListener('change', function() {
self._createDay();
}, false);
ui.mask[0].addEventListener('tap', function() {
self.hide();
}, false);
self._create(options);
},
getSelected: function() {
var self = this;
var ui = self.ui;
var type = self.options.type;
var selected = {
type: type,
y: ui.y.getSelectedItem(),
m: ui.m.getSelectedItem(),
d: ui.d.getSelectedItem(),
h: ui.h.getSelectedItem(),
i: ui.i.getSelectedItem(),
toString: function() {
return this.value;
}
};
switch (type) {
case 'datetime':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value + ' ' + selected.h.value + ':' + selected.i.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text + ' ' + selected.h.text + ':' + selected.i.text;
break;
case 'date':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text;
break;
case 'time':
selected.value = selected.h.value + ':' + selected.i.value;
selected.text = selected.h.text + ':' + selected.i.text;
break;
case 'month':
selected.value = selected.y.value + '-' + selected.m.value;
selected.text = selected.y.text + '-' + selected.m.text;
break;
case 'hour':
selected.value = selected.y.value + '-' + selected.m.value + '-' + selected.d.value + ' ' + selected.h.value;
selected.text = selected.y.text + '-' + selected.m.text + '-' + selected.d.text + ' ' + selected.h.text;
break;
}
return selected;
},
isLeapYear: function(year) {
return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
},
_inArray: function(array, item) {
for (var index in array) {
var _item = array[index];
if (_item === item) return true;
}
return false;
},
getDayNum: function(year, month) {
var self = this;
if (self._inArray([1, 3, 5, 7, 8, 10, 12], month)) {
return 31;
} else if (self._inArray([4, 6, 9, 11], month)) {
return 30;
} else if (self.isLeapYear(year)) {
return 29;
} else {
return 28;
}
},
_fill: function(num) {
num = num.toString();
if (num.length < 2) {
num = 0 + num;
}
return num;
},
_createYear: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成年列表
var yArray = [];
if (options.customData.y) {
yArray = options.customData.y;
} else {
var yBegin = options.beginYear;
var yEnd = options.endYear;
for (var y = yBegin; y <= yEnd; y++) {
yArray.push({
text: y + '',
value: y
});
}
}
ui.y.setItems(yArray);
//ui.y.setSelectedValue(current);
},
_createMonth: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成月列表
var mArray = [];
if (options.customData.m) {
mArray = options.customData.m;
} else {
for (var m = 1; m <= 12; m++) {
var val = self._fill(m);
mArray.push({
text: val,
value: val
});
}
}
ui.m.setItems(mArray);
//ui.m.setSelectedValue(current);
},
_createDay: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成日列表
var dArray = [];
if (options.customData.d) {
dArray = options.customData.d;
} else {
var maxDay = self.getDayNum(parseInt(ui.y.getSelectedValue()), parseInt(ui.m.getSelectedValue()));
for (var d = 1; d <= maxDay; d++) {
var val = self._fill(d);
dArray.push({
text: val,
value: val
});
}
}
ui.d.setItems(dArray);
current = current || ui.d.getSelectedValue();
//ui.d.setSelectedValue(current);
},
_createHours: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成时列表
var hArray = [];
if (options.customData.h) {
hArray = options.customData.h;
} else {
for (var h = 0; h <= 23; h++) {
var val = self._fill(h);
hArray.push({
text: val,
value: val
});
}
}
ui.h.setItems(hArray);
//ui.h.setSelectedValue(current);
},
_createMinutes: function(current) {
var self = this;
var options = self.options;
var ui = self.ui;
//生成分列表
var iArray = [];
if (options.customData.i) {
iArray = options.customData.i;
} else {
for (var i = 0; i <= 59; i++) {
var val = self._fill(i);
iArray.push({
text: val,
value: val
});
}
}
ui.i.setItems(iArray);
//ui.i.setSelectedValue(current);
},
_setLabels: function() {
var self = this;
var options = self.options;
var ui = self.ui;
ui.labels.each(function(i, label) {
label.innerText = options.labels[i];
});
},
_setButtons: function() {
var self = this;
var options = self.options;
var ui = self.ui;
ui.cancel.innerText = options.buttons[0];
ui.ok.innerText = options.buttons[1];
},
_getInitValue: function() {
var self = this;
var options = self.options;
var rs = {};
if (options.value) {
var parts = options.value.replace(":", "-").replace(" ", "-").split("-");
rs.y = parts[0];
rs.m = parts[1];
rs.d = parts[2];
rs.h = parts[3];
rs.i = parts[4];
} else {
var now = new Date();
rs.y = now.getFullYear();
rs.m = now.getMonth() + 1;
rs.d = now.getDate();
rs.h = now.getHours();
rs.i = now.getMinutes();
}
return rs;
},
_create: function(options) {
var self = this;
options = options || {};
options.labels = options.labels || ['年', '月', '日', '时', '分'];
options.buttons = options.buttons || ['取消', '确定'];
options.type = options.type || 'datetime';
options.customData = options.customData || {};
self.options = options;
var now = new Date();
options.beginYear = options.beginYear || (now.getFullYear() - 5);
options.endYear = options.endYear || (now.getFullYear() + 5);
var initValue = self._getInitValue();
var ui = self.ui;
//设定label
self._setLabels();
self._setButtons();
//设定类型
ui.picker.setAttribute('data-type', options.type);
//生成
self._createYear();
self._createMonth();
self._createDay();
self._createHours();
self._createMinutes();
setTimeout(function() {
//设定默认值
ui.y.setSelectedValue(initValue.y);
ui.m.setSelectedValue(initValue.m);
ui.d.setSelectedValue(initValue.d);
ui.h.setSelectedValue(initValue.h);
ui.i.setSelectedValue(initValue.i);
}, 160);
},
//显示
show: function(callback) {
var self = this;
var ui = self.ui;
self.callback = callback || $.noop;
ui.mask.show();
ui.picker.style.webkitTransform = 'translateY(0px)';
},
hide: function() {
var self = this;
var ui = self.ui;
ui.picker.style.webkitTransform = 'translateY(300px)';
ui.mask.close()
}
});
})(mui);
\ No newline at end of file
examples/hello-mui/js/mui.js
View file @ f118b58e
This diff is collapsed.
examples/hello-mui/js/mui.listpicker.js
View file @ f118b58e
...@@ -26,10 +26,10 @@ ...@@ -26,10 +26,10 @@
//plugin //plugin
$.fn.listpicker = function(options) { $.fn.listpicker = function(options) {
return this.each(function(index, box) { return this.each(function(index, box) {
if (box.getAttribute('data-listpicker-inited')) { //避免重复初始化开始
return; if (box.__listpicker_inited) return;
} box.__listpicker_inited = true;
box.setAttribute('data-listpicker-inited', '1'); //避免重复初始化结束
// //
var boxInner = $('.mui-listpicker-inner', box)[0]; var boxInner = $('.mui-listpicker-inner', box)[0];
if ($.os.ios) { if ($.os.ios) {
...@@ -65,9 +65,9 @@ ...@@ -65,9 +65,9 @@
boxInner.scrollTop-=remainder; boxInner.scrollTop-=remainder;
}*/ }*/
var fiexd = parseInt((boxInner.scrollTop / itemHeight).toFixed(0)); var fiexd = parseInt((boxInner.scrollTop / itemHeight).toFixed(0));
box.setSelectedIndex(fiexd);
setTimeout(function() { setTimeout(function() {
disabledScrollEnd = false; box.setSelectedIndex(fiexd);
$.trigger(box, 'change', { $.trigger(box, 'change', {
index: box.getSelectedIndex(), index: box.getSelectedIndex(),
value: box.getSelectedValue(), value: box.getSelectedValue(),
...@@ -76,7 +76,8 @@ ...@@ -76,7 +76,8 @@
element: box.getSelectedElement() element: box.getSelectedElement()
}); });
handleHighlight(event); handleHighlight(event);
}, 200); disabledScrollEnd = false;
}, 0);
}; };
var handleHighlight = function(event) { var handleHighlight = function(event) {
var fiexd = parseInt((boxInner.scrollTop / itemHeight).toFixed(0)); var fiexd = parseInt((boxInner.scrollTop / itemHeight).toFixed(0));
...@@ -109,17 +110,36 @@ ...@@ -109,17 +110,36 @@
*/ */
}; };
var isTouchDown = false; var isTouchDown = false;
var delayExecScrollEnd = false; var isScrolling = false;
boxInner.addEventListener('scroll', function(event) { boxInner.addEventListener('scroll', function(event) {
if (disabledScrollEnd) return;
isScrolling = true;
if (boxInner.scrollTimer) { if (boxInner.scrollTimer) {
clearTimeout(boxInner.scrollTimer); clearTimeout(boxInner.scrollTimer);
} }
handleHighlight(event); handleHighlight(event);
isTouchDown = true;
boxInner.scrollTimer = setTimeout(function() { boxInner.scrollTimer = setTimeout(function() {
scrollEnd(event); isScrolling = false;
}, 80); if (!isTouchDown || !mui.os.ios) {
scrollEnd(event);
}
}, 100);
}, false); }, 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) { $(boxInner).on('tap', 'li', function(event) {
var tapItem = this; var tapItem = this;
var items = [].slice.call($('li', ul)); var items = [].slice.call($('li', ul));
...@@ -137,7 +157,9 @@ ...@@ -137,7 +157,9 @@
var aniScrollTop = function(y1, y2, dur, callback) { var aniScrollTop = function(y1, y2, dur, callback) {
var stepNum = dur / 13; var stepNum = dur / 13;
var stepSize = (y2 - y1) / stepNum; 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 _aniScrollTop = function(y1, y2, stepIndex, stepNum, stepSize, callback) {
var val = stepIndex * stepSize; var val = stepIndex * stepSize;
......
examples/hello-mui/js/mui.locker.js
View file @ f118b58e
...@@ -19,6 +19,26 @@ ...@@ -19,6 +19,26 @@
var times = 4; 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 类 //定义 Locker 类
var Locker = $.Locker = $.Class.extend({ var Locker = $.Locker = $.Class.extend({
R: 26, R: 26,
...@@ -36,6 +56,11 @@ ...@@ -36,6 +56,11 @@
throw "构造 Locker 时缺少容器元素"; throw "构造 Locker 时缺少容器元素";
} }
self.holder = holder; self.holder = holder;
//避免重复初始化开始
if (self.holder.__locker_inited) return;
self.holder.__locker_inited = true;
//避免重复初始化结束
//
self.options = options || {}; self.options = options || {};
self.options.callback = self.options.callback || self.options.done || $.noop; self.options.callback = self.options.callback || self.options.done || $.noop;
self.holder.innerHTML = '<canvas></canvas>'; self.holder.innerHTML = '<canvas></canvas>';
...@@ -52,8 +77,8 @@ ...@@ -52,8 +77,8 @@
// //
if (self.options.width) self.holder.style.width = self.options.width + 'px'; if (self.options.width) self.holder.style.width = self.options.width + 'px';
if (self.options.height) self.holder.style.height = self.options.height + 'px'; if (self.options.height) self.holder.style.height = self.options.height + 'px';
self.CW = self.holder.offsetWidth || self.CW; self.CW = self.options.width || self.holder.offsetWidth || self.CW;
self.CH = self.holder.offsetHeight || self.CH; self.CH = self.options.height || self.holder.offsetHeight || self.CH;
//处理 “宽、高” 等数值, 全部扩大 times 倍 //处理 “宽、高” 等数值, 全部扩大 times 倍
self.R *= times; self.R *= times;
self.CW *= times; self.CW *= times;
...@@ -69,7 +94,11 @@ ...@@ -69,7 +94,11 @@
var Y = (self.CH - 2 * self.OffsetY - self.R * 2 * 3) / 2; var Y = (self.CH - 2 * self.OffsetY - self.R * 2 * 3) / 2;
self.pointLocationArr = self.caculateNinePointLotion(X, Y); self.pointLocationArr = self.caculateNinePointLotion(X, Y);
self.initEvent(canvas, cxt, self.holder); self.initEvent(canvas, cxt, self.holder);
//console.log(X);
self.draw(cxt, self.pointLocationArr, [], null); self.draw(cxt, self.pointLocationArr, [], null);
setTimeout(function() {
self.draw(cxt, self.pointLocationArr, [], null);
}, 0);
}, },
/** /**
...@@ -161,8 +190,8 @@ ...@@ -161,8 +190,8 @@
//start //start
self._startHandler = function(e) { self._startHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event; e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times; e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times; e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
self.isPointSelect(e.point, linePoint); self.isPointSelect(e.point, linePoint);
isDown = true; isDown = true;
}; };
...@@ -172,8 +201,8 @@ ...@@ -172,8 +201,8 @@
if (!isDown) return; if (!isDown) return;
e.preventDefault(); e.preventDefault();
e.point = event.changedTouches ? event.changedTouches[0] : event; e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times; e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times; e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
var touches = e.point; var touches = e.point;
self.isPointSelect(touches, linePoint); self.isPointSelect(touches, linePoint);
cxt.clearRect(0, 0, self.CW, self.CH); cxt.clearRect(0, 0, self.CW, self.CH);
...@@ -186,8 +215,8 @@ ...@@ -186,8 +215,8 @@
//end //end
self._endHandler = function(e) { self._endHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event; e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - holder.offsetLeft) * times; e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - holder.offsetTop) * times; e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
cxt.clearRect(0, 0, self.CW, self.CH); cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(cxt, self.pointLocationArr, linePoint, null); self.draw(cxt, self.pointLocationArr, linePoint, null);
//事件数据 //事件数据
...@@ -265,10 +294,11 @@ ...@@ -265,10 +294,11 @@
}; };
//自动处理 class='mui-locker' 的 dom //自动处理 class='mui-locker' 的 dom
try {
$('.' + lockerClassName).locker();
} catch (ex) {}
$.ready(function() { $.ready(function() {
setTimeout(function() { $('.' + lockerClassName).locker();
$('.' + lockerClassName).locker();
}, 350);
}); });
}(mui, document)); }(mui, document));
\ No newline at end of file
examples/hello-mui/js/mui.min.js
View file @ f118b58e
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.poppicker.js 0 → 100644
View file @ f118b58e
/**
* 弹出选择列表插件
* 此组件依赖 listpcker ，请在页面中先引入 mui.listpicker.css + mui.listpicker.js
* varstion 1.0.1
* by Houfeng
* Houfeng@DCloud.io
*/
(function($) {
var panelBuffer = '<div class="mui-poppicker">\
<div class="mui-poppicker-header">\
<button class="mui-btn mui-poppicker-btn-cancel">取消</button>\
<button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button>\
<div class="mui-poppicker-clear"></div>\
</div>\
<div class="mui-poppicker-body">\
</div>\
</div>';
var pickerBuffer = '<div class="mui-listpicker">\
<div class="mui-listpicker-inner">\
<ul>\
</ul>\
</div>\
</div>';
//定义弹出选择器类
var PopPicker = $.PopPicker = $.Class.extend({
//构造函数
init: function(options) {
var self = this;
self.options = options || {};
self.options.buttons = self.options.buttons || ['取消', '确定'];
self.panel = $.dom(panelBuffer)[0];
document.body.appendChild(self.panel);
self.ok = self.panel.querySelector('.mui-poppicker-btn-ok');
self.cancel = self.panel.querySelector('.mui-poppicker-btn-cancel');
self.body = self.panel.querySelector('.mui-poppicker-body');
self.mask = $.createMask();
self.cancel.innerText = self.options.buttons[0];
self.ok.innerText = self.options.buttons[1];
self.cancel.addEventListener('tap', function(event) {
self.hide();
}, false);
self.ok.addEventListener('tap', function(event) {
self.hide();
if (self.callback) {
self.callback(self.getSelectedItems());
}
}, false);
self.mask[0].addEventListener('tap', function() {
self.hide();
}, false);
self._createListPicker();
},
_createListPicker: function() {
var self = this;
var layer = self.options.layer || 1;
var width = (100 / layer) + '%';
self.pickers = [];
for (var i = 1; i <= layer; i++) {
var picker = $.dom(pickerBuffer)[0];
picker.style.width = width;
self.body.appendChild(picker);
$(picker).listpicker();
self.pickers.push(picker);
picker.addEventListener('change', function(event) {
var nextPicker = this.nextSibling;
if (nextPicker && nextPicker.__listpicker_inited) {
var eventData = event.detail || {};
var preItem = eventData.item || {};
nextPicker.setItems(preItem.children);
}
}, false);
}
},
//填充数据
setData: function(data) {
var self = this;
data = data || [];
self.pickers[0].setItems(data);
},
//获取选中的项（数组）
getSelectedItems: function() {
var self = this;
var items = [];
for (var i in self.pickers) {
var picker = self.pickers[i];
items.push(picker.getSelectedItem());
}
return items;
},
//显示
show: function(callback) {
var self = this;
self.callback = callback;
self.mask.show();
self.panel.classList.add($.className('active'));
},
//隐藏
hide: function() {
var self = this;
self.panel.classList.remove($.className('active'));
self.mask.close();
}
});
})(mui);
\ No newline at end of file
examples/hello-mui/js/mui.pullToRefresh.js 0 → 100644
View file @ f118b58e
This diff is collapsed.
examples/hello-mui/js/mui.pullToRefresh.material.js 0 → 100644
View file @ f118b58e
This diff is collapsed.
examples/hello-mui/list.html
View file @ f118b58e
...@@ -249,10 +249,20 @@ ...@@ -249,10 +249,20 @@
popover（弹出菜单） popover（弹出菜单）
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" open-type="common" href="examples/pullrefresh_main.html"> <a href="#" class="mui-navigate-right">pull to refresh（下拉刷新和上拉加载更多）</a>
pull to refresh（下拉刷新和上拉加载更多） <ul class="mui-table-view mui-table-view-chevron">
</a> <li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/pullrefresh_main.html">
默认实现
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/pullrefresh_with_tab.html">
选项卡切换+下拉刷新
</a>
</li>
</ul>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/radio.html"> <a class="mui-navigate-right" href="examples/radio.html">
...@@ -321,13 +331,23 @@ ...@@ -321,13 +331,23 @@
</li> </li>
<li class="mui-table-view-divider">模板</li> <li class="mui-table-view-divider">模板</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/dtpicker.html">
dtpicker（日期时间选择器）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/imageviewer-new.html">
image viewer（图片预览）
</a>
</li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/lazyload-image.html"> <a class="mui-navigate-right" href="examples/lazyload-image.html">
lazyload（懒加载） lazyload（懒加载）
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/listpicker.html"> <a class="mui-navigate-right" href="examples/poppicker.html">
list picker（选择列表） list picker（选择列表）
</a> </a>
</li> </li>
......
js/actions.js
View file @ f118b58e
...@@ -9,7 +9,9 @@ ...@@ -9,7 +9,9 @@
var handle = function(event, target) { var handle = function(event, target) {
if (target.className && ~target.className.indexOf(CLASS_ACTION)) { if (target.className && ~target.className.indexOf(CLASS_ACTION)) {
event.preventDefault(); if (target.classList.contains($.className('action-back'))) {
event.preventDefault();
}
return target; return target;
} }
return false; return false;
......
js/input.plugin.js
View file @ f118b58e
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
this.sliderActionSelector = SELECTOR_TOOLTIP; this.sliderActionSelector = SELECTOR_TOOLTIP;
} else { //clear,speech,search } else { //clear,speech,search
if (~this.options.actions.indexOf('clear')) { if (~this.options.actions.indexOf('clear')) {
this.clearActionClass = CLASS_ICON + ' ' + CLASS_ICON_CLEAR + (element.value ? '' : (' ' + CLASS_HIDDEN)); this.clearActionClass = CLASS_ICON + ' ' + CLASS_ICON_CLEAR +' '+ CLASS_HIDDEN;
this.clearActionSelector = SELECTOR_ICON_CLOSE; this.clearActionSelector = SELECTOR_ICON_CLOSE;
} }
if (~this.options.actions.indexOf('speech')) { //only for 5+ if (~this.options.actions.indexOf('speech')) { //only for 5+
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
var action = document.createElement('span'); var action = document.createElement('span');
action.className = actionClass; action.className = actionClass;
if (actionClass === this.searchActionClass) { if (actionClass === this.searchActionClass) {
action.innerHTML = '<span class="' + CLASS_ICON + ' ' + CLASS_ICON_SEARCH + '"></span>' + this.element.getAttribute('placeholder'); action.innerHTML = '<span class="' + CLASS_ICON + ' ' + CLASS_ICON_SEARCH + '"></span><span>' + this.element.getAttribute('placeholder') + '</span>';
this.element.setAttribute('placeholder', ''); this.element.setAttribute('placeholder', '');
if (this.element.value.trim()) { if (this.element.value.trim()) {
row.classList.add($.className('active')); row.classList.add($.className('active'));
...@@ -140,13 +140,16 @@ ...@@ -140,13 +140,16 @@
if (!action) { if (!action) {
return; return;
} }
$.each(['keyup', 'change', 'input', 'focus', 'blur', 'cut', 'paste'], function(index, type) { $.each(['keyup', 'change', 'input', 'focus', 'cut', 'paste'], function(index, type) {
(function(type) { (function(type) {
element.addEventListener(type, function() { element.addEventListener(type, function() {
action.classList[element.value.trim() ? 'remove' : 'add'](CLASS_HIDDEN); action.classList[element.value.trim() ? 'remove' : 'add'](CLASS_HIDDEN);
}); });
})(type); })(type);
}); });
element.addEventListener('blur', function() {
action.classList.add(CLASS_HIDDEN);
});
} }
if (this.searchActionClass) { if (this.searchActionClass) {
element.addEventListener('focus', function() { element.addEventListener('focus', function() {
...@@ -160,6 +163,14 @@ ...@@ -160,6 +163,14 @@
} }
} }
}; };
Input.prototype.setPlaceholder = function(text) {
if (this.searchActionClass) {
var placeholder = this.element.parentNode.querySelector(SELECTOR_PLACEHOLDER);
placeholder && (placeholder.getElementsByTagName('span')[1].innerText = text);
} else {
this.element.setAttribute('placeholder', text);
}
};
Input.prototype.clearActionClick = function(event) { Input.prototype.clearActionClick = function(event) {
var self = this; var self = this;
self.element.value = ''; self.element.value = '';
...@@ -196,7 +207,9 @@ ...@@ -196,7 +207,9 @@
event.preventDefault(); event.preventDefault();
}; };
$.fn.input = function(options) { $.fn.input = function(options) {
var inputApis = [];
this.each(function() { this.each(function() {
var inputApi = null;
var actions = []; var actions = [];
var row = findRow(this.parentNode); var row = findRow(this.parentNode);
if (this.type === 'range' && row.classList.contains($.className('input-range'))) { if (this.type === 'range' && row.classList.contains($.className('input-range'))) {
...@@ -216,15 +229,18 @@ ...@@ -216,15 +229,18 @@
var id = this.getAttribute('data-input-' + actions[0]); var id = this.getAttribute('data-input-' + actions[0]);
if (!id) { if (!id) {
id = ++$.uuid; id = ++$.uuid;
$.data[id] = new Input(this, { inputApi = $.data[id] = new Input(this, {
actions: actions.join(',') actions: actions.join(',')
}); });
for (var i = 0, len = actions.length; i < len; i++) { for (var i = 0, len = actions.length; i < len; i++) {
this.setAttribute('data-input-' + actions[i], id); this.setAttribute('data-input-' + actions[i], id);
} }
} else {
inputApi = $.data[id];
} }
inputApis.push(inputApi);
}); });
return inputApis.length === 1 ? inputApis[0] : inputApis;
}; };
$.ready(function() { $.ready(function() {
$($.classSelector('.input-row input')).input(); $($.classSelector('.input-row input')).input();
......
js/mui.back.5+.js
View file @ f118b58e
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
index: 5, index: 5,
handle: function() { handle: function() {
//popover //popover
if ($.targets._popover) { if ($.targets._popover && $.targets._popover.classList.contains($.className('active'))) {
$($.targets._popover).popover('hide'); $($.targets._popover).popover('hide');
return true; return true;
} }
...@@ -44,18 +44,18 @@ ...@@ -44,18 +44,18 @@
if (e.canBack) { //webview history back if (e.canBack) { //webview history back
window.history.back(); window.history.back();
} else { //webview close or hide } else { //webview close or hide
var opener = wobj.opener(); //fixed by fxy 此处不应该用opener判断，因为用户有可能自己close掉当前窗口的opener。这样的话。opener就为空了，导致不能执行close
if (opener) { if (wobj.id === plus.runtime.appid) { //首页
//首页不存在opener的情况下，后退实际上应该是退出应用；
//这个交给项目具体实现，框架暂不处理；
//plus.runtime.quit();
} else { //其他页面，
if (wobj.preload) { if (wobj.preload) {
wobj.hide("auto"); wobj.hide("auto");
} else { } else {
//关闭页面时，需要将其打开的所有子页面全部关闭； //关闭页面时，需要将其打开的所有子页面全部关闭；
$.closeAll(wobj); $.closeAll(wobj);
} }
} else {
//首页不存在opener的情况下，后退实际上应该是退出应用；
//这个交给项目具体实现，框架暂不处理；
//plus.runtime.quit();
} }
} }
}); });
......
js/mui.class.scroll.pullrefresh.js
View file @ f118b58e
...@@ -47,9 +47,9 @@ ...@@ -47,9 +47,9 @@
} }
return this._super(time); return this._super(time);
}, },
pulldownLoading: function(x, time) { pulldownLoading: function(y, time) {
x = x || 0; typeof y === 'undefined' && (y = this.options.down.height); //默认高度
this.scrollTo(x, this.options.down.height, time, this.options.bounceEasing); this.scrollTo(0, y, time, this.options.bounceEasing);
if (this.loading) { if (this.loading) {
return; return;
} }
...@@ -110,9 +110,7 @@ ...@@ -110,9 +110,7 @@
}, },
refresh: function(isReset) { refresh: function(isReset) {
if (isReset && this.finished) { if (isReset && this.finished) {
if (this.pulldown !== false) { this._initPullupRefresh();
this._initPullupRefresh();
}
this.bottomPocket.classList.remove(CLASS_HIDDEN); this.bottomPocket.classList.remove(CLASS_HIDDEN);
this._setCaption(this.options.up.contentdown); this._setCaption(this.options.up.contentdown);
this.wrapper.addEventListener('scrollbottom', this); this.wrapper.addEventListener('scrollbottom', this);
......
js/mui.class.scroll.slider.js
View file @ f118b58e
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
//拖拽期间取消定时 //拖拽期间取消定时
var slidershowTimer = this.wrapper.getAttribute('data-slidershowTimer'); var slidershowTimer = this.wrapper.getAttribute('data-slidershowTimer');
slidershowTimer && window.clearTimeout(slidershowTimer); slidershowTimer && window.clearTimeout(slidershowTimer);
e.stopPropagation(); e.stopPropagation();
} }
}, },
...@@ -306,7 +306,7 @@ ...@@ -306,7 +306,7 @@
return true; return true;
}, },
gotoItem: function(slideNumber, time) { gotoItem: function(slideNumber, time) {
this._gotoItem(slideNumber, time || this.options.bounceTime); this._gotoItem(slideNumber, typeof time === 'undefined' ? this.options.bounceTime : time);
}, },
nextItem: function() { nextItem: function() {
this._gotoItem(this.slideNumber + 1, this.options.bounceTime); this._gotoItem(this.slideNumber + 1, this.options.bounceTime);
......
js/mui.dialog.confirm.js
View file @ f118b58e
...@@ -2,25 +2,33 @@ ...@@ -2,25 +2,33 @@
/** /**
* 确认消息框 * 确认消息框
*/ */
$.confirm = function(message,title,btnArray,callback) { $.confirm = function(message, title, btnArray, callback) {
if ($.os.plus) { if ($.os.plus) {
if(typeof message === undefined){ if (typeof message === undefined) {
return; return;
}else{ } else {
if(typeof title ==='function'){ if (typeof title === 'function') {
callback = title; callback = title;
title = null; title = null;
btnArray = null; btnArray = null;
}else if(typeof btnArray ==='function'){ } else if (typeof btnArray === 'function') {
callback = btnArray; callback = btnArray;
btnArray = null; btnArray = null;
} }
plus.nativeUI.confirm(message,callback,title,btnArray); plus.nativeUI.confirm(message, callback, title, btnArray);
} }
}else{ } else {
//TODO H5版本 //H5版本，0为确认，1为取消
window.confirm(message); if (window.confirm(message)) {
callback({
index: 0
});
} else {
callback({
index: 1
});
}
} }
}; };
......
js/mui.dialog.prompt.js
View file @ f118b58e
...@@ -2,31 +2,42 @@ ...@@ -2,31 +2,42 @@
/** /**
* 输入对话框 * 输入对话框
*/ */
$.prompt = function(text,defaultText,title,btnArray,callback) { $.prompt = function(text, defaultText, title, btnArray, callback) {
if ($.os.plus) { if ($.os.plus) {
if(typeof message === undefined){ if (typeof message === undefined) {
return; return;
}else{ } else {
if(typeof defaultText ==='function'){ if (typeof defaultText === 'function') {
callback = defaultText; callback = defaultText;
defaultText = null; defaultText = null;
title = null; title = null;
btnArray = null; btnArray = null;
}else if(typeof title === 'function'){ } else if (typeof title === 'function') {
callback = title; callback = title;
title = null; title = null;
btnArray = null; btnArray = null;
}else if(typeof btnArray ==='function'){ } else if (typeof btnArray === 'function') {
callback = btnArray; callback = btnArray;
btnArray = null; btnArray = null;
} }
plus.nativeUI.prompt(text,callback,title,defaultText,btnArray); plus.nativeUI.prompt(text, callback, title, defaultText, btnArray);
} }
}else{ } else {
//TODO H5版本 //H5版本(确认index为0，取消index为1)
window.prompt(text); var result = window.prompt(text);
if (result) {
callback({
index: 0,
value: result
});
} else {
callback({
index: 1,
value: ''
});
}
} }
}; };
......
js/mui.event.js
View file @ f118b58e
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
return sourceMethod && sourceMethod.apply(event, arguments) return sourceMethod && sourceMethod.apply(event, arguments)
} }
event[predicate] = returnFalse; event[predicate] = returnFalse;
}); }, true);
return event; return event;
}; };
//简单的wrap对象_mid //简单的wrap对象_mid
...@@ -62,12 +62,13 @@ ...@@ -62,12 +62,13 @@
} }
var matches = {}; var matches = {};
$.each(callbackObjs, function(selector, callbacks) { //same selector $.each(callbackObjs, function(selector, callbacks) { //same selector
if (~(selectorAlls[selector] || (selectorAlls[selector] = $.qsa(selector, element))).indexOf(target)) { selectorAlls[selector] || (selectorAlls[selector] = $.qsa(selector, element));
if (selectorAlls[selector] && ~(selectorAlls[selector]).indexOf(target)) {
if (!matches[selector]) { if (!matches[selector]) {
matches[selector] = callbacks; matches[selector] = callbacks;
} }
} }
}); }, true);
if (!$.isEmptyObject(matches)) { if (!$.isEmptyObject(matches)) {
handlerQueue.push({ handlerQueue.push({
element: target, element: target,
...@@ -90,14 +91,15 @@ ...@@ -90,14 +91,15 @@
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
} }
}); }, true);
}) }, true)
if (e.isPropagationStopped()) { if (e.isPropagationStopped()) {
return false; return false;
} }
}); }, true);
}; };
}; };
var preventDefaultException = /^(INPUT|TEXTAREA|BUTTON|SELECT)$/;
/** /**
* mui delegate events * mui delegate events
* @param {type} event * @param {type} event
...@@ -125,8 +127,15 @@ ...@@ -125,8 +127,15 @@
element.addEventListener('click', function(e) { element.addEventListener('click', function(e) {
if (e.target) { if (e.target) {
var tagName = e.target.tagName; var tagName = e.target.tagName;
if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') { if (!preventDefaultException.test(tagName)) {
e.preventDefault(); if (tagName === 'A') {
var href = e.target.href;
if (!(href && ~href.indexOf('tel:'))) {
e.preventDefault();
}
} else {
e.preventDefault();
}
} }
} }
}); });
...@@ -148,7 +157,7 @@ ...@@ -148,7 +157,7 @@
delegateCallbacks.splice(index, 1); delegateCallbacks.splice(index, 1);
return false; return false;
} }
}); }, true);
} }
//如果off掉了所有当前element的指定的event事件，则remove掉当前element的delegate回调 //如果off掉了所有当前element的指定的event事件，则remove掉当前element的delegate回调
if (delegates[_mid] && $.isEmptyObject(delegates[_mid][event])) { if (delegates[_mid] && $.isEmptyObject(delegates[_mid][event])) {
......
js/mui.fixed.keyboard.js
View file @ f118b58e
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
} }
var target = e.target; 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) { if (target.disabled || target.readOnly) {
return; return;
} }
......
js/mui.gestures.js
View file @ f118b58e
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
detect(event, $.gestures.touch); detect(event, $.gestures.touch);
}; };
var detectTouchMove = function(event) { var detectTouchMove = function(event) {
if ($.gestures.stoped) { if ($.gestures.stoped || !$.gestures.touch) {
return; return;
} }
var touch = $.gestures.touch; var touch = $.gestures.touch;
...@@ -164,7 +164,7 @@ ...@@ -164,7 +164,7 @@
detect(event, touch); detect(event, touch);
}; };
var detectTouchEnd = function(event) { var detectTouchEnd = function(event) {
if ($.gestures.stoped) { if ($.gestures.stoped || !$.gestures.touch) {
return; return;
} }
var touch = $.gestures.touch; var touch = $.gestures.touch;
...@@ -193,7 +193,7 @@ ...@@ -193,7 +193,7 @@
} }
}, true); }, true);
//增加原生滚动识别 //增加原生滚动识别
$.isScrolling = false; $.isScrolling = false;
var scrollingTimeout = null; var scrollingTimeout = null;
......
js/mui.init.5+.js
View file @ f118b58e
...@@ -67,7 +67,9 @@ ...@@ -67,7 +67,9 @@
*/ */
$.plusReady = function(callback) { $.plusReady = function(callback) {
if (window.plus) { if (window.plus) {
callback(); setTimeout(function() { //解决callback与plusready事件的执行时机问题(典型案例:showWaiting,closeWaiting)
callback();
}, 0);
} else { } else {
document.addEventListener("plusready", function() { document.addEventListener("plusready", function() {
callback(); callback();
...@@ -181,7 +183,7 @@ ...@@ -181,7 +183,7 @@
} else { //新窗口 } else { //新窗口
if (options.createNew !== true) { if (options.createNew !== true) {
webview = plus.webview.getWebviewById(id); webview = plus.webview.getWebviewById(id);
if (webview) {//如果已存在 if (webview) { //如果已存在
nShow = $.showOptions(options.show); nShow = $.showOptions(options.show);
webview.show(nShow.aniShow, nShow.duration, function() { webview.show(nShow.aniShow, nShow.duration, function() {
triggerPreload(webview); triggerPreload(webview);
......
js/mui.js
View file @ f118b58e
...@@ -210,7 +210,7 @@ var mui = (function(document, undefined) { ...@@ -210,7 +210,7 @@ var mui = (function(document, undefined) {
* @param {type} callback * @param {type} callback
* @returns {_L8.$} * @returns {_L8.$}
*/ */
$.each = function(elements, callback) { $.each = function(elements, callback, hasOwnProperty) {
if (!elements) { if (!elements) {
return this; return this;
} }
...@@ -220,7 +220,13 @@ var mui = (function(document, undefined) { ...@@ -220,7 +220,13 @@ var mui = (function(document, undefined) {
}); });
} else { } else {
for (var key in elements) { for (var key in elements) {
if (callback.call(elements[key], key, elements[key]) === false) return elements; if (hasOwnProperty) {
if (elements.hasOwnProperty(key)) {
if (callback.call(elements[key], key, elements[key]) === false) return elements;
}
} else {
if (callback.call(elements[key], key, elements[key]) === false) return elements;
}
} }
} }
return this; return this;
......
js/mui.pullrefresh.js
View file @ f118b58e
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
var CLASS_PULL = $.className('pull'); var CLASS_PULL = $.className('pull');
var CLASS_PULL_LOADING = $.className('pull-loading'); var CLASS_PULL_LOADING = $.className('pull-loading');
var CLASS_PULL_CAPTION = $.className('pull-caption'); var CLASS_PULL_CAPTION = $.className('pull-caption');
var CLASS_PULL_CAPTION_DOWN = $.className('pull-caption-down');
var CLASS_PULL_CAPTION_REFRESH = $.className('pull-caption-refresh');
var CLASS_PULL_CAPTION_NOMORE = $.className('pull-caption-nomore');
var CLASS_ICON = $.className('icon'); var CLASS_ICON = $.className('icon');
var CLASS_SPINNER = $.className('spinner'); var CLASS_SPINNER = $.className('spinner');
...@@ -100,6 +103,21 @@ ...@@ -100,6 +103,21 @@
loading.className = CLASS_LOADING_DOWN; loading.className = CLASS_LOADING_DOWN;
} }
}, },
_setCaptionClass: function(isPulldown, caption, title) {
if (!isPulldown) {
switch (title) {
case this.options.up.contentdown:
caption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_DOWN;
break;
case this.options.up.contentrefresh:
caption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_REFRESH
break;
case this.options.up.contentnomore:
caption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_NOMORE;
break;
}
}
},
_setCaption: function(title, reset) { _setCaption: function(title, reset) {
if (this.loading) { if (this.loading) {
return; return;
...@@ -109,14 +127,15 @@ ...@@ -109,14 +127,15 @@
var caption = this.pullCaption; var caption = this.pullCaption;
var loading = this.pullLoading; var loading = this.pullLoading;
var isPulldown = this.pulldown; var isPulldown = this.pulldown;
var self = this;
if (pocket) { if (pocket) {
if (reset) { if (reset) {
var self = this;
setTimeout(function() { setTimeout(function() {
caption.innerHTML = self.lastTitle = title; caption.innerHTML = self.lastTitle = title;
if (isPulldown) { if (isPulldown) {
loading.className = CLASS_LOADING_DOWN; loading.className = CLASS_LOADING_DOWN;
} else { } else {
self._setCaptionClass(false, caption, title);
loading.className = CLASS_LOADING; loading.className = CLASS_LOADING;
} }
loading.style.webkitAnimation = ""; loading.style.webkitAnimation = "";
...@@ -145,6 +164,7 @@ ...@@ -145,6 +164,7 @@
} else { } else {
loading.className = CLASS_LOADING + ' ' + CLASS_HIDDEN; loading.className = CLASS_LOADING + ' ' + CLASS_HIDDEN;
} }
self._setCaptionClass(false, caption, title);
} }
this.lastTitle = title; this.lastTitle = title;
} }
......
js/popovers.js
View file @ f118b58e
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
$.trigger(this, 'shown', this); $.trigger(this, 'shown', this);
} }
var onPopoverHidden = function(e) { var onPopoverHidden = function(e) {
setStyle(this,'none'); setStyle(this, 'none');
this.removeEventListener('webkitTransitionEnd', onPopoverHidden); this.removeEventListener('webkitTransitionEnd', onPopoverHidden);
this.removeEventListener('touchmove', $.preventDefault); this.removeEventListener('touchmove', $.preventDefault);
fixedPopoverScroll(false); fixedPopoverScroll(false);
...@@ -248,8 +248,9 @@ ...@@ -248,8 +248,9 @@
if (mask._show) { if (mask._show) {
mask._show = false; mask._show = false;
element.setAttribute('style', 'opacity:0'); element.setAttribute('style', 'opacity:0');
setTimeout(function() { $.later(function() {
document.body.removeChild(element); var body = document.body;
element.parentNode === body && body.removeChild(element);
}, 350); }, 350);
} }
return mask; return mask;
......
js/pullrefresh.5+.js
View file @ f118b58e
...@@ -12,6 +12,11 @@ ...@@ -12,6 +12,11 @@
var CLASS_HIDDEN = $.className('hidden'); var CLASS_HIDDEN = $.className('hidden');
var CLASS_BLOCK = $.className('block'); var CLASS_BLOCK = $.className('block');
var CLASS_PULL_CAPTION = $.className('pull-caption');
var CLASS_PULL_CAPTION_DOWN = $.className('pull-caption-down');
var CLASS_PULL_CAPTION_REFRESH = $.className('pull-caption-refresh');
var CLASS_PULL_CAPTION_NOMORE = $.className('pull-caption-nomore');
var PlusPullRefresh = $.Class.extend({ var PlusPullRefresh = $.Class.extend({
init: function(element, options) { init: function(element, options) {
this.element = element; this.element = element;
...@@ -128,8 +133,8 @@ ...@@ -128,8 +133,8 @@
} }
}, },
pulldownLoading: function() { pulldownLoading: function() {
//TODO var callback = $.options.pullRefresh.down.callback;
throw new Error('暂不支持'); callback && callback.call(this);
}, },
endPulldownToRefresh: function() { //该方法是子页面调用的 endPulldownToRefresh: function() { //该方法是子页面调用的
var webview = plus.webview.currentWebview(); var webview = plus.webview.currentWebview();
...@@ -161,6 +166,7 @@ ...@@ -161,6 +166,7 @@
self.pullLoading.classList.add(CLASS_VISIBILITY); self.pullLoading.classList.add(CLASS_VISIBILITY);
self.pullLoading.classList.remove(CLASS_HIDDEN); self.pullLoading.classList.remove(CLASS_HIDDEN);
self.pullCaption.innerHTML = ''; //修正5+里边第一次加载时，文字显示的bug(还会显示出来个“多”,猜测应该是渲染问题导致的) self.pullCaption.innerHTML = ''; //修正5+里边第一次加载时，文字显示的bug(还会显示出来个“多”,猜测应该是渲染问题导致的)
self.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_REFRESH;
self.pullCaption.innerHTML = self.options.up.contentrefresh; self.pullCaption.innerHTML = self.options.up.contentrefresh;
callback = callback || self.options.up.callback; callback = callback || self.options.up.callback;
callback && callback.call(self); callback && callback.call(self);
...@@ -174,12 +180,14 @@ ...@@ -174,12 +180,14 @@
self.isLoading = false; self.isLoading = false;
if (finished) { if (finished) {
self.finished = true; self.finished = true;
self.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_NOMORE;
self.pullCaption.innerHTML = self.options.up.contentnomore; self.pullCaption.innerHTML = self.options.up.contentnomore;
// self.bottomPocket.classList.remove(CLASS_BLOCK); // self.bottomPocket.classList.remove(CLASS_BLOCK);
// self.bottomPocket.classList.add(CLASS_HIDDEN); // self.bottomPocket.classList.add(CLASS_HIDDEN);
// document.removeEventListener('plusscrollbottom', self); // document.removeEventListener('plusscrollbottom', self);
window.removeEventListener('dragup', self); window.removeEventListener('dragup', self);
} else { //初始化时隐藏，后续不再隐藏 } else { //初始化时隐藏，后续不再隐藏
self.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_DOWN;
self.pullCaption.innerHTML = self.options.up.contentdown; self.pullCaption.innerHTML = self.options.up.contentdown;
// setTimeout(function() { // setTimeout(function() {
// self.loading || self.bottomPocket.classList.remove(CLASS_BLOCK); // self.loading || self.bottomPocket.classList.remove(CLASS_BLOCK);
...@@ -192,10 +200,9 @@ ...@@ -192,10 +200,9 @@
}, },
refresh: function(isReset) { refresh: function(isReset) {
if (isReset && this.finished) { if (isReset && this.finished) {
if (this.pulldown !== false) { this._initPullupRefresh();
this._initPullupRefresh();
}
this.bottomPocket.classList.remove(CLASS_HIDDEN); this.bottomPocket.classList.remove(CLASS_HIDDEN);
this.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_DOWN;
this.pullCaption.innerHTML = this.options.up.contentdown; this.pullCaption.innerHTML = this.options.up.contentdown;
window.addEventListener('dragup', this); window.addEventListener('dragup', this);
this.finished = false; this.finished = false;
......
js/switches.js
View file @ f118b58e
...@@ -113,10 +113,10 @@ ...@@ -113,10 +113,10 @@
var classList = this.classList; var classList = this.classList;
if (classList.contains(CLASS_ACTIVE)) { if (classList.contains(CLASS_ACTIVE)) {
classList.remove(CLASS_ACTIVE); classList.remove(CLASS_ACTIVE);
this.handle.style.webkitTransform = 'translate3d(0,0,0)'; this.handle.style.webkitTransform = 'translate(0,0)';
} else { } else {
classList.add(CLASS_ACTIVE); classList.add(CLASS_ACTIVE);
this.handle.style.webkitTransform = 'translate3d(' + this.handleX + 'px,0,0)'; this.handle.style.webkitTransform = 'translate(' + this.handleX + 'px,0)';
} }
$.trigger(this.element, 'toggle', { $.trigger(this.element, 'toggle', {
isActive: this.classList.contains(CLASS_ACTIVE) isActive: this.classList.contains(CLASS_ACTIVE)
...@@ -132,10 +132,10 @@ ...@@ -132,10 +132,10 @@
} }
if (this.lastChanged !== isChanged) { if (this.lastChanged !== isChanged) {
if (isChanged) { if (isChanged) {
this.handle.style.webkitTransform = 'translate3d(' + (this.initialState ? 0 : this.handleX) + 'px,0,0)'; this.handle.style.webkitTransform = 'translate(' + (this.initialState ? 0 : this.handleX) + 'px,0)';
this.classList[this.initialState ? 'remove' : 'add'](CLASS_ACTIVE); this.classList[this.initialState ? 'remove' : 'add'](CLASS_ACTIVE);
} else { } else {
this.handle.style.webkitTransform = 'translate3d(' + (this.initialState ? this.handleX : 0) + 'px,0,0)'; this.handle.style.webkitTransform = 'translate(' + (this.initialState ? this.handleX : 0) + 'px,0)';
this.classList[this.initialState ? 'add' : 'remove'](CLASS_ACTIVE); this.classList[this.initialState ? 'add' : 'remove'](CLASS_ACTIVE);
} }
this.lastChanged = isChanged; this.lastChanged = isChanged;
......
js/tableviews.js
View file @ f118b58e
...@@ -452,6 +452,7 @@ ...@@ -452,6 +452,7 @@
radioOrCheckboxClick(); radioOrCheckboxClick();
} }
}); });
var preventDefaultException = /^(INPUT|TEXTAREA|BUTTON|SELECT)$/;
window.addEventListener('tap', function(event) { window.addEventListener('tap', function(event) {
if (!cell) { if (!cell) {
return; return;
...@@ -479,7 +480,10 @@ ...@@ -479,7 +480,10 @@
return; return;
} }
if (classList.contains($.className('collapse')) && !cell.parentNode.classList.contains($.className('unfold'))) { 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)) { //展开时,需要收缩其他同类 if (!classList.contains(CLASS_ACTIVE)) { //展开时,需要收缩其他同类
var collapse = cell.parentNode.querySelector($.classSelector('.collapse.active')); var collapse = cell.parentNode.querySelector($.classSelector('.collapse.active'));
if (collapse) { if (collapse) {
......
package.json
View file @ f118b58e
{ {
"name": "mui", "name": "mui",
"description": "Build mobile apps with simple HTML, CSS, and JS components.", "description": "Build mobile apps with simple HTML, CSS, and JS components.",
"version": "1.7.0", "version": "1.8.0",
"keywords": [ "keywords": [
"css", "css",
"fonts", "fonts",
......
sass/bars.scss
View file @ f118b58e
This diff is collapsed.
sass/forms.scss
View file @ f118b58e
This diff is collapsed.
sass/switches.scss
View file @ f118b58e
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment