增加“问题反馈”示例

dist/js/mui.js

@@ -4223,6 +4223,7 @@ var mui = (function(document, undefined) {
 			self.gotoItem((e.detail.tabNumber || 0), self.options.bounceTime);
 		},
 		_handleIndicatorTap: function(event) {
+			var self = this;
 			var target = event.target;
 			if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
 				self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();

examples/hello-mui/css/mui.indexedlist.css

-.mui-group-list {
+.mui-indexed-list {
 	position: relative;
 	border-top: solid 1px #e3e3e3;
 	border-bottom: solid 1px #e3e3e3;
@@ -7,62 +7,62 @@
 	height: 300px;
 	cursor: default;
 }
-.mui-group-list-inner {
+.mui-indexed-list-inner {
 	margin: 0px;
 	padding: 0px;
 	overflow-y: auto;
 	border: none;
 }
-.mui-group-list-inner::-webkit-scrollbar {
+.mui-indexed-list-inner::-webkit-scrollbar {
 	width: 0px;
 	height: 0px;
 	visibility: hidden;
 }
-.mui-group-list-empty-alert,
-.mui-group-list-inner.empty ul {
+.mui-indexed-list-empty-alert,
+.mui-indexed-list-inner.empty ul {
 	display: none;
 }
-.mui-group-list-inner.empty .mui-group-list-empty-alert {
+.mui-indexed-list-inner.empty .mui-indexed-list-empty-alert {
 	display: block;
 }
-.mui-group-list-empty-alert {
+.mui-indexed-list-empty-alert {
 	padding: 30px 15px;
 	text-align: center;
 	color: #ccc;
 	padding-right: 45px;
 }
-.mui-ios .mui-group-list-inner {
+.mui-ios .mui-indexed-list-inner {
 	width: calc(100% + 10px);
 }
-.mui-group-list-group,
-.mui-group-list-item {
+.mui-indexed-list-group,
+.mui-indexed-list-item {
 	padding-right: 45px;
 }
-.mui-ios .mui-group-list-group,
-.mui-ios .mui-group-list-item,
-.mui-ios .mui-group-list-empty-alert {
+.mui-ios .mui-indexed-list-group,
+.mui-ios .mui-indexed-list-item,
+.mui-ios .mui-indexed-list-empty-alert {
 	padding-right: 55px;
 }
-.mui-group-list-group {
+.mui-indexed-list-group {
 	background-color: #f7f7f7;
 }
-.mui-group-list-group {
+.mui-indexed-list-group {
 	padding-top: 3px;
 	padding-bottom: 3px;
 }
-.mui-group-list-search {
+.mui-indexed-list-search {
 	border-bottom: solid 1px #e3e3e3;
 	z-index: 15;
 }
-.mui-group-list-search.mui-search:before {
+.mui-indexed-list-search.mui-search:before {
 	margin-top: -10px;
 }
-.mui-group-list-search input {
+.mui-indexed-list-search input {
 	border-radius: 0px;
 	margin: 0px;
 	background-color: #fafafa;
 }
-.mui-group-list-bar {
+.mui-indexed-list-bar {
 	width: 23px;
 	background-color: lightgrey;
 	position: absolute;
@@ -71,7 +71,7 @@
 	right: 0px;
 	-webkit-transition: .2s;
 }
-.mui-group-list-bar a {
+.mui-indexed-list-bar a {
 	display: block;
 	text-align: center;
 	font-size: 11px;
@@ -80,16 +80,16 @@
 	line-height: 15px;
 	color: #aaa;
 }
-.mui-group-list-bar.active {
+.mui-indexed-list-bar.active {
 	background-color: rgb(200,200,200);
 }
-.mui-group-list-bar.active a {
+.mui-indexed-list-bar.active a {
 	color: #333;
 }
-.mui-group-list-bar.active a.active {
+.mui-indexed-list-bar.active a.active {
 	color: #007aff;
 }
-.mui-group-list-alert {
+.mui-indexed-list-alert {
 	position: absolute;
 	z-index: 20;
 	background-color: rgba(0, 0, 0, 0.5);
@@ -107,6 +107,6 @@
 	display: none;
 	-webkit-transition: .2s;
 }
-.mui-group-list-alert.active {
+.mui-indexed-list-alert.active {
 	display: block;
 }
\ No newline at end of file

examples/hello-mui/examples/imageviewer.html

@@ -46,20 +46,13 @@
 			}
 			.mui-preview-image.mui-preview-in {
 				display: block;
-				-webkit-animation: previewImageIn 400ms forwards;
-				animation: previewImageIn 400ms forwards;
 			}
-			.mui-preview-image.mui-preview-out {
-				-webkit-animation: previewImageOut 400ms forwards;
-				animation: previewImageOut 400ms forwards;
+			.mui-preview-image.mui-transitioning {
+				background: none;
 			}
-			.mui-android-4-1 .mui-preview-image.mui-preview-in {
-				-webkit-animation: previewImageIn 0.001s forwards;
-				animation: previewImageIn 0.001s forwards;
-			}
-			.mui-android-4-1 .mui-preview-image.mui-preview-out {
-				-webkit-animation: previewImageOut 0.001s forwards;
-				animation: previewImageOut 0.001s forwards;
+			.mui-preview-image.mui-transitioning .mui-preview-header,
+			.mui-preview-image.mui-transitioning .mui-preview-footer {
+				display: none;
 			}
 			.mui-zoom-scroller {
 				position: absolute;
@@ -98,46 +91,6 @@
 			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
 				width: 100%;
 			}
-			@-webkit-keyframes previewImageIn {
-				0% {
-					-webkit-transform: translate3d(0, 0, 0) scale(0.5);
-					opacity: 0;
-				}
-				100% {
-					-webkit-transform: translate3d(0, 0, 0) scale(1);
-					opacity: 1;
-				}
-			}
-			@keyframes previewImageIn {
-				0% {
-					transform: translate3d(0, 0, 0) scale(0.5);
-					opacity: 0;
-				}
-				100% {
-					transform: translate3d(0, 0, 0) scale(1);
-					opacity: 1;
-				}
-			}
-			@-webkit-keyframes previewImageOut {
-				0% {
-					-webkit-transform: translate3d(0, 0, 0) scale(1);
-					opacity: 1;
-				}
-				100% {
-					-webkit-transform: translate3d(0, 0, 0) scale(0.5);
-					opacity: 0;
-				}
-			}
-			@keyframes previewImageOut {
-				0% {
-					transform: translate3d(0, 0, 0) scale(1);
-					opacity: 1;
-				}
-				100% {
-					transform: translate3d(0, 0, 0) scale(0.5);
-					opacity: 0;
-				}
-			}
 			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
 				display: inline-table;
 			}
@@ -145,6 +98,30 @@
 				display: table-cell;
 				vertical-align: middle;
 			}
+			.mui-preview-loading {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				top: 0;
+				left: 0;
+				display: none;
+			}
+			.mui-preview-loading.mui-active {
+				display: block;
+			}
+			.mui-preview-loading .mui-spinner-white {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				margin-left: -25px;
+				margin-top: -25px;
+				height: 50px;
+				width: 50px;
+			}
+			.mui-preview-image img.mui-transitioning {
+				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
+				transition: transform 0.5s ease, opacity 0.5s ease;
+			}
 		</style>
 
 	</head>
@@ -160,7 +137,7 @@
 				<p>
 					<img src="../images/yuantiao.jpg" data-preview-src="" data-preview-group="1" />
 				</p>
-				<p>图片全屏后，左右滑动可查看本页其它图片，点击会关闭预览</p>
+				<p>图片全屏后，双击或双指缩放均可对图片进行放大、缩小操作，左右滑动可查看同组(data-preview-group相同的图片为一组)其它图片，点击会关闭预览</p>
 				<p>
 					<img src="../images/muwu.jpg" data-preview-src="" data-preview-group="1" />
 				</p>
@@ -168,25 +145,6 @@
 				<p>
 					<img src="../images/shuijiao.jpg" data-preview-src="" data-preview-group="1" />
 				</p>
-
-				<!--<ul class="mui-table-view mui-grid-view">
-					<li class="mui-table-view-cell mui-media mui-col-xs-4">
-						<a href="#">
-							<img class="mui-media-object" src="../images/shuijiao.jpg">
-						</a>
-					</li>
-					<li class="mui-table-view-cell mui-media mui-col-xs-4">
-						<a href="#">
-							<img class="mui-media-object" src="../images/muwu.jpg">
-						</a>
-					</li>
-					<li class="mui-table-view-cell mui-media mui-col-xs-4">
-						<a href="#">
-							<img class="mui-media-object" src="../images/cbd.jpg">
-						</a>
-					</li>
-				</ul>-->
-
 			</div>
 		</div>
 	</body>

examples/hello-mui/examples/lazyload-image.html

@@ -12,14 +12,34 @@
 		<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;
+			}
+		</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>
+			<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>

examples/hello-mui/js/feedback-page.js

+(function(mui, window, document, undefined) {
+	mui.init();
+	var get = function(id) {
+		return document.getElementById(id);
+	};
+	var qsa = function(sel) {
+		return [].slice.call(document.querySelectorAll(sel));
+	};
+	var ui = {
+		question: get('question'),
+		contact: get('contact'),
+		imageList: get('image-list'),
+		submit: get('submit')
+	};
+	ui.clearForm = function() {
+		ui.question.value = '';
+		ui.contact.value = '';
+		ui.imageList.innerHTML = '';
+		ui.newPlaceholder();
+	};
+	ui.getFileInputArray = function() {
+		return [].slice.call(ui.imageList.querySelectorAll('input[type="file"]'));
+	};
+	ui.getFileInputIdArray = function() {
+		var fileInputArray = ui.getFileInputArray();
+		var idArray = [];
+		fileInputArray.forEach(function(fileInput) {
+			if (fileInput.value != '') {
+				idArray.push(fileInput.getAttribute('id'));
+			}
+		});
+		return idArray;
+	};
+	var imageIndexIdNum = 0;
+	ui.newPlaceholder = function() {
+		var fileInputArray = ui.getFileInputArray();
+		if (fileInputArray &&
+			fileInputArray.length > 0 &&
+			fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
+			return;
+		}
+		imageIndexIdNum++;
+		var placeholder = document.createElement('div');
+		placeholder.setAttribute('class', 'image-item space');
+		var closeButton = document.createElement('div');
+		closeButton.setAttribute('class', 'image-close');
+		closeButton.innerHTML = 'X';
+		closeButton.addEventListener('click', function(event) {
+			event.stopPropagation();
+			event.cancelBubble = true;
+			setTimeout(function() {
+				ui.imageList.removeChild(placeholder);
+			}, 0);
+			return false;
+		}, false);
+		var fileInput = document.createElement('input');
+		fileInput.setAttribute('type', 'file');
+		fileInput.setAttribute('accept', 'image/*');
+		fileInput.setAttribute('id', 'image-' + imageIndexIdNum);
+		fileInput.addEventListener('change', function(event) {
+			var file = fileInput.files[0];
+			if (file) {
+				var reader = new FileReader();
+				reader.onload = function() {
+					placeholder.style.backgroundImage = 'url("' + reader.result + '")';
+				}
+				reader.readAsDataURL(file);
+				placeholder.classList.remove('space');
+				ui.newPlaceholder();
+			}
+		}, false);
+		placeholder.appendChild(closeButton);
+		placeholder.appendChild(fileInput);
+		ui.imageList.appendChild(placeholder);
+	};
+	ui.newPlaceholder();
+	ui.submit.addEventListener('tap', function(event) {
+		if (ui.question.value == '' ||
+			(ui.contact.value != '' &&
+				ui.contact.value.search(/^(\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+)|([1-9]\d{4,9})$/) != 0)) {
+			return mui.toast('信息填写不符合规范');
+		}
+		plus.nativeUI.showWaiting();
+		feedback.send({
+			question: ui.question.value,
+			contact: ui.contact.value,
+			images: ui.getFileInputIdArray()
+		}, function() {
+			plus.nativeUI.closeWaiting();
+			mui.toast('感谢您的建议~');
+			ui.clearForm();
+			mui.back();
+		});
+	}, false);
+})(mui, window, document, undefined);
\ No newline at end of file

examples/hello-mui/js/mui.js

@@ -4223,6 +4223,7 @@ var mui = (function(document, undefined) {
 			self.gotoItem((e.detail.tabNumber || 0), self.options.bounceTime);
 		},
 		_handleIndicatorTap: function(event) {
+			var self = this;
 			var target = event.target;
 			if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
 				self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();

examples/hello-mui/list.html

@@ -358,7 +358,7 @@
 						chat（聊天窗口） 
 					</a>
 				</li>
-				<li class="mui-table-view-cell">
+				<li id='feedback' class="mui-table-view-cell">
 					<a class="mui-navigate-right" href="examples/feedback.html">
 						feedback（问题反馈） 
 					</a>
@@ -421,7 +421,8 @@
 				}
 				//Android平台暂时使用slide-in-right动画
 				if(mui.os.android&&parseFloat(mui.os.version)<4.4){
-					aniShow = "slide-in-right"
+					aniShow = "slide-in-right";
+					document.getElementById('feedback').style.display = 'none';
 				}
 			}
 			//初始化，并预加载webview模式的选项卡			

js/mui.class.scroll.slider.js

@@ -134,6 +134,7 @@
 			self.gotoItem((e.detail.tabNumber || 0), self.options.bounceTime);
 		},
 		_handleIndicatorTap: function(event) {
+			var self = this;
 			var target = event.target;
 			if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
 				self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();