编译至mui v1.8.0

dcloudio · Jun 7, 2015 · f118b58 · f118b58
1 parent ac46012
commit f118b58
Show file tree

Hide file tree

Showing 50 changed files with 11,104 additions and 6,469 deletions.
diff --git a/dist/css/mui.css b/dist/css/mui.css
diff --git a/dist/css/mui.min.css b/dist/css/mui.min.css
diff --git a/dist/js/mui.js b/dist/js/mui.js
diff --git a/dist/js/mui.min.js b/dist/js/mui.min.js
diff --git a/examples/hello-mui/css/mui.css b/examples/hello-mui/css/mui.css
diff --git a/examples/hello-mui/css/mui.dtpicker.css b/examples/hello-mui/css/mui.dtpicker.css
@@ -0,0 +1,114 @@
+.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;
+}
diff --git a/examples/hello-mui/css/mui.min.css b/examples/hello-mui/css/mui.min.css
diff --git a/examples/hello-mui/css/mui.poppicker.css b/examples/hello-mui/css/mui.poppicker.css
@@ -0,0 +1,60 @@
+.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;
+}
diff --git a/examples/hello-mui/examples/dialog.html b/examples/hello-mui/examples/dialog.html
@@ -1,5 +1,6 @@
 <!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 @@ <h1 class="mui-title">dialog（消息框）</h1>
 				<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>