补充preload函数

dist/js/mui.js

@@ -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;

examples/hello-mui/examples/offcanvas-left-plus-main.html

@@ -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

@@ -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/list.html

@@ -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>