Skip to content

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

补充preload函数

parent 39192bcc
Expand all Show whitespace changes
Inline Side-by-side
Showing with 287 additions and 236 deletions
dist/js/mui.js
View file @ c76be454
......@@ -204,8 +204,8 @@ var mui = (function(document, undefined) {
};
return $;
})(document);
window.mui = mui;
'$' in window || (window.$ = mui);
//window.mui = mui;
//'$' in window || (window.$ = mui);
/**
* mui target(action>popover>modal>tab>toggle)
*/
......@@ -855,37 +855,42 @@ window.mui = mui;
* @param {type} $
* @returns {undefined}
*/
(function($) {
(function($, window) {
function detect(ua) {
this.os = {};
var funcs = [function() {//android
var funcs = [
function() { //android
var android = ua.match(/(Android);?[\s\/]+([\d.]+)?/);
if (android) {
this.os.android = true;
this.os.version = android[2];
this.os.isBadAndroid = !(/Chrome\/\d/.test(window.navigator.appVersion));
}
return this.os.android === true;
}, function() {//ios
},
function() { //ios
var iphone = ua.match(/(iPhone\sOS)\s([\d_]+)/);
if (iphone) {//iphone
if (iphone) { //iphone
this.os.ios = this.os.iphone = true;
this.os.version = iphone[2].replace(/_/g, '.');
} else {
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
if (ipad) {//ipad
if (ipad) { //ipad
this.os.ios = this.os.ipad = true;
this.os.version = ipad[2].replace(/_/g, '.');
}
}
return this.os.ios === true;
}];
}
];
[].every.call(funcs, function(func) {
return !func.call($);
});
}
detect.call($, navigator.userAgent);
})(mui);
})(mui, window);
/**
* $.os.plus
* @param {type} $
......@@ -1231,6 +1236,17 @@ window.mui = mui;
return webview;
};
/**
* 预加载
*/
$.preload = function(options){
//调用预加载函数，不管是否传递preload参数，强制变为true
if(!options.preload){
options.preload = true;
}
$.createWindow(options);
}
/**
*关闭当前webview打开的所有webview；
*/
......@@ -1350,21 +1366,24 @@ window.mui = mui;
//需要判断是否为plus，这个需要等一下；
setTimeout(function() {
if($.os.plus && $.os.android){
if ($.os.plus && $.os.android) {
//只要是android手机，必须使用原生的下拉刷新；
if(pullRefreshOptions.down){
if (pullRefreshOptions.down) {
$.plus_pulldownRefresh(pullRefreshOptions.down);
}
if(pullRefreshOptions.up){
if (pullRefreshOptions.up) {
var container = pullRefreshOptions.container;
if (container) {
var $container = $(container);
if ($container.length === 1) {
$container.pullRefresh(pullRefreshOptions);
$container.pullRefresh({
container: container,
up: pullRefreshOptions.up
});
}
}
}
}else{
} else {
var container = pullRefreshOptions.container;
if (container) {
var $container = $(container);
......@@ -1543,7 +1562,7 @@ window.mui = mui;
};
PullRefresh.prototype.initPocket = function() {
var options = this.options;
if (options.down && options.down.hasOwnProperty('callback')&&!($.os.plus&&$.os.android)) {
if (options.down && options.down.hasOwnProperty('callback')) {
this.topPocket = this.element.querySelector('.' + CLASS_PULL_TOP_POCKET);
if (!this.topPocket) {
this.topPocket = this.createPocket(CLASS_PULL_TOP_POCKET, options.down);
......@@ -1600,8 +1619,10 @@ window.mui = mui;
window.addEventListener('scroll', function() {
scrolling = true;
});
window.addEventListener('touchmove', function() {
window.addEventListener('dragend', function(event) {
if (event.detail.direction === 'up') {
scrolling = true;
}
});
}
......@@ -2029,9 +2050,6 @@ window.mui = mui;
if ($.os.android) {
return;
}
var CLASS_SLIDER = 'mui-slider';
var CLASS_SWITCH = 'mui-switch';
var CLASS_TABLE_VIEW_CELL = 'mui-table-view-cell';
var CLASS_SLIDER_HANDLE = 'mui-slider-handle';
var CLASS_OFF_CANVAS_LEFT = 'mui-off-canvas-left';
var CLASS_OFF_CANVAS_RIGHT = 'mui-off-canvas-right';
......@@ -2124,17 +2142,6 @@ window.mui = mui;
for (; target && target !== document; target = target.parentNode) {
var classList = target.classList;
if (classList) {
if (classList.contains(CLASS_SWITCH)) { //switch
break;
}
if (classList.contains(CLASS_TABLE_VIEW_CELL)) { //swipe table view cell
if (target.querySelector('.' + CLASS_SLIDER_HANDLE)) {
break;
}
}
if (classList.contains(CLASS_SLIDER)) { //slider
break;
}
if (classList.contains(CLASS_OFF_CANVAS_WRAP) && classList.contains(CLASS_DRAGGABLE)) {
container = target;
innerContainer = container.querySelector(SELECTOR_INNER_WRAP);
......@@ -2585,7 +2592,7 @@ window.mui = mui;
slider.addEventListener('dragstart', function(event) {
var detail = event.detail;
var direction = detail.direction;
if (direction == 'left' || direction == 'right') { //reset
if (direction === 'left' || direction === 'right') { //reset
isDragable = true;
self.translateX = self.lastTranslateX = 0;
self.scrollX = self.getScroll();
......@@ -2597,6 +2604,15 @@ window.mui = mui;
}
self.maxTranslateX = ((self.sliderLength - 1) * self.sliderWidth);
event.detail.gesture.preventDefault();
var isStopPropagation = true;
if (!self.isLoop) {
if (direction === 'right' && self.scrollX === 0) {
isStopPropagation = false;
} else if (direction === 'left' && self.scrollX === -self.maxTranslateX) {
isStopPropagation = false;
}
}
isStopPropagation && event.stopPropagation();
}
});
slider.addEventListener('drag', function(event) {
......@@ -2915,7 +2931,7 @@ window.mui = mui;
$.trigger(toggle, 'toggle', {
isActive: slideOn
});
toggle.removeEventListener('dragstart', $.stopPropagation);
};
var dragToggle = function(event) {
if (!toggle) {
......@@ -2936,6 +2952,7 @@ window.mui = mui;
window.addEventListener($.EVENT_START, function(e) {
toggle = $.targets.toggle;
if (toggle) {
toggle.addEventListener('dragstart', $.stopPropagation);
handle = toggle.querySelector(SELECTOR_SWITCH_HANDLE);
toggleWidth = toggle.clientWidth;
handleWidth = handle.clientWidth;
......@@ -3219,6 +3236,7 @@ window.mui = mui;
if (sliderCell && sliderCell.parentNode === cell) {
var handle = sliderCell.querySelector(SELECTOR_SLIDER_HANDLE);
if (handle) { //slider
toggleEvents(cell);
sliderHandle = handle;
sliderHandleWidth = sliderHandle.offsetWidth;
sliderHandleLeft = $.getStyles(sliderHandle, 'margin-left');
......@@ -3255,10 +3273,28 @@ window.mui = mui;
window.addEventListener('touchmove', function(event) {
toggleActive(false);
});
window.addEventListener('dragstart', function(event) {
if (!sliderHandle) {
return;
var handleEvent = {
handleEvent: function(event) {
switch (event.type) {
case 'dragstart':
this.dragstart(event);
break;
case 'drag':
this.drag(event);
break;
case 'dragend':
this.dragend(event);
break;
case 'swiperight':
this.swiperight(event);
break;
case 'swipeleft':
this.swipeleft(event);
break;
}
},
dragstart: function(event) {
var detail = event.detail;
var direction = detail.direction;
var angle = detail.angle;
......@@ -3283,8 +3319,11 @@ window.mui = mui;
isDraging = true;
}
}
});
window.addEventListener('drag', function(event) {
if(isDraging){
event.stopPropagation();
}
},
drag: function(event) {
if (isDraging) {
if (!sliderRequestAnimationFrame) {
updateTranslate();
......@@ -3292,15 +3331,13 @@ window.mui = mui;
translateX = event.detail.deltaX * factor;
event.detail.gesture.preventDefault();
}
});
window.addEventListener('dragend', function(event) {
},
dragend: function(event) {
if (isDraging) {
endDraging(false, event.detail);
}
});
window.addEventListener('swiperight', function(event) {
if (sliderHandle) {
},
swiperight: function(event) {
var isSwipeable = false;
if (sliderLeft && !sliderLeft.classList.contains(CLASS_BOUNCE) && sliderTranslateX === 0) {
//left show
......@@ -3318,10 +3355,8 @@ window.mui = mui;
event.stopImmediatePropagation();
endDraging(true, event.detail);
}
}
});
window.addEventListener('swipeleft', function(event) {
if (sliderHandle) {
},
swipeleft: function(event) {
var isSwipeable = false;
if (sliderRight && !sliderRight.classList.contains(CLASS_BOUNCE) && sliderTranslateX === 0) {
//right show
......@@ -3340,18 +3375,32 @@ window.mui = mui;
endDraging(true, event.detail);
}
}
});
}
function toggleEvents(element, isRemove) {
var method = !!isRemove ? 'removeEventListener' : 'addEventListener';
element[method]('dragstart', handleEvent);
element[method]('drag', handleEvent);
element[method]('dragend', handleEvent);
element[method]('swiperight', handleEvent);
element[method]('swipeleft', handleEvent);
}
window.addEventListener('touchend', function(event) { //使用touchend来取消高亮，避免一次点击既不触发tap，doubletap，longtap的事件
if (!cell) {
return;
}
toggleActive(false);
sliderHandle && toggleEvents(cell, true);
});
window.addEventListener('touchcancel', function(event) { //使用touchcancel来取消高亮，避免一次点击既不触发tap，doubletap，longtap的事件
if (!cell) {
return;
}
toggleActive(false);
sliderHandle && toggleEvents(cell, true);
});
var radioOrCheckboxClick = function() {
var classList = cell.classList;
......
dist/js/mui.min.js
View file @ c76be454
This diff is collapsed.
examples/hello-mui/examples/offcanvas-left-plus-main.html
View file @ c76be454
......@@ -127,18 +127,19 @@
if (slideTogether) {
left = '-70%';
}
menu = mui.createWindow({
menu = mui.openWindow({
id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html',
styles: {
left: left,
width: '70%',
zindex: 9998
},
show:{
aniShow:'none'
}
});
if (menu) {
menu.show('none');
}
//初始化主页面位置
mui.currentWebview.setStyle({
left: 0
});
......
examples/hello-mui/examples/offcanvas-right-plus-main.html
View file @ c76be454
......@@ -124,16 +124,18 @@
if(slideTogether){
left = '100%';
}
menu = mui.createWindow({
menu = mui.openWindow({
id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html',
styles: {
left: '30%',
width:'70%',
zindex: 9998
},
show:{
aniShow:'none'
}
});
menu.show('none');
mui.currentWebview.setStyle({left:0});
});
//点击侧滑按钮
......
examples/hello-mui/js/mui.min.js
View file @ c76be454
This diff is collapsed.
examples/hello-mui/list.html
View file @ c76be454
......@@ -502,11 +502,13 @@
</ul>
</div>
<script>
var limit = 5,count = 0;
var limit = 3,
count = 0;
mui.init({
preloadLimit: limit, //同时并存的预加载窗口数量
swipeBack: false,
});
(function($) {
$.plusReady(function() {
//初始化一级列表的预加载
$('#list>.mui-table-view-cell', document.body).each(function() {
......@@ -514,9 +516,8 @@
if (!this.classList.contains('mui-collapse')) {
var url = this.querySelector('a').getAttribute("href");
//预加载，默认使用url作为其id
$.createWindow({
$.preload({
url: url,
preload: true
});
if (++count >= limit) {
return false;
......@@ -531,21 +532,19 @@
var url = this.getAttribute("href");
if (~url.indexOf('.html')) {
//单独处理侧滑导航的index
if(~url.indexOf('offcanvas-')){
$.createWindow({
if (~url.indexOf('offcanvas-')) {
$.preload({
url: url,
styles:{
zindex:9999
styles: {
zindex: 9999
},
preload: true
});
}else{
$.createWindow({
} else {
$.preload({
url: url,
preload: true
});
}
if(++count>=limit){
if (++count >= limit) {
return false;
}
}
......@@ -560,8 +559,8 @@
} else if ($.os.android) {
document.getElementById('pull-refresh-h5').style.display = "none";
var list = document.querySelectorAll('.ios-only');
if(list){
for(var i=0;i<list.length;i++){
if (list) {
for (var i = 0; i < list.length; i++) {
list[i].style.display = 'none';
}
}
......@@ -578,20 +577,20 @@
if (~id.indexOf('.html')) {
if (window.plus) {
//侧滑导航涉及Index问题，需要单独处理；
if(~id.indexOf('offcanvas-')){
if (~id.indexOf('offcanvas-')) {
$.openWindow({
id: id,
url: this.href,
styles:{
zindex:9999
styles: {
zindex: 9999
},
preload: true
});
}else{
} else {
$.openWindow({
id: id,
url: this.href,
preload:true
preload: true
});
}
} else {
......@@ -605,7 +604,7 @@
}
});
});
})(mui);
</script>
</body>
......
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