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>
<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
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 @@
</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>;
......
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 @@
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;
......
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 @@
//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;
......
examples/hello-mui/js/mui.locker.js
View file @ f118b58e
......@@ -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
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 @@
popover（弹出菜单）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/pullrefresh_main.html">
pull to refresh（下拉刷新和上拉加载更多）
</a>
<li class="mui-table-view-cell mui-collapse">
<a href="#" class="mui-navigate-right">pull to refresh（下拉刷新和上拉加载更多）</a>
<ul class="mui-table-view mui-table-view-chevron">
<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 class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/radio.html">
......@@ -321,13 +331,23 @@
</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">
<a class="mui-navigate-right" href="examples/lazyload-image.html">
lazyload（懒加载）
</a>
</li>
<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（选择列表）
</a>
</li>
......
js/actions.js
View file @ f118b58e
......@@ -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;
......
js/input.plugin.js
View file @ f118b58e
......@@ -38,7 +38,7 @@
this.sliderActionSelector = SELECTOR_TOOLTIP;
} else { //clear,speech,search
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;
}
if (~this.options.actions.indexOf('speech')) { //only for 5+
......@@ -94,7 +94,7 @@
var action = document.createElement('span');
action.className = actionClass;
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', '');
if (this.element.value.trim()) {
row.classList.add($.className('active'));
......@@ -140,13 +140,16 @@
if (!action) {
return;
}
$.each(['keyup', 'change', 'input', 'focus', 'blur', 'cut', 'paste'], function(index, type) {
$.each(['keyup', 'change', 'input', 'focus', 'cut', 'paste'], function(index, type) {
(function(type) {
element.addEventListener(type, function() {
action.classList[element.value.trim() ? 'remove' : 'add'](CLASS_HIDDEN);
});
})(type);
});
element.addEventListener('blur', function() {
action.classList.add(CLASS_HIDDEN);
});
}
if (this.searchActionClass) {
element.addEventListener('focus', function() {
......@@ -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) {
var self = this;
self.element.value = '';
......@@ -196,7 +207,9 @@
event.preventDefault();
};
$.fn.input = function(options) {
var inputApis = [];
this.each(function() {
var inputApi = null;
var actions = [];
var row = findRow(this.parentNode);
if (this.type === 'range' && row.classList.contains($.className('input-range'))) {
......@@ -216,15 +229,18 @@
var id = this.getAttribute('data-input-' + actions[0]);
if (!id) {
id = ++$.uuid;
$.data[id] = new Input(this, {
inputApi = $.data[id] = new Input(this, {
actions: actions.join(',')
});
for (var i = 0, len = actions.length; i < len; i++) {
this.setAttribute('data-input-' + actions[i], id);
}
} else {
inputApi = $.data[id];
}
inputApis.push(inputApi);
});
return inputApis.length === 1 ? inputApis[0] : inputApis;
};
$.ready(function() {
$($.classSelector('.input-row input')).input();
......
js/mui.back.5+.js
View file @ f118b58e
......@@ -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();
}
}
});
......
js/mui.class.scroll.pullrefresh.js
View file @ f118b58e
......@@ -47,9 +47,9 @@
}
return this._super(time);
},
pulldownLoading: function(x, time) {
x = x || 0;
this.scrollTo(x, this.options.down.height, time, this.options.bounceEasing);
pulldownLoading: function(y, time) {
typeof y === 'undefined' && (y = this.options.down.height); //默认高度
this.scrollTo(0, y, time, this.options.bounceEasing);
if (this.loading) {
return;
}
......@@ -110,9 +110,7 @@
},
refresh: function(isReset) {
if (isReset && this.finished) {
if (this.pulldown !== false) {
this._initPullupRefresh();
}
this._initPullupRefresh();
this.bottomPocket.classList.remove(CLASS_HIDDEN);
this._setCaption(this.options.up.contentdown);
this.wrapper.addEventListener('scrollbottom', this);
......
js/mui.class.scroll.slider.js
View file @ f118b58e
......@@ -154,7 +154,7 @@
//拖拽期间取消定时
var slidershowTimer = this.wrapper.getAttribute('data-slidershowTimer');
slidershowTimer && window.clearTimeout(slidershowTimer);
e.stopPropagation();
}
},
......@@ -306,7 +306,7 @@
return true;
},
gotoItem: function(slideNumber, time) {
this._gotoItem(slideNumber, time || this.options.bounceTime);
this._gotoItem(slideNumber, typeof time === 'undefined' ? this.options.bounceTime : time);
},
nextItem: function() {
this._gotoItem(this.slideNumber + 1, this.options.bounceTime);
......
js/mui.dialog.confirm.js
View file @ f118b58e
......@@ -2,25 +2,33 @@
/**
* 确认消息框
*/
$.confirm = function(message,title,btnArray,callback) {
$.confirm = function(message, title, btnArray, callback) {
if ($.os.plus) {
if(typeof message === undefined){
if (typeof message === undefined) {
return;
}else{
if(typeof title ==='function'){
} else {
if (typeof title === 'function') {
callback = title;
title = null;
btnArray = null;
}else if(typeof btnArray ==='function'){
} else if (typeof btnArray === 'function') {
callback = btnArray;
btnArray = null;
}
plus.nativeUI.confirm(message,callback,title,btnArray);
plus.nativeUI.confirm(message, callback, title, btnArray);
}
}else{
//TODO H5版本
window.confirm(message);
} else {
//H5版本，0为确认，1为取消
if (window.confirm(message)) {
callback({
index: 0
});
} else {
callback({
index: 1
});
}
}
};
......
js/mui.dialog.prompt.js
View file @ f118b58e
......@@ -2,31 +2,42 @@
/**
* 输入对话框
*/
$.prompt = function(text,defaultText,title,btnArray,callback) {
$.prompt = function(text, defaultText, title, btnArray, callback) {
if ($.os.plus) {
if(typeof message === undefined){
if (typeof message === undefined) {
return;
}else{
} else {
if(typeof defaultText ==='function'){
if (typeof defaultText === 'function') {
callback = defaultText;
defaultText = null;
title = null;
btnArray = null;
}else if(typeof title === 'function'){
} else if (typeof title === 'function') {
callback = title;
title = null;
btnArray = null;
}else if(typeof btnArray ==='function'){
} else if (typeof btnArray === 'function') {
callback = btnArray;
btnArray = null;
}
plus.nativeUI.prompt(text,callback,title,defaultText,btnArray);
plus.nativeUI.prompt(text, callback, title, defaultText, btnArray);
}
}else{
//TODO H5版本
window.prompt(text);
} else {
//H5版本(确认index为0，取消index为1)
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 @@
return sourceMethod && sourceMethod.apply(event, arguments)
}
event[predicate] = returnFalse;
});
}, true);
return event;
};
//简单的wrap对象_mid
......@@ -62,12 +62,13 @@
}
var matches = {};
$.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]) {
matches[selector] = callbacks;
}
}
});
}, true);
if (!$.isEmptyObject(matches)) {
handlerQueue.push({
element: target,
......@@ -90,14 +91,15 @@
e.preventDefault();
e.stopPropagation();
}
});
})
}, true);
}, true)
if (e.isPropagationStopped()) {
return false;
}
});
}, true);
};
};
var preventDefaultException = /^(INPUT|TEXTAREA|BUTTON|SELECT)$/;
/**
* mui delegate events
* @param {type} event
......@@ -125,8 +127,15 @@
element.addEventListener('click', function(e) {
if (e.target) {
var tagName = e.target.tagName;
if (tagName !== 'INPUT' && tagName !== 'TEXTAREA' && tagName !== 'SELECT') {
e.preventDefault();
if (!preventDefaultException.test(tagName)) {
if (tagName === 'A') {
var href = e.target.href;
if (!(href && ~href.indexOf('tel:'))) {
e.preventDefault();
}
} else {
e.preventDefault();
}
}
}
});
......@@ -148,7 +157,7 @@
delegateCallbacks.splice(index, 1);
return false;
}
});
}, true);
}
//如果off掉了所有当前element的指定的event事件，则remove掉当前element的delegate回调
if (delegates[_mid] && $.isEmptyObject(delegates[_mid][event])) {
......
js/mui.fixed.keyboard.js
View file @ f118b58e
......@@ -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;
}
......
js/mui.gestures.js
View file @ f118b58e
......@@ -134,7 +134,7 @@
detect(event, $.gestures.touch);
};
var detectTouchMove = function(event) {
if ($.gestures.stoped) {
if ($.gestures.stoped || !$.gestures.touch) {
return;
}
var touch = $.gestures.touch;
......@@ -164,7 +164,7 @@
detect(event, touch);
};
var detectTouchEnd = function(event) {
if ($.gestures.stoped) {
if ($.gestures.stoped || !$.gestures.touch) {
return;
}
var touch = $.gestures.touch;
......@@ -193,7 +193,7 @@
}
}, true);
//增加原生滚动识别
$.isScrolling = false;
var scrollingTimeout = null;
......
js/mui.init.5+.js
View file @ f118b58e
......@@ -67,7 +67,9 @@
*/
$.plusReady = function(callback) {
if (window.plus) {
callback();
setTimeout(function() { //解决callback与plusready事件的执行时机问题(典型案例:showWaiting,closeWaiting)
callback();
}, 0);
} else {
document.addEventListener("plusready", function() {
callback();
......@@ -181,7 +183,7 @@
} else { //新窗口
if (options.createNew !== true) {
webview = plus.webview.getWebviewById(id);
if (webview) {//如果已存在
if (webview) { //如果已存在
nShow = $.showOptions(options.show);
webview.show(nShow.aniShow, nShow.duration, function() {
triggerPreload(webview);
......
js/mui.js
View file @ f118b58e
......@@ -210,7 +210,7 @@ var mui = (function(document, undefined) {
* @param {type} callback
* @returns {_L8.$}
*/
$.each = function(elements, callback) {
$.each = function(elements, callback, hasOwnProperty) {
if (!elements) {
return this;
}
......@@ -220,7 +220,13 @@ var mui = (function(document, undefined) {
});
} else {
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;
......
js/mui.pullrefresh.js
View file @ f118b58e
......@@ -4,6 +4,9 @@
var CLASS_PULL = $.className('pull');
var CLASS_PULL_LOADING = $.className('pull-loading');
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_SPINNER = $.className('spinner');
......@@ -100,6 +103,21 @@
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) {
if (this.loading) {
return;
......@@ -109,14 +127,15 @@
var caption = this.pullCaption;
var loading = this.pullLoading;
var isPulldown = this.pulldown;
var self = this;
if (pocket) {
if (reset) {
var self = this;
setTimeout(function() {
caption.innerHTML = self.lastTitle = title;
if (isPulldown) {
loading.className = CLASS_LOADING_DOWN;
} else {
self._setCaptionClass(false, caption, title);
loading.className = CLASS_LOADING;
}
loading.style.webkitAnimation = "";
......@@ -145,6 +164,7 @@
} else {
loading.className = CLASS_LOADING + ' ' + CLASS_HIDDEN;
}
self._setCaptionClass(false, caption, title);
}
this.lastTitle = title;
}
......
js/popovers.js
View file @ f118b58e
......@@ -55,7 +55,7 @@
$.trigger(this, 'shown', this);
}
var onPopoverHidden = function(e) {
setStyle(this,'none');
setStyle(this, 'none');
this.removeEventListener('webkitTransitionEnd', onPopoverHidden);
this.removeEventListener('touchmove', $.preventDefault);
fixedPopoverScroll(false);
......@@ -248,8 +248,9 @@
if (mask._show) {
mask._show = false;
element.setAttribute('style', 'opacity:0');
setTimeout(function() {
document.body.removeChild(element);
$.later(function() {
var body = document.body;
element.parentNode === body && body.removeChild(element);
}, 350);
}
return mask;
......
js/pullrefresh.5+.js
View file @ f118b58e
......@@ -12,6 +12,11 @@
var CLASS_HIDDEN = $.className('hidden');
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({
init: function(element, options) {
this.element = element;
......@@ -128,8 +133,8 @@
}
},
pulldownLoading: function() {
//TODO
throw new Error('暂不支持');
var callback = $.options.pullRefresh.down.callback;
callback && callback.call(this);
},
endPulldownToRefresh: function() { //该方法是子页面调用的
var webview = plus.webview.currentWebview();
......@@ -161,6 +166,7 @@
self.pullLoading.classList.add(CLASS_VISIBILITY);
self.pullLoading.classList.remove(CLASS_HIDDEN);
self.pullCaption.innerHTML = ''; //修正5+里边第一次加载时，文字显示的bug(还会显示出来个“多”,猜测应该是渲染问题导致的)
self.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_REFRESH;
self.pullCaption.innerHTML = self.options.up.contentrefresh;
callback = callback || self.options.up.callback;
callback && callback.call(self);
......@@ -174,12 +180,14 @@
self.isLoading = false;
if (finished) {
self.finished = true;
self.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_NOMORE;
self.pullCaption.innerHTML = self.options.up.contentnomore;
// self.bottomPocket.classList.remove(CLASS_BLOCK);
// self.bottomPocket.classList.add(CLASS_HIDDEN);
// document.removeEventListener('plusscrollbottom', self);
window.removeEventListener('dragup', self);
} else { //初始化时隐藏，后续不再隐藏
self.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_DOWN;
self.pullCaption.innerHTML = self.options.up.contentdown;
// setTimeout(function() {
// self.loading || self.bottomPocket.classList.remove(CLASS_BLOCK);
......@@ -192,10 +200,9 @@
},
refresh: function(isReset) {
if (isReset && this.finished) {
if (this.pulldown !== false) {
this._initPullupRefresh();
}
this._initPullupRefresh();
this.bottomPocket.classList.remove(CLASS_HIDDEN);
this.pullCaption.className = CLASS_PULL_CAPTION + ' ' + CLASS_PULL_CAPTION_DOWN;
this.pullCaption.innerHTML = this.options.up.contentdown;
window.addEventListener('dragup', this);
this.finished = false;
......
js/switches.js
View file @ f118b58e
......@@ -113,10 +113,10 @@
var classList = this.classList;
if (classList.contains(CLASS_ACTIVE)) {
classList.remove(CLASS_ACTIVE);
this.handle.style.webkitTransform = 'translate3d(0,0,0)';
this.handle.style.webkitTransform = 'translate(0,0)';
} else {
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', {
isActive: this.classList.contains(CLASS_ACTIVE)
......@@ -132,10 +132,10 @@
}
if (this.lastChanged !== 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);
} 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.lastChanged = isChanged;
......
js/tableviews.js
View file @ f118b58e
......@@ -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) {
......
package.json
View file @ f118b58e
{
"name": "mui",
"description": "Build mobile apps with simple HTML, CSS, and JS components.",
"version": "1.7.0",
"version": "1.8.0",
"keywords": [
"css",
"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