Skip to content

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

编译至mui v2.4.0

parent 0cd36275
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 359 additions and 214 deletions
dist/css/mui.css
View file @ be7bd495
/*!
* =====================================================
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* Mui v2.4.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -1954,6 +1954,10 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
background-color: #c8c7cc;
}
.mui-table-view:before
{
top: -1px;
}
.mui-table-view-icon .mui-table-view-cell .mui-navigate-right .mui-icon
{
......@@ -2068,8 +2072,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
padding: 11px 15px;
background-color: inherit;
-webkit-touch-callout: none;
}
.mui-table-view-cell:after
......@@ -3914,6 +3916,7 @@ select:focus
height: 100%;
vertical-align: top;
white-space: normal;
}
.mui-slider .mui-slider-group .mui-slider-item > a:not(.mui-control-item)
{
......
dist/css/mui.min.css
View file @ be7bd495
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/mui.js
View file @ be7bd495
/*!
* =====================================================
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* Mui v2.4.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -748,7 +748,8 @@ var mui = (function(document, undefined) {
}
}
var target = e.target;
if (target.tagName && target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')) {
//TODO 需考虑所有键盘弹起的情况
if (target.tagName && (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')))) {
if (target.disabled || target.readOnly) {
return;
}
......@@ -3440,7 +3441,6 @@ var mui = (function(document, undefined) {
}
},
_start: function(e) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
this.moved = this.needReset = false;
this._transitionTime();
if (this.isInTransition) {
......@@ -4085,6 +4085,10 @@ var mui = (function(document, undefined) {
}
},
_start: function(e) {
//仅下拉刷新在start阻止默认事件
if (e.touches && e.touches.length && e.touches[0].clientX > 30) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
}
if (!this.loading) {
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
}
......@@ -4638,6 +4642,7 @@ var mui = (function(document, undefined) {
var self = this;
// document.addEventListener('plusscrollbottom', this);
window.addEventListener('dragup', self);
document.addEventListener("plusscrollbottom", self);
self.scrollInterval = window.setInterval(function() {
if (self.isScroll && !self.loading) {
if (window.pageYOffset + window.innerHeight + 10 >= document.documentElement.scrollHeight) {
......@@ -4705,7 +4710,7 @@ var mui = (function(document, undefined) {
// }
// }
self.isScroll = false;
if (e.type === 'dragup') {
if (e.type === 'dragup' || e.type === 'plusscrollbottom') {
self.isScroll = true;
setTimeout(function() {
self.isScroll = false;
......@@ -5583,10 +5588,11 @@ var mui = (function(document, undefined) {
return element;
}());
var removeBackdropTimer;
var removeBackdrop = function(popover) {
backdrop.setAttribute('style', 'opacity:0');
$.targets.popover = $.targets._popover = null; //reset
setTimeout(function() {
removeBackdropTimer = $.later(function() {
if (!popover.classList.contains(CLASS_ACTIVE) && backdrop.parentNode && backdrop.parentNode === document.body) {
document.body.removeChild(backdrop);
}
......@@ -5611,6 +5617,7 @@ var mui = (function(document, undefined) {
});
var togglePopover = function(popover, anchor) {
removeBackdropTimer && removeBackdropTimer.cancel(); //取消remove的timer
//remove一遍，以免来回快速切换，导致webkitTransitionEnd不触发，无法remove
popover.removeEventListener('webkitTransitionEnd', onPopoverShown);
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
......@@ -7011,8 +7018,16 @@ var mui = (function(document, undefined) {
});
self.input.addEventListener(changeEventName, function(event) {
self.checkValue();
$.trigger(self, changeEventName, self.getValue());
});
},
/**
* 获取当前值
**/
getValue: function() {
var self = this;
return parseInt(self.input.value);
},
/**
* 验证当前值是法合法
**/
......
dist/js/mui.min.js
View file @ be7bd495
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 @ be7bd495
/*!
* =====================================================
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* Mui v2.4.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......@@ -1954,6 +1954,10 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
background-color: #c8c7cc;
}
.mui-table-view:before
{
top: -1px;
}
.mui-table-view-icon .mui-table-view-cell .mui-navigate-right .mui-icon
{
......@@ -2068,8 +2072,6 @@ input[type='submit']:enabled:active, input[type='submit'].mui-active:enabled,
padding: 11px 15px;
background-color: inherit;
-webkit-touch-callout: none;
}
.mui-table-view-cell:after
......@@ -3914,6 +3916,7 @@ select:focus
height: 100%;
vertical-align: top;
white-space: normal;
}
.mui-slider .mui-slider-group .mui-slider-item > a:not(.mui-control-item)
{
......
examples/hello-mui/css/mui.min.css
View file @ be7bd495
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/info.html
View file @ be7bd495
......@@ -26,9 +26,9 @@
</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 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">
......@@ -48,7 +48,7 @@
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为2.3.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为2.4.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/lazyload-image.html
View file @ be7bd495
<!DOCTYPE html>
<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">
p{
text-indent: 22px;
<!DOCTYPE html>
<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">
p {
text-indent: 22px;
}
.des {
margin: .5em 0;
}
.des>li {
font-size: 14px;
color: #8f8f94;
.des {
margin: .5em 0;
}
</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">lazyload（延迟加载） </h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：</p>
<ul class="des">
<li>加快页面渲染速度</li>
<li>提升页面滚动性能</li>
<li>默认不下载屏幕外的图片，减少网络流量</li>
</ul>
</div>
<ul id="list" class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</body>
<script src="../js/mui.min.js "></script>
<script src="../js/mui.lazyload.js"></script>
<script src="../js/mui.lazyload.img.js"></script>
<script>
mui.init();
var createFragment = function(count) {
var fragment = document.createDocumentFragment();
var li;
for (var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media';
li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/'+(i%5+1)+'.jpg?version='+Math.random()*1000+'"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>';
fragment.appendChild(li);
}
return fragment;
};
(function($) {
var list = document.getElementById("list");
list.appendChild(createFragment(50));
$(document).imageLazyload({
placeholder: '../images/60x60.gif'
});
})(mui);
</script>
.des>li {
font-size: 14px;
color: #8f8f94;
}
</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">lazyload（延迟加载） </h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<p>延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：</p>
<ul class="des">
<li>加快页面渲染速度</li>
<li>提升页面滚动性能</li>
<li>默认不下载屏幕外的图片，减少网络流量</li>
</ul>
</div>
<ul id="list" class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</body>
<script src="../js/mui.min.js "></script>
<script src="../js/mui.lazyload.js"></script>
<script src="../js/mui.lazyload.img.js"></script>
<script>
mui.init();
var createFragment = function(count) {
var fragment = document.createDocumentFragment();
var li;
for (var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media';
li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/' + (i % 5 + 1) + '.jpg?version=' + Math.random() * 1000 + '"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>';
fragment.appendChild(li);
}
return fragment;
};
(function($) {
var list = document.getElementById("list");
list.appendChild(createFragment(50));
$(document).imageLazyload({
placeholder: '../images/60x60.gif'
});
})(mui);
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/numbox.html
View file @ be7bd495
......@@ -57,10 +57,10 @@
<h5 class="mui-content-padded">取值操作</h5>
<div class="mui-numbox">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input id="testBox" class="mui-numbox-input" type="number" />
<input id="box" class="mui-numbox-input" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
<button id="getValue" class="mui-btn" style="padding: 7px 12px;">取当前值</button>
<button id="btn" class="mui-btn" style="padding: 7px 12px;">取当前值</button>
<h5 class="mui-content-padded">在行内</h5> 购买数量:
<div class="mui-numbox">
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
......@@ -99,17 +99,11 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script>
(function($, doc) {
$.init();
$.plusReady(function() {
var btnGetValue = doc.querySelector('#getValue');
var boxTest = doc.querySelector('#testBox');
btnGetValue.addEventListener('click', function(event) {
plus.nativeUI.alert('当前值: ' + boxTest.value, null, "提示");
});
});
}(mui, document));
<script>
mui.init();
document.getElementById("btn").addEventListener('tap', function(event) {
mui.alert('当前值: ' + document.getElementById("box").value, null, "提示");
});
</script>
</body>
......
examples/hello-mui/examples/picker.html
View file @ be7bd495
......@@ -9,9 +9,9 @@
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<!--<link href="../css/mui.picker.css" rel="stylesheet" />
<link href="../css/mui.poppicker.css" rel="stylesheet" />-->
<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
<link href="../css/mui.picker.css" rel="stylesheet" />
<link href="../css/mui.poppicker.css" rel="stylesheet" />
<!--<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />-->
<style>
.mui-btn {
font-size: 16px;
......@@ -61,9 +61,9 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.picker.min.js"></script>
<!--<script src="../js/mui.picker.js"></script>
<script src="../js/mui.poppicker.js"></script>-->
<!--<script src="../js/mui.picker.min.js"></script>-->
<script src="../js/mui.picker.js"></script>
<script src="../js/mui.poppicker.js"></script>
<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script>
......
examples/hello-mui/examples/setting.html
View file @ be7bd495
......@@ -112,9 +112,7 @@
.mui-table-view {
margin-top: 20px;
}
.mui-table-view:after {
height: 0;
}
.mui-table-view span.mui-pull-right {
color: #999;
}
......@@ -215,7 +213,7 @@
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V2.3.0</i></a>
<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V2.4.0</i></a>
</li>
</ul>
<ul class="mui-table-view">
......
examples/hello-mui/examples/tab-webview-main.html
View file @ be7bd495
......@@ -46,8 +46,8 @@
mui.init();
var subpages = ['tab-webview-subpage-about.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html', 'tab-webview-subpage-setting.html'];
var subpage_style = {
top: '44px',
bottom: '50px'
top: '45px',
bottom: '51px'
};
var aniShow = {};
......
examples/hello-mui/examples/tableviews-with-swipe.html
View file @ be7bd495
......@@ -11,7 +11,7 @@
<!--标准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" />
</head>
<body>
......@@ -91,11 +91,10 @@
<a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone"></a>
<a class="mui-btn mui-btn-red mui-icon mui-icon-email"></a>
</div>
<div class="mui-slider-handle mui-table">
<div class="mui-slider-handle">
<div class="mui-table-cell">
左滑显示多功能菜单
</div>
</div>
</li>
<li class="mui-table-view-cell">
......@@ -140,10 +139,14 @@
//第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
$('#OA_task_1').on('tap', '.mui-btn', function(event) {
var elem = this;
var li = elem.parentNode.parentNode;
mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
if (e.index == 0) {
var li = elem.parentNode.parentNode;
li.parentNode.removeChild(li);
} else {
setTimeout(function() {
$.swipeoutClose(li);
}, 0);
}
});
});
......@@ -154,6 +157,10 @@
mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
if (e.index == 0) {
elem.parentNode.removeChild(elem);
} else {
setTimeout(function() {
$.swipeoutClose(elem);
}, 0);
}
});
});
......@@ -163,10 +170,15 @@
mui.confirm('确认删除该条记录？', 'Hello MUI', btnArray, function(e) {
if (e.index == 0) {
elem.parentNode.removeChild(elem);
} else {
setTimeout(function() {
$.swipeoutClose(elem);
}, 0);
}
});
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/template.html
View file @ be7bd495
......@@ -81,27 +81,25 @@
}
});
var contentWebview = null,self = null;
var titleElem = document.getElementById("title");
mui.plusReady(function () {
self = plus.webview.currentWebview();
});
});
mui.back = function() {
var current = plus.webview.currentWebview();
current.hide('auto');
self.hide('auto');
setTimeout(function() {
titleElem.className = 'mui-title mui-fadeout';
titleElem.innerText = '';
if(contentWebview==null){
contentWebview = current.children()[0];
contentWebview = self.children()[0];
}
contentWebview.hide("none");
}, 350);
}
var menu = document.getElementById("menu")
var titleElem = document.getElementById("title")
var menuElem = document.getElementById("menu")
window.addEventListener("updateHeader", function(e) {
window.addEventListener("updateHeader", function(e) {
var title = e.detail.title;
var showMenu = e.detail.showMenu;
var href = e.detail.target;
......@@ -132,7 +130,8 @@
}
});
document.getElementById("menu").addEventListener('tap', function(e) {
menuElem.addEventListener('tap', function(e) {
e.stopPropagation();
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
......@@ -145,6 +144,16 @@
}
contentWebview.evalJS('mui.scrollTo(0, 100)');
});
mui.menu = function () {
console.log(menuElem.style.display);
if(menuElem.style.display !== "none"){
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS('mui("#topPopover").popover("toggle")');
}
}
</script>
</html>
\ No newline at end of file
examples/hello-mui/js/mui.indexedlist.js
View file @ be7bd495
......@@ -174,4 +174,14 @@
}
});
//mui(selector).indexedList 方式
$.fn.indexedList = function(options) {
//遍历选择的元素
this.each(function(i, element) {
if (element.indexedList) return;
element.indexedList = new IndexedList(element, options);
});
return this[0] ? this[0].indexedList : null;
};
})(mui, window, document);
\ No newline at end of file
examples/hello-mui/js/mui.js
View file @ be7bd495
/*!
* =====================================================
* Mui v2.3.0 (https://github.com/dcloudio/mui)
* Mui v2.4.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -748,7 +748,8 @@ var mui = (function(document, undefined) {
}
}
var target = e.target;
if (target.tagName && target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')) {
//TODO 需考虑所有键盘弹起的情况
if (target.tagName && (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')))) {
if (target.disabled || target.readOnly) {
return;
}
......@@ -3440,7 +3441,6 @@ var mui = (function(document, undefined) {
}
},
_start: function(e) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
this.moved = this.needReset = false;
this._transitionTime();
if (this.isInTransition) {
......@@ -4085,6 +4085,10 @@ var mui = (function(document, undefined) {
}
},
_start: function(e) {
//仅下拉刷新在start阻止默认事件
if (e.touches && e.touches.length && e.touches[0].clientX > 30) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
}
if (!this.loading) {
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
}
......@@ -4638,6 +4642,7 @@ var mui = (function(document, undefined) {
var self = this;
// document.addEventListener('plusscrollbottom', this);
window.addEventListener('dragup', self);
document.addEventListener("plusscrollbottom", self);
self.scrollInterval = window.setInterval(function() {
if (self.isScroll && !self.loading) {
if (window.pageYOffset + window.innerHeight + 10 >= document.documentElement.scrollHeight) {
......@@ -4705,7 +4710,7 @@ var mui = (function(document, undefined) {
// }
// }
self.isScroll = false;
if (e.type === 'dragup') {
if (e.type === 'dragup' || e.type === 'plusscrollbottom') {
self.isScroll = true;
setTimeout(function() {
self.isScroll = false;
......@@ -5583,10 +5588,11 @@ var mui = (function(document, undefined) {
return element;
}());
var removeBackdropTimer;
var removeBackdrop = function(popover) {
backdrop.setAttribute('style', 'opacity:0');
$.targets.popover = $.targets._popover = null; //reset
setTimeout(function() {
removeBackdropTimer = $.later(function() {
if (!popover.classList.contains(CLASS_ACTIVE) && backdrop.parentNode && backdrop.parentNode === document.body) {
document.body.removeChild(backdrop);
}
......@@ -5611,6 +5617,7 @@ var mui = (function(document, undefined) {
});
var togglePopover = function(popover, anchor) {
removeBackdropTimer && removeBackdropTimer.cancel(); //取消remove的timer
//remove一遍，以免来回快速切换，导致webkitTransitionEnd不触发，无法remove
popover.removeEventListener('webkitTransitionEnd', onPopoverShown);
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
......@@ -7011,8 +7018,16 @@ var mui = (function(document, undefined) {
});
self.input.addEventListener(changeEventName, function(event) {
self.checkValue();
$.trigger(self, changeEventName, self.getValue());
});
},
/**
* 获取当前值
**/
getValue: function() {
var self = this;
return parseInt(self.input.value);
},
/**
* 验证当前值是法合法
**/
......
examples/hello-mui/js/mui.lazyload.img.js
View file @ be7bd495
......@@ -4,50 +4,94 @@
this._super(element, options);
},
_init: function() {
this.options.selector = 'img[data-lazyload]';
this.options.selector = '[data-lazyload]';
this._super();
},
addElement: function(img) {
_set: function(element, uri) {
if (element.tagName === 'IMG') {
element.src = uri;
} else {
element.style.backgroundImage = "url(" + uri + ")";
}
},
_hasPlaceholder: function(element) {
if (element.offsetWidth) {
if (element.tagName === 'IMG') {
return !!element.src;
} else {
return !!element.style.backgroundImage;
}
}
return false;
},
_addPlaceHolder: function(element) {
var self = this;
var src = img.getAttribute('data-lazyload');
if (src) {
self.onPlaceHolder = self._createLoader(function(callback) {
var img = new Image();
var placeholder = self.options.placeholder;
img.src = placeholder;
img.onload = img.onerror = function() {
callback(placeholder)
};
if (element.tagName === 'IMG') {
self._counter++;
element.onload = function() {
self._counter--;
self.addCallback(element, self.handle);
this.onload = null;
};
self.onPlaceHolder(function(placeholder) {
self._set(element, placeholder);
});
if (img.offsetWidth) {
self.addCallback(img, self.handle);
} else {
element.style.backgroundImage = "url(" + self.options.placeholder + ")";
}
},
addElement: function(element) {
var self = this;
var uri = element.getAttribute('data-lazyload');
if (uri) {
if (self._hasPlaceholder(element)) {
self.addCallback(element, self.handle);
} else {
self._counter++;
img.onload = function() {
self._counter--;
self.addCallback(img, self.handle);
this.onload = null;
};
if (!img.src) {
self.onPlaceHolder(function(placeholder) {
if (!img.src) {
img.src = placeholder;
}
});
}
self.onPlaceHolder = self._createLoader(function(callback) {
var img = new Image();
var placeholder = self.options.placeholder;
img.src = placeholder;
img.onload = img.onerror = function() {
callback(placeholder);
};
});
self._addPlaceHolder(element);
}
return true;
}
return false;
},
handle: function(img, key) {
var dataSrc = img.getAttribute('data-lazyload');
if (dataSrc && img.src != dataSrc) {
img.src = dataSrc;
img.removeAttribute('data-lazyload');
img.parentNode.parentNode.setAttribute('data-lazyload', 'true');
set: function(element, uri) {
var self = this;
var img = new Image();
img.onload = function() {
self._set(element, uri);
$.trigger(self.element, 'success', {
element: element,
uri: uri
});
};
img.onerror = function() {
$.trigger(self.element, 'error', {
element: element,
uri: uri
});
};
img.src = uri;
element.removeAttribute('data-lazyload'); //只尝试一次，后续可能支持多次尝试
},
handle: function(element, key) {
var uri = element.getAttribute('data-lazyload');
if (uri) {
this.set(element, uri);
//element.parentNode.parentNode.setAttribute('data-lazyload', 'true'); //debug
}
},
destroy: function() {
this._super();
this.element.removeAttribute('data-imageLazyload');
}
});
$.fn.imageLazyload = function(options) {
var lazyloadApis = [];
......
examples/hello-mui/js/mui.locker.js
View file @ be7bd495
......@@ -17,7 +17,7 @@
var styleHolder = doc.querySelector('head') || doc.querySelector('body');
styleHolder.innerHTML += "<style>.mui-locker-holder{overflow:hidden;position:relative;padding:0px;}.mui-locker-holder canvas{width:100%;height:100%;}</style>";
var times = 4;
var times = 2;
function getElementLeft(element) {　　　　
var actualLeft = element.offsetLeft;　　　　
......@@ -56,13 +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;
options = options || {};
options.callback = options.callback || options.done || $.noop;
options.times = options.times || times;
self.options = options;
self.holder.innerHTML = '<canvas></canvas>';
//
self.holder.classList.add(lockerHolderClassName);
......@@ -80,11 +78,11 @@
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;
self.CH *= times;
self.OffsetX *= times;
self.OffsetY *= times;
self.R *= self.options.times;
self.CW *= self.options.times;
self.CH *= self.options.times;
self.OffsetX *= self.options.times;
self.OffsetY *= self.options.times;
//
canvas.width = self.CW;
canvas.height = self.CH;
......@@ -131,7 +129,7 @@
var pointIndex = _LinePointArr[i];
cxt.lineTo(_PointLocationArr[pointIndex].X, _PointLocationArr[pointIndex].Y);
}
cxt.lineWidth = 2 * times;
cxt.lineWidth = (self.options.lindeWidth || 2) * self.options.times;
cxt.strokeStyle = self.options.lineColor || "#999"; //连结线颜色
cxt.stroke();
cxt.closePath();
......@@ -149,18 +147,18 @@
var Point = _PointLocationArr[i];
cxt.fillStyle = self.options.ringColor || "#888"; //圆圈边框颜色
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R, 0, Math.PI * times, true);
cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
cxt.fillStyle = self.options.fillColor || "#f3f3f3"; //圆圈填充颜色
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R - (2 * times), 0, Math.PI * times, true);
cxt.arc(Point.X, Point.Y, R - ((self.options.ringWidth || 2) * self.options.times), 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
if (_LinePointArr.indexOf(i) >= 0) {
cxt.fillStyle = self.options.pointColor || "#777"; //圆圈中心点颜色
cxt.beginPath();
cxt.arc(Point.X, Point.Y, R - (16 * times), 0, Math.PI * times, true);
cxt.arc(Point.X, Point.Y, R - ((self.options.pointWidth || 16) * self.options.times), 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
......@@ -190,8 +188,8 @@
//start
self._startHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * self.options.times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * self.options.times;
self.isPointSelect(e.point, linePoint);
isDown = true;
};
......@@ -201,8 +199,8 @@
if (!isDown) return;
e.preventDefault();
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * self.options.times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * self.options.times;
var touches = e.point;
self.isPointSelect(touches, linePoint);
cxt.clearRect(0, 0, self.CW, self.CH);
......@@ -215,8 +213,8 @@
//end
self._endHandler = function(e) {
e.point = event.changedTouches ? event.changedTouches[0] : event;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * times;
e.point.elementX = (e.point.pageX - getElementLeft(holder)) * self.options.times;
e.point.elementY = (e.point.pageY - getElementTop(holder)) * self.options.times;
cxt.clearRect(0, 0, self.CW, self.CH);
self.draw(cxt, self.pointLocationArr, linePoint, null);
//事件数据
......@@ -276,8 +274,9 @@
$.fn.locker = function(options) {
//遍历选择的元素
this.each(function(i, element) {
if (element.locker) return;
if (options) {
new Locker(element, options);
element.locker = new Locker(element, options);
} else {
var optionsText = element.getAttribute('data-locker-options');
var _options = optionsText ? JSON.parse(optionsText) : {};
......@@ -287,10 +286,10 @@
_options.pointColor = element.getAttribute('data-locker-point-color') || _options.pointColor;
_options.width = element.getAttribute('data-locker-width') || _options.width;
_options.height = element.getAttribute('data-locker-height') || _options.height;
new Locker(element, _options);
element.locker = new Locker(element, _options);
}
});
return this;
return this[0] ? this[0].locker : null;
};
//自动处理 class='mui-locker' 的 dom
......
examples/hello-mui/js/mui.min.js
View file @ be7bd495
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.picker.all.js
View file @ be7bd495
......@@ -22,7 +22,9 @@
var platform = navigator.platform.toLowerCase();
var userAgent = navigator.userAgent.toLowerCase();
var isIos = userAgent.indexOf('iphone') > -1 && platform == 'iphone';
var isIos = (userAgent.indexOf('iphone') > -1 || userAgent.indexOf('ipad') > -1) &&
(platform.indexOf('iphone') > -1 || platform.indexOf('ipad') > -1);
//alert(isIos);
var Picker = $.Picker = function(holder, options) {
var self = this;
......@@ -371,7 +373,7 @@
});
}
})(this.mui || this, window, document, undefined);
})(window.mui || window, window, document, undefined);
//end
/**
* 弹出选择列表插件
......
examples/hello-mui/js/mui.picker.js
View file @ be7bd495
......@@ -22,7 +22,9 @@
var platform = navigator.platform.toLowerCase();
var userAgent = navigator.userAgent.toLowerCase();
var isIos = userAgent.indexOf('iphone') > -1 && platform == 'iphone';
var isIos = (userAgent.indexOf('iphone') > -1 || userAgent.indexOf('ipad') > -1) &&
(platform.indexOf('iphone') > -1 || platform.indexOf('ipad') > -1);
//alert(isIos);
var Picker = $.Picker = function(holder, options) {
var self = this;
......@@ -371,5 +373,5 @@
});
}
})(this.mui || this, window, document, undefined);
})(window.mui || window, window, document, undefined);
//end
\ No newline at end of file
examples/hello-mui/js/mui.picker.min.js
View file @ be7bd495
This diff is collapsed.
examples/hello-mui/js/mui.previewimage.js
View file @ be7bd495
......@@ -24,9 +24,6 @@
document.body.appendChild(div.firstElementChild);
el = document.getElementById(this.options.id);
}
//自动启用
$.options.gestureConfig.pinch = true;
$.options.gestureConfig.doubletap = true;
this.element = el;
this.scroller = this.element.querySelector($.classSelector('.slider-group'));
......
examples/hello-mui/js/mui.pullToRefresh.js
View file @ be7bd495
......@@ -36,6 +36,9 @@
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了',
callback: false
},
preventDefaultException: {
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
}
}, options);
this.stopped = this.isNeedRefresh = this.isDragging = false;
......@@ -45,8 +48,17 @@
this.initEvent();
},
_preventDefaultException: function(el, exceptions) {
for (var i in exceptions) {
if (exceptions[i].test(el[i])) {
return true;
}
}
return false;
},
initEvent: function() {
if ($.isFunction(this.options.down.callback)) {
this.element.addEventListener('touchstart', this);
this.element.addEventListener('drag', this);
this.element.addEventListener('dragend', this);
}
......@@ -60,6 +72,9 @@
},
handleEvent: function(e) {
switch (e.type) {
case 'touchstart':
this.isInScroll && this._canPullDown() && e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
break;
case 'drag':
this._drag(e);
break;
......@@ -127,7 +142,7 @@
if (self.loading) {
return;
}
if (e && e.detail && e.detail.drag) {
if (e && e.detail && $.gestures.session.drag) {
self.isDraggingUp = true;
} else {
if (!self.isDraggingUp) { //scroll event
......@@ -175,6 +190,11 @@
var detail = e.detail;
if (!this.isDragging) {
if (detail.direction === 'down' && this._canPullDown()) {
if (document.querySelector('.' + CLASS_PULL_TOP_TIPS)) {
e.stopPropagation();
e.detail.gesture.preventDefault();
return;
}
this.isDragging = true;
this.removing = false;
this.startDeltaY = detail.deltaY;
......
examples/hello-mui/js/mui.zoom.js
View file @ be7bd495
......@@ -26,6 +26,9 @@
zoom.zoomerStyle = zoom.zoomer && zoom.zoomer.style;
zoom.init = function() {
//自动启用
$.options.gestureConfig.pinch = true;
$.options.gestureConfig.doubletap = true;
zoom.initEvents();
};
......
js/mui.class.scroll.js
View file @ be7bd495
......@@ -275,7 +275,6 @@
}
},
_start: function(e) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
this.moved = this.needReset = false;
this._transitionTime();
if (this.isInTransition) {
......
js/mui.class.scroll.pullrefresh.js
View file @ be7bd495
......@@ -20,6 +20,10 @@
}
},
_start: function(e) {
//仅下拉刷新在start阻止默认事件
if (e.touches && e.touches.length && e.touches[0].clientX > 30) {
e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
}
if (!this.loading) {
this.pulldown = this.pullPocket = this.pullCaption = this.pullLoading = false
}
......
js/mui.fixed.keyboard.js
View file @ be7bd495
......@@ -21,7 +21,8 @@
}
}
var target = e.target;
if (target.tagName && target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')) {
//TODO 需考虑所有键盘弹起的情况
if (target.tagName && (target.tagName === 'TEXTAREA' || (target.tagName === 'INPUT' && (target.type === 'text' || target.type === 'search' || target.type === 'number')))) {
if (target.disabled || target.readOnly) {
return;
}
......
js/mui.number.js
View file @ be7bd495
......@@ -51,8 +51,16 @@
});
self.input.addEventListener(changeEventName, function(event) {
self.checkValue();
$.trigger(self, changeEventName, self.getValue());
});
},
/**
* 获取当前值
**/
getValue: function() {
var self = this;
return parseInt(self.input.value);
},
/**
* 验证当前值是法合法
**/
......
js/popovers.js
View file @ be7bd495
......@@ -78,10 +78,11 @@
return element;
}());
var removeBackdropTimer;
var removeBackdrop = function(popover) {
backdrop.setAttribute('style', 'opacity:0');
$.targets.popover = $.targets._popover = null; //reset
setTimeout(function() {
removeBackdropTimer = $.later(function() {
if (!popover.classList.contains(CLASS_ACTIVE) && backdrop.parentNode && backdrop.parentNode === document.body) {
document.body.removeChild(backdrop);
}
......@@ -106,6 +107,7 @@
});
var togglePopover = function(popover, anchor) {
removeBackdropTimer && removeBackdropTimer.cancel(); //取消remove的timer
//remove一遍，以免来回快速切换，导致webkitTransitionEnd不触发，无法remove
popover.removeEventListener('webkitTransitionEnd', onPopoverShown);
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
......
js/pullrefresh.5+.js
View file @ be7bd495
......@@ -29,6 +29,7 @@
var self = this;
// document.addEventListener('plusscrollbottom', this);
window.addEventListener('dragup', self);
document.addEventListener("plusscrollbottom", self);
self.scrollInterval = window.setInterval(function() {
if (self.isScroll && !self.loading) {
if (window.pageYOffset + window.innerHeight + 10 >= document.documentElement.scrollHeight) {
......@@ -96,7 +97,7 @@
// }
// }
self.isScroll = false;
if (e.type === 'dragup') {
if (e.type === 'dragup' || e.type === 'plusscrollbottom') {
self.isScroll = true;
setTimeout(function() {
self.isScroll = false;
......
package.json
View file @ be7bd495
{
"name": "mui",
"description": "Build mobile apps with simple HTML, CSS, and JS components.",
"version": "2.3.0",
"version": "2.4.0",
"keywords": [
"css",
"fonts",
......
sass/sliders.scss
View file @ be7bd495
......@@ -36,6 +36,7 @@
// -webkit-backface-visibility: hidden;
position: relative;
display: inline-block;
white-space:normal;
width: 100%;
height: 100%;
font-size: 14px;
......
sass/table-views.scss
View file @ be7bd495
......@@ -13,6 +13,9 @@
// border-width: 1px 0px 1px 0px;
// border-style: solid;
@include hairline(double, #c8c7cc, 0); // Double grey border.
&:before{
top:-1px;//cell 高亮时，保证边框仍旧可见
}
}
//.#{$namespace}table-view-striped>li:nth-child(odd){
......@@ -83,7 +86,7 @@
position: relative;
padding: 11px 15px;
overflow: hidden;
background-color: inherit;
//background-color: inherit;//应该透明，否则会盖住ul的边框
@include hairline(single, #c8c7cc, 15px); // Single grey border with 15px offset.
-webkit-touch-callout: none;//禁止长按出现打开菜单；
&.#{$namespace}radio input[type=radio],&.#{$namespace}checkbox input[type=checkbox]{
......
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