Merge pull request #1 from dcloudio/master

与原版本保持一致

.gitignore

+.sass-cache
+node_modules
+
+sass/.csscomb.json
+sass/.csslintrc
+
+js/.jscsrc
+js/.jshintrc
\ No newline at end of file

Gruntfile.js

+/*!
+ * Mui's Gruntfile
+ */
+
+/* jshint node: true */
+module.exports = function(grunt) {
+	'use strict';
+
+	// Force use of Unix newlines
+	grunt.util.linefeed = '\n';
+
+	RegExp.quote = function(string) {
+		return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
+	};
+
+	var generateNamespace = require('./grunt/mui-namespace-generator.js');
+	// Project configuration.
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+
+		// Metadata.
+		meta: {
+			libPath: 'lib/',
+			distPath: 'dist/',
+			jsPath: 'js/',
+			sassPath: 'sass/',
+			examplesPath: 'examples/hello-mui/'
+		},
+
+		banner: '/*!\n' +
+			' * =====================================================\n' +
+			' * Mui v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
+			' * =====================================================\n' +
+			' */\n',
+
+		clean: {
+			all: ['<%= meta.distPath %>'],
+			sourceMap: ['<%= meta.distPath %>css/*.map']
+		},
+
+		concat: {
+			mui: {
+				options: {
+					banner: '<%= banner %>'
+				},
+				src: [
+					'js/mui.js',
+					'js/mui.detect.js',
+					'js/mui.detect.5+.js',
+					'js/mui.target.js',
+					'js/mui.fixed.js',
+					'js/mui.fixed.classlist.js',
+					'js/mui.fixed.animation.js',
+					'js/mui.fixed.fastclick.js',
+					'js/mui.fixed.keyboard.js',
+					'js/mui.namespace.js',
+					'js/mui.event.js',
+					'js/mui.gestures.js',
+					'js/mui.gestures.flick.js',
+					'js/mui.gestures.swipe.js',
+					'js/mui.gestures.drag.js',
+					'js/mui.gestures.tap.js',
+					'js/mui.gestures.longtap.js',
+					'js/mui.gestures.hold.js',
+					'js/mui.init.js',
+					'js/mui.init.5+.js',
+					'js/mui.back.js',
+					'js/mui.back.5+.js',
+					'js/mui.init.pullrefresh.js',
+					'js/mui.ajax.js',
+					'js/mui.ajax.5+.js',
+					'js/mui.layout.js',
+					'js/mui.animation.js',
+					'js/mui.class.js',
+					'js/mui.pullRefresh.js',
+					'js/mui.class.scroll.js',
+					'js/mui.class.scroll.pullrefresh.js',
+					'js/mui.class.scroll.slider.js',
+					'js/pullrefresh.5+.js',
+					'js/mui.offcanvas.js',
+					'js/actions.js',
+					'js/modals.js',
+					'js/popovers.js',
+					'js/segmented-controllers.js',
+					'js/switches.js',
+					'js/tableviews.js',
+					'js/mui.dialog.alert.js',
+					'js/mui.dialog.confirm.js',
+					'js/mui.dialog.prompt.js',
+					'js/mui.dialog.toast.js',
+					'js/input.plugin.js',
+					'js/mui.number.js'
+
+				],
+				dest: '<%= meta.distPath %>js/<%= pkg.name %>.js',
+			}
+		},
+
+		sass: {
+			options: {
+				banner: '<%= banner %>',
+				style: 'expanded',
+				unixNewlines: true
+			},
+			dist: {
+				files: {
+					'<%= meta.distPath %>css/<%= pkg.name %>.css': 'sass/mui.scss',
+				}
+			}
+		},
+
+		csscomb: {
+			options: {
+				config: 'sass/.csscomb.json'
+			},
+			dist: {
+				files: {
+					'<%= meta.distPath %>/css/<%= pkg.name %>.css': '<%= meta.distPath %>/css/<%= pkg.name %>.css'
+				}
+			},
+		},
+
+		copy: {
+			fonts: {
+				expand: true,
+				src: 'fonts/mui*.ttf',
+				dest: '<%= meta.distPath %>/'
+			},
+			examples: {
+				expand: true,
+				cwd: '<%= meta.distPath %>',
+				src: ['**/mui*'],
+				dest: '<%= meta.examplesPath %>'
+			}
+		},
+
+		cssmin: {
+			options: {
+				banner: '', // set to empty; see bellow
+				keepSpecialComments: '*', // set to '*' because we already add the banner in sass
+				sourceMap: false
+			},
+			mui: {
+				src: '<%= meta.distPath %>css/<%= pkg.name %>.css',
+				dest: '<%= meta.distPath %>css/<%= pkg.name %>.min.css'
+			}
+		},
+
+		uglify: {
+			options: {
+				banner: '<%= banner %>',
+				compress: true,
+				mangle: true,
+				preserveComments: false
+			},
+			mui: {
+				src: '<%= concat.mui.dest %>',
+				dest: '<%= meta.distPath %>js/<%= pkg.name %>.min.js'
+			}
+		},
+
+		watch: {
+			options: {
+				dateFormat: function(time) {
+					grunt.log.writeln('The watch finished in ' + time + 'ms at' + (new Date()).toString());
+					grunt.log.writeln('Waiting for more changes...');
+				},
+				livereload: true
+			},
+			scripts: {
+				files: [
+					'<%= meta.sassPath %>/**/*.scss',
+					'<%= meta.jsPath %>/**/*.js',
+				],
+				tasks: 'dist'
+			}
+		},
+
+		jshint: {
+			options: {
+				jshintrc: 'js/.jshintrc'
+			},
+			grunt: {
+				src: ['Gruntfile.js', 'grunt/*.js']
+			},
+			src: {
+				src: 'js/*.js'
+			}
+		},
+
+		jscs: {
+			options: {
+				config: 'js/.jscsrc'
+			},
+			grunt: {
+				src: '<%= jshint.grunt.src %>'
+			},
+			src: {
+				src: '<%= jshint.src.src %>'
+			},
+			docs: {
+				src: '<%= jshint.docs.src %>'
+			}
+		},
+
+		csslint: {
+			options: {
+				csslintrc: 'sass/.csslintrc'
+			},
+			src: [
+				'<%= meta.distPath %>/css/<%= pkg.name %>.css',
+			]
+		},
+		sed: {
+			versionNumber: {
+				pattern: (function() {
+					var old = grunt.option('oldver');
+					return old ? RegExp.quote(old) : old;
+				})(),
+				replacement: grunt.option('newver'),
+				recursive: true
+			}
+		}
+	});
+	// Load the plugins
+	require('load-grunt-tasks')(grunt, {
+		scope: 'devDependencies'
+	});
+	require('time-grunt')(grunt);
+	// Default task(s).
+	grunt.registerTask('cleanAll', ['clean']);
+	grunt.registerTask('dist-css', ['sass', 'csscomb', 'cssmin', 'clean:sourceMap']);
+	grunt.registerTask('dist-js', ['concat', 'build-namespace', 'uglify']);
+	grunt.registerTask('dist', ['clean:all', 'dist-css', 'dist-js', 'copy']);
+	grunt.registerTask('build', ['dist']);
+	grunt.registerTask('default', ['dist']);
+
+
+	grunt.registerTask('build-namespace', generateNamespace);
+
+	grunt.registerTask('server', ['dist','watch']);
+
+
+
+	// Version numbering task.
+	// grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
+	// This can be overzealous, so its changes should always be manually reviewed!
+	grunt.registerTask('change-version-number', 'sed');
+
+	grunt.event.on('watch', function(action, filepath, target) {
+		grunt.log.writeln(target + ': ' + filepath + ' has ' + action);
+	});
+};
\ No newline at end of file

examples/hello-mui/css/app.css

+/*
+ *这是单独为hello mui准备的个性化css，可以覆盖标准mui的css定义；
+ * 在实际项目开发时，建议为App单独写一个css文件，从而实现项目的自定义皮肤功能；
+ * 
+ * */
+.mui-android header.mui-bar{
+	display: none;
+}
+.mui-android .mui-bar-nav~.mui-content{
+	padding: 0;
+}
\ No newline at end of file

examples/hello-mui/css/mui.listpicker.css

+/**
+ * 选择列表插件
+ * varstion 1.0.0
+ * by Houfeng
+ * Houfeng@DCloud.io
+ */
+
+.mui-listpicker {
+	position: relative;
+	border: solid 1px #ccc;
+	padding: 0px;
+	margin: 3px;
+	height: 200px;
+	background-color: #fff;
+	overflow: hidden;
+	border-radius: 3px;
+}
+.mui-listpicker .mui-listpicker-inner {
+	width: 100%;
+	height: 100%;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	z-index: 1;
+	border-radius: 3px;
+}
+.mui-listpicker .mui-listpicker-inner-ios {
+	width: calc(100% + 8px);
+	padding-right: 8px;
+}
+.mui-listpicker .mui-listpicker-inner::-webkit-scrollbar {
+	width: 0px;
+	height: 0px;
+	visibility: hidden;
+}
+.mui-listpicker ul {
+	list-style-type: none;
+	margin: 0px;
+	padding: 0px;
+	position: relative;
+}
+.mui-listpicker ul li {
+	position: relative;
+	padding: 8px;
+	text-align: center;
+	color: #555;
+}
+.mui-listpicker ul li:last-child {
+	border-bottom: none;
+}
+.mui-listpicker ul li::first-child {
+	border-top: none;
+}
+.mui-listpicker .mui-listpicker-rule {
+	position: absolute;
+	border: solid 1px #ccc;
+	border-left: none;
+	border-right: none;
+	background-color: #dfd;
+	opacity: 0.5;
+	width: 100%;
+	left: 0px;
+	top: 50%;
+	z-index: 0;
+}
+.mui-listpicker .mui-listpicker-highlight {
+	color: green;
+}
\ No newline at end of file

examples/hello-mui/examples/accordion.html

@@ -8,19 +8,10 @@
 		<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">
-		
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
-		</style>
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
 		
 	</head>
 	<body>
@@ -124,9 +115,10 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<script>
-			mui.init();
+			mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
 		</script>
 	</body>
 

examples/hello-mui/examples/actionsheet-plus.html

@@ -8,18 +8,11 @@
 		<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>
-			html,
-			body {
-				background-color: #efeff4;
-			}
-			header.mui-bar {
-				display: none;
-			}
-			.mui-bar-nav~.mui-content {
-				padding: 0;
-			}
 			p {
 				text-indent: 22px;
 			}
@@ -46,7 +39,7 @@
 
 		<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">Actionsheet</h1>
+			<h1 class="mui-title">原生模式actionsheet</h1>
 		</header>
 		<nav class="mui-bar mui-bar-tab">
 			<a id="delete-btn" class="mui-tab-item">
@@ -77,9 +70,10 @@
 		<p id="info"></p>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
 		mui('body').on('shown', '.mui-popover', function(e) {
 			//console.log('shown', e.detail.id);//detail为当前popover元素
 		});

examples/hello-mui/examples/actionsheet.html

@@ -7,18 +7,11 @@
 		<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>
-			html,
-			body {
-				background-color: #efeff4;
-			}
-			header.mui-bar {
-				display: none;
-			}
-			.mui-bar-nav~.mui-content {
-				padding: 0;
-			}
 			p {
 				text-indent: 22px;
 			}
@@ -28,16 +21,16 @@
 				margin-left: -15px;
 				padding-right: 10px;
 			}
-			#info{
-		  		padding: 20px 10px ;
-		  	}
-		  	.des{
-		  		margin: .5em 0;
-		  	}
-		  	.des>li{
-		  		font-size: 14px;
+			#info {
+				padding: 20px 10px;
+			}
+			.des {
+				margin: .5em 0;
+			}
+			.des>li {
+				font-size: 14px;
 				color: #8f8f94;
-		  	}
+			}
 		</style>
 	</head>
 
@@ -45,7 +38,7 @@
 
 		<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">Popovers with action sheet</h1>
+			<h1 class="mui-title">H5模式actionsheet</h1>
 		</header>
 		<nav class="mui-bar mui-bar-tab">
 			<a class="mui-tab-item" href="#delete">
@@ -69,9 +62,11 @@
 					<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>
 				</p>
 				<p>本页面为H5模式的actionsheet演示示例，该模式具有如下优点：</p>
-					<ul class="des"><li>可通过css自由定制展现样式</li></ul>
-					
-				<p>另一方面，H5模式的actionsheet也具备如下缺点：</p>	
+				<ul class="des">
+					<li>可通过css自由定制展现样式</li>
+				</ul>
+
+				<p>另一方面，H5模式的actionsheet也具备如下缺点：</p>
 				<ul class="des">
 					<li>不支持覆盖顶部状态栏</li>
 					<li>不支持跨webview的遮罩</li>
@@ -81,8 +76,6 @@
 			</div>
 		</div>
 
-
-
 		<div id="delete" class="mui-popover mui-popover-action mui-popover-bottom">
 			<ul class="mui-table-view">
 				<li class="mui-table-view-cell">
@@ -131,27 +124,29 @@
 
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
 		mui('body').on('shown', '.mui-popover', function(e) {
 			//console.log('shown', e.detail.id);//detail为当前popover元素
 		});
 		mui('body').on('hidden', '.mui-popover', function(e) {
 			//console.log('hidden', e.detail.id);//detail为当前popover元素
 		});
-		var info = document.getElementById("info");
-		mui('body').on('tap','.mui-popover-action li>a',function () {
-			var a = this,parent;
+		var info = document.getElementById("info");
+		mui('body').on('tap', '.mui-popover-action li>a', function() {
+			var a = this,
+				parent;
 			//根据点击按钮，反推当前是哪个actionsheet
-			for(parent=a.parentNode;parent!=document.body;parent=parent.parentNode){
-				if(parent.classList.contains('mui-popover-action')){
+			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
+				if (parent.classList.contains('mui-popover-action')) {
 					break;
 				}
 			}
 			//关闭actionsheet
-			mui('#'+parent.id).popover('toggle');
-			info.innerHTML = "你刚点击了\""+a.innerHTML+"\"按钮";
+			mui('#' + parent.id).popover('toggle');
+			info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
 		})
 	</script>
 

examples/hello-mui/examples/ajax.html

@@ -8,19 +8,15 @@
 		<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>
-			header.mui-bar {
-				display: none;
-			}
-			.mui-bar-nav~.mui-content {
-				padding: 0;
-			}
-			.mui-content-padded {
+		 	.mui-content-padded {
 				padding: 10px;
 			}
-			body,
-			body .mui-content {
+			body,body .mui-content {
 				background-color: #fff !important;
 			}
 			code {
@@ -37,7 +33,7 @@
 	<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">AJAX</h1>
+			<h1 class="mui-title">ajax（网络请求）</h1>
 		</header>
 		<div class="mui-content">
 			<div class="mui-content-padded" style="padding-bottom: 50px;">
@@ -70,10 +66,11 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<script>
 			(function($) {
-				mui.init();
+				$.init({
+					swipeBack:true //启用右滑关闭功能
+				});
 				var methodEl = document.getElementById("method");
 				var dataTypeEl = document.getElementById("dataType");
 				var respnoseEl = document.getElementById("response");

examples/hello-mui/examples/badges.html

@@ -7,19 +7,11 @@
 		<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>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
 			h5 {
 				margin: 10px;
 			}
@@ -32,7 +24,7 @@
 	<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">数字角标（Badges）</h1>
+			<h1 class="mui-title">badge（数字角标）</h1>
 		</header>
 		<div class="mui-content">
 			<div class="mui-content-padded">
@@ -54,8 +46,9 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/buttons-with-badges.html

@@ -8,17 +8,11 @@
 		<meta name="apple-mobile-web-app-capable" content="yes">
 		<meta name="apple-mobile-web-app-status-bar-style" content="black">
 
-		<link rel="stylesheet" href="../css/mui.min.css">	
+		<!--标准mui.css-->
+		<link rel="stylesheet" href="../css/mui.min.css">
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
 		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
 			.mui-btn{
 		        margin-top: 10px;
 		        margin-right: 100px;
@@ -46,8 +40,9 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/buttons-with-block.html

@@ -8,17 +8,11 @@
 		<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>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
 			.mui-content-padded{
 			  	margin: 10px;
 			  }
@@ -48,8 +42,9 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/buttons-with-icons.html

@@ -8,17 +8,11 @@
 		<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>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
 			 .mui-btn{
 		        margin-top: 10px;
 		        margin-left: 10px;
@@ -69,8 +63,9 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/buttons.html

@@ -8,17 +8,11 @@
 		<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>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
 			input, button, .mui-btn {
 				margin-top: 10px;
 				margin-left: 10px;
@@ -29,7 +23,7 @@
 	<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">按钮（Button）</h1>
+			<h1 class="mui-title">普通按钮</h1>
 		</header>
 		<div class="mui-content">
 			<div class="mui-content-padded">
@@ -87,8 +81,9 @@
 		</div>
 		</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/checkbox.html

@@ -8,37 +8,29 @@
 		<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">
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
-		</style>
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
 	</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">复选框（checkbox）</h1>
+			<h1 class="mui-title">checkbox（复选框）</h1>
 		</header>
 		<div class="mui-content">
 			<h5 class="mui-content-padded">图标左对齐</h5>
 			<div class="mui-card">
 				<form class="mui-input-group">
 					<div class="mui-input-row mui-checkbox mui-left">
-						<label>checkbox</label>
-						<input name="checkbox" type="checkbox" >
+						<label>checked:false</label>
+						<input name="checkbox" value="Item 1" type="checkbox" >
 					</div>
 					<div class="mui-input-row mui-checkbox mui-left">
-						<label>checkbox</label>
-						<input name="checkbox" type="checkbox" checked>
+						<label>checked:true</label>
+						<input name="checkbox" value="Item 2" type="checkbox" checked>
 					</div>
-					<div class="mui-input-row mui-checkbox mui-left">
+					<div class="mui-input-row mui-checkbox mui-left mui-disabled">
 						<label>disabled checkbox</label>
 						<input name="checkbox" type="checkbox" disabled="disabled">
 					</div>
@@ -48,14 +40,14 @@
 			<div class="mui-card">
 				<form class="mui-input-group">
 					<div class="mui-input-row mui-checkbox">
-						<label>checkbox</label>
-						<input name="checkbox1" type="checkbox" >
+						<label>checked:false</label>
+						<input name="checkbox1" value="Item 3" type="checkbox" >
 					</div>
 					<div class="mui-input-row mui-checkbox">
-						<label>checkbox</label>
-						<input name="checkbox1" type="checkbox" checked>
+						<label>checked:true</label>
+						<input name="checkbox1" value="Item 4" type="checkbox" checked>
 					</div>
-					<div class="mui-input-row mui-checkbox">
+					<div class="mui-input-row mui-checkbox mui-disabled">
 						<label>disabled checkbox</label>
 						<input name="checkbox1" type="checkbox" disabled="disabled">
 					</div>
@@ -64,8 +56,13 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
+		mui('.mui-input-group').on('change', 'input', function() {
+			var value = this.checked?"true":"false";
+			this.previousElementSibling.innerText = "checked："+value;
+		});
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/dialog.html

 <!DOCTYPE html>
 <html>
-
 	<head>
 		<meta charset="utf-8">
 		<title>Hello MUI</title>
@@ -8,17 +7,11 @@
 		<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>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
 			.mui-btn{
 			  	display: block;
 			  	width: 120px;
@@ -34,7 +27,7 @@
 	<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">消息框（dialog）</h1>
+			<h1 class="mui-title">dialog（消息框）</h1>
 		</header>
 		<div class="mui-content">
 			<div class="mui-content-padded" style="margin: 5px;text-align: center;">
@@ -50,11 +43,11 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
-		<script>
-			mui.init();
-		</script>
 		<script type="text/javascript" charset="utf-8">
+			//mui初始化
+			mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
 			var info = document.getElementById("info");
 			  document.getElementById("alertBtn").addEventListener('tap',function(){
 			  	mui.alert('欢迎使用Hello MUI','Hello MUI',function(){

examples/hello-mui/examples/grid-default.html

@@ -8,18 +8,10 @@
 		<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">
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
-		</style>
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
 	</head>
 
 	<body>
@@ -61,8 +53,9 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/grid-pagination.html

@@ -8,17 +8,11 @@
 		<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>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
 			.mui-slider-indicator {
 				bottom: 0;
 			}
@@ -228,11 +222,8 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init({
-			swipeBack: false,
-		});
+		mui.init();
 		mui.ready(function() {
 			var slider = document.getElementById('Gallery');
 			var group = slider.querySelector('.mui-slider-group');

examples/hello-mui/examples/icons.html

@@ -8,19 +8,11 @@
 		<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>
-			html,
-			body {
-				background-color: #efeff4;
-			}
-			header.mui-bar {
-				display: none;
-			}
-			.mui-bar-nav~.mui-content {
-				padding: 0;
-			}
 			.flex-container {
 				display: -webkit-box;
 				display: -webkit-flex;
@@ -65,7 +57,7 @@
 	<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">Icons</h1>
+			<h1 class="mui-title">icon（图标）</h1>
 		</header>
 		<div class="mui-content">
 			<div class="mui-content-padded">
@@ -158,11 +150,10 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
-		<script>
-			mui.init();
-		</script>
 		<script type="text/javascript" charset="utf-8">
+			mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
 			var active = null,
 				lastid, span;
 			mui(".mui-content").on("tap", "a", function() {

examples/hello-mui/examples/info.html

@@ -8,14 +8,11 @@
 		<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>
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
 			p {
 				text-indent: 22px;
 				padding: 5px 8px;
@@ -51,7 +48,7 @@
 				</p>
 				<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
 				<h4>版本介绍</h4>
-				<p>当前版本为1.4.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
+				<p>当前版本为1.7.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>;
@@ -59,9 +56,10 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<script type="text/javascript" charset="utf-8">
-			mui.init();
+			mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
 			//处理点击事件，需要打开原生浏览器
 			mui('body').on('tap', 'a', function(e) {
 				var href = this.getAttribute('href');

examples/hello-mui/examples/input.html

@@ -8,11 +8,11 @@
 		<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>
-			html,body {
-				background-color: #efeff4;
-			}
 			h5 {
 				margin: 5px 7px;
 			}
@@ -20,6 +20,10 @@
 	</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">input（输入框）</h1>
+		</header>
 		<div class="mui-content">
 			<div class="mui-content-padded" style="margin: 5px;">
 				<h5>默认搜索框：</h5>
@@ -55,9 +59,10 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<script>
-			mui.init();
+			mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
 			 //语音识别完成事件
 			document.getElementById("search").addEventListener('recognized', function(e) {
 				console.log(e.detail.value);

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

+<!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"/>
+	</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>
+		<div class="mui-content">
+			<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/list-triplex-row.html

@@ -8,17 +8,11 @@
 		<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>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
 			.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
 		        margin-top: 0;
 		    }
@@ -113,8 +107,9 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/list-with-input.html

@@ -8,18 +8,10 @@
 		<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">
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
-		</style>
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
 	</head>
 	<body>
 		<header class="mui-bar mui-bar-nav">
@@ -76,8 +68,24 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
+		
+		//圆角列表开关处理
+		document.getElementById("M_Toggle").addEventListener('toggle',function (e) {
+			var isActive = e.detail.isActive;
+			var table = document.querySelector('.mui-table-view');
+			var card = document.querySelector('.mui-card');
+			if (isActive) {
+				card.appendChild(table);
+				card.style.display = '';
+			} else {
+				var content = document.querySelector('.mui-content');
+				content.insertBefore(table, card);
+				card.style.display = 'none';
+			}
+		});
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/locker-dom.html

+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="UTF-8">
+		<title>手势锁屏示例</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>
+			html,
+			body {
+				width: 100%;
+				height: 100%;
+				margin: 0px;
+				padding: 0px;
+				overflow: hidden;
+				background-color: #efeff4;
+			}
+			#holder {
+				width: 300px;
+				height: 300px;
+				border: solid 1px #bbb;
+				border-radius: 5px;
+				margin: 50px auto;
+				background-color: #fff;
+			}
+			#alert {
+				text-align: center;
+				padding: 20px 10px;
+			}
+		</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">locker（手势图案锁屏）</h1>
+		</header>
+		<div class="mui-content">
+			<div id='holder' class="mui-locker" data-locker-options='{"ringColor":"rgba(210,210,210,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}' data-locker-width='300' data-locker-height='300'></div>
+			<div id='alert'></div>
+		</div>
+
+		<script src="../js/mui.min.js"></script>
+		<script src="../js/mui.locker.js"></script>
+		<script>
+			(function($, doc) {
+				$.init();
+				var holder = doc.querySelector('#holder'),
+					alert = doc.querySelector('#alert'),
+					record = [];
+				//处理事件
+				holder.addEventListener('done', function(event) {
+					var rs = event.detail;
+					if (rs.points.length < 4) {
+						alert.innerText = '设定的手势太简单了';
+						record = [];
+						rs.sender.clear();
+						return;
+					}
+					console.log(rs.points.join(''));
+					record.push(rs.points.join(''));
+					if (record.length >= 2) {
+						if (record[0] == record[1]) {
+							alert.innerText = '手势设定完成';
+						} else {
+							alert.innerText = '两次手势设定不一致';
+						}
+						rs.sender.clear();
+						record = [];
+					} else {
+						alert.innerText = '请确认手势设定';
+						rs.sender.clear();
+					}
+				});
+			}(mui, document));
+		</script>
+	</body>
+
+</html>
\ No newline at end of file

examples/hello-mui/examples/media-list.html

@@ -8,18 +8,11 @@
 		<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>
-			html,
-			body {
-				background-color: #efeff4;
-			}
-			header.mui-bar {
-				display: none;
-			}
-			.mui-bar-nav~.mui-content {
-				padding: 0;
-			}
 			.title {
 				margin: 20px 15px 10px;
 				color: #6d6d72;
@@ -31,7 +24,7 @@
 	<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">media list（图文列表）</h1>
 		</header>
 		<div class="mui-content">
 			<!--<ul class="mui-table-view mui-unfold">
@@ -219,8 +212,9 @@
 
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/modals.html

@@ -10,14 +10,15 @@
 
 		<link rel="stylesheet" href="../css/mui.min.css">
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<style>
 			html,body {
 				background-color: #efeff4;
 			}
 		</style>
 		<script>
-			mui.init();
+			mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
 		</script>
 	</head>
 	<body>

examples/hello-mui/examples/nav.html

@@ -10,127 +10,126 @@
 
 		<link rel="stylesheet" href="../css/mui.min.css">
 		<style>
-			html,body {
+			html,
+			body {
 				background-color: #efeff4;
 			}
-			.mui-bar .mui-pull-left .mui-icon{
+			.mui-bar .mui-pull-left .mui-icon {
 				padding-right: 5px;
 				font-size: 28px;
 			}
-			.mui-bar .mui-btn{
+			.mui-bar .mui-btn {
 				font-weight: normal;
 				font-size: 17px;
 			}
-			.mui-bar .mui-btn-link{
+			.mui-bar .mui-btn-link {
 				top: 1px;
 			}
 		</style>
 	</head>
+
 	<body>
 
-	<header id="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">
-		<p style="margin: 35px 15px;">这是nav bar（顶部导航栏）演示页面，
-			你可以在顶部导航中放置多种控件，点击如下单选框切换导航栏显示内容；</p>
-		<h5 class="mui-content-padded">左侧显示内容</h5>
-		<form class="mui-input-group">
-			<div class="mui-input-row mui-radio">
-				<label>不显示</label>
-				<input name="style" type="radio" value="left-none">
-			</div>
-			<div class="mui-input-row mui-radio">
-				<label>仅图标</label>
-				<input name="style" type="radio" checked value="left-icon">
-			</div>
-			<div class="mui-input-row mui-radio">
-				<label>图标加文字按钮</label>
-				<input name="style" type="radio" value="left-btn">
-			</div>
-		</form>
-		<h5 class="mui-content-padded" style="margin-top: 35px;">右侧显示内容</h5>
-		<form class="mui-input-group" style="margin-bottom: 15px;">
-			<div class="mui-input-row mui-radio">
-				<label>不显示</label>
-				<input name="style" type="radio" checked="" value="right-none">
-			</div>
-			<div class="mui-input-row mui-radio">
-				<label>仅图标</label>
-				<input name="style" type="radio" value="right-icon">
-			</div>
-			<div class="mui-input-row mui-radio">
-				<label>文字按钮</label>
-				<input name="style" type="radio" value="right-btn">
-			</div>
-		</form>
-	</div>
-	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
-	<script type="text/javascript">
-		mui.init();
-		var header = document.getElementById("header");
-		//左侧icon
-		var lefticon = document.createElement('a');
-		lefticon.className ='mui-action-back mui-icon mui-icon-left-nav mui-pull-left';
-		//左侧图标+文字按钮
-		var leftbtn = document.createElement('button');
-		leftbtn.className ='mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left';
-		
-		var span = document.createElement('span');
-		span.className = 'mui-icon mui-icon-left-nav';
-		leftbtn.appendChild(span);
-		var text = document.createTextNode('首页');
-		leftbtn.appendChild(text);
-		
-		//右侧icon
-		var righticon = document.createElement('a');
-		righticon.className ='mui-icon mui-icon-bars mui-pull-right';
-		//右侧文字按钮
-		var rightbtn = document.createElement('button');
-		rightbtn.className ='mui-btn mui-btn-blue mui-btn-link mui-pull-right';
-		rightbtn.innerText = '编辑';
-		
-		//删除原先存在的节点
-		function remove(selector){
-			var elem = header.querySelector(selector);
-			if(elem){
-				header.removeChild(elem);
-			}
-		}
-		
-		
-		mui('.mui-input-group').on('change','input',function () {
-			if(this.checked){
-				switch (this.value){
-					case 'left-none':
-						remove('.mui-pull-left')
-						break;
-					case 'left-icon':
-						remove('.mui-pull-left');
-						header.appendChild(lefticon);
-						break;
-					case 'left-btn':
-						remove('.mui-pull-left');
-						header.appendChild(leftbtn);
-						break;
-					case 'right-none':
-						remove('.mui-pull-right');
-						break;
-					case 'right-icon':
-						remove('.mui-pull-right')
-						header.appendChild(righticon);
-						break;
-					case 'right-btn':
-						remove('.mui-pull-right');
-						header.appendChild(rightbtn);
-						break;
+		<header id="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">
+			<p style="margin: 35px 15px;">这是nav bar（顶部导航栏）演示页面， 你可以在顶部导航中放置多种控件，点击如下单选框切换导航栏显示内容；
+			</p>
+			<h5 class="mui-content-padded">左侧显示内容</h5>
+			<form class="mui-input-group">
+				<div class="mui-input-row mui-radio">
+					<label>不显示</label>
+					<input name="style" type="radio" value="left-none">
+				</div>
+				<div class="mui-input-row mui-radio">
+					<label>仅图标</label>
+					<input name="style" type="radio" checked value="left-icon">
+				</div>
+				<div class="mui-input-row mui-radio">
+					<label>图标加文字按钮</label>
+					<input name="style" type="radio" value="left-btn">
+				</div>
+			</form>
+			<h5 class="mui-content-padded" style="margin-top: 35px;">右侧显示内容</h5>
+			<form class="mui-input-group" style="margin-bottom: 15px;">
+				<div class="mui-input-row mui-radio">
+					<label>不显示</label>
+					<input name="style" type="radio" checked="" value="right-none">
+				</div>
+				<div class="mui-input-row mui-radio">
+					<label>仅图标</label>
+					<input name="style" type="radio" value="right-icon">
+				</div>
+				<div class="mui-input-row mui-radio">
+					<label>文字按钮</label>
+					<input name="style" type="radio" value="right-btn">
+				</div>
+			</form>
+		</div>
+		<script src="../js/mui.min.js"></script>
+		<script type="text/javascript">
+			mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
+			var header = document.getElementById("header");
+			 //左侧icon
+			var lefticon = document.createElement('a');
+			lefticon.className = 'mui-action-back mui-icon mui-icon-left-nav mui-pull-left';
+			 //左侧图标+文字按钮
+			var leftbtn = document.createElement('button');
+			leftbtn.className = 'mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left';
+			var span = document.createElement('span');
+			span.className = 'mui-icon mui-icon-left-nav';
+			leftbtn.appendChild(span);
+			var text = document.createTextNode('首页');
+			leftbtn.appendChild(text);
+			 //右侧icon
+			var righticon = document.createElement('a');
+			righticon.className = 'mui-icon mui-icon-bars mui-pull-right';
+			 //右侧文字按钮
+			var rightbtn = document.createElement('button');
+			rightbtn.className = 'mui-btn mui-btn-blue mui-btn-link mui-pull-right';
+			rightbtn.innerText = '编辑';
+			 //删除原先存在的节点
+			function remove(selector) {
+				var elem = header.querySelector(selector);
+				if (elem) {
+					header.removeChild(elem);
 				}
 			}
-		});
-	</script>
-	
+			mui('.mui-input-group').on('change', 'input', function() {
+				if (this.checked) {
+					switch (this.value) {
+						case 'left-none':
+							remove('.mui-pull-left')
+							break;
+						case 'left-icon':
+							remove('.mui-pull-left');
+							header.appendChild(lefticon);
+							break;
+						case 'left-btn':
+							remove('.mui-pull-left');
+							header.appendChild(leftbtn);
+							break;
+						case 'right-none':
+							remove('.mui-pull-right');
+							break;
+						case 'right-icon':
+							remove('.mui-pull-right')
+							header.appendChild(righticon);
+							break;
+						case 'right-btn':
+							remove('.mui-pull-right');
+							header.appendChild(rightbtn);
+							break;
+					}
+				}
+			});
+		</script>
+
 	</body>
+
 </html>
\ No newline at end of file

examples/hello-mui/examples/numbox.html

+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="utf-8">
+		<title>数字输入框</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>
+			html,
+			body,
+			.mui-content {
+				height: 0px;
+				margin: 0px;
+				background-color: #efeff4;
+			}
+			h5.mui-content-padded {
+				margin-left: 0px !important;
+				margin-top: 20px !important;
+			}
+			.mui-card {
+				margin: 0px;
+			}
+		</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">number box（数字输入框）</h1>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded">
+				<h5 class="mui-content-padded">默认</h5>
+				<div class="mui-numbox">
+					<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
+					<input class="mui-numbox-input" type="number" />
+					<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
+				</div>
+				<h5 class="mui-content-padded">限定最小值和最大值(1~9)</h5>
+				<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
+					<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
+					<input class="mui-numbox-input" type="number" value="5" />
+					<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
+				</div>
+				<h5 class="mui-content-padded">设定步长值(步长 10)</h5>
+				<div class="mui-numbox" data-numbox-step='10' data-numbox-min='10' data-numbox-max='90'>
+					<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
+					<input class="mui-numbox-input" type="number" />
+					<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
+				</div>
+				<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" />
+					<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
+				</div>
+				<button id="getValue" 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>
+					<input class="mui-numbox-input" type="number" />
+					<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
+				</div>
+				<h5 class="mui-content-padded">在表单中</h5>
+				<div class="mui-card">
+					<form class="mui-input-group">
+						<div class="mui-input-row">
+							<label>数字框一</label>
+							<div class="mui-numbox">
+								<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
+								<input class="mui-numbox-input" type="number" />
+								<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
+							</div>
+						</div>
+						<div class="mui-input-row">
+							<label>数字框二</label>
+							<div class="mui-numbox">
+								<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
+								<input class="mui-numbox-input" type="number" />
+								<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
+							</div>
+						</div>
+					</form>
+				</div>
+				<h5 class="mui-content-padded">通过样式定义大小(220x60)</h5>
+				<div class="mui-numbox" style="width: 220px;height: 60px;">
+					<button class="mui-numbox-btn-minus" type="button">-</button>
+					<input class="mui-numbox-input" type="number" />
+					<button class="mui-numbox-btn-plus" type="button">+</button>
+				</div>
+				<br/>
+				<br />
+			</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>
+	</body>
+
+</html>
\ No newline at end of file

examples/hello-mui/examples/oa-grid.html

@@ -10,7 +10,6 @@
 
 		<link rel="stylesheet" href="../css/mui.min.css">
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<style>
 			html,body {
 				background-color: #efeff4;
@@ -23,7 +22,9 @@
 			}
 		</style>
 		<script>
-			mui.init();
+			mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
 		</script>
 	</head>
 

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

@@ -69,7 +69,6 @@
 			</form>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<script>
 			var main,menu, mask = mui.createMask(_closeMenu);
 			var showMenu = false,

examples/hello-mui/examples/offcanvas-drag-left-plus-menu.html

@@ -75,11 +75,8 @@
 				</ul>
 		</div>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script type="text/javascript" charset="utf-8">
-		mui.init({
-			swipeBack:false,
-		});
+		mui.init();
 		var main = null;
 		mui.plusReady(function () {
 			main = plus.webview.currentWebview().opener();

examples/hello-mui/examples/offcanvas-drag-left.html

@@ -148,7 +148,6 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<script>
 			mui.init({
 				swipeBack: false,
@@ -163,9 +162,9 @@
 			//Android暂不支持整体移动动画
 			if(!mui.os.android){
 				document.getElementById("move-togger").classList.remove('mui-hidden');
-				var spans = document.querySelectorAll('.android-only');
-				for (var i=0,len=spans.length;i<len;i++) {
-					spans[i].style.display = "none";
+				var spans = document.querySelectorAll('.android-only');
+				for (var i=0,len=spans.length;i<len;i++) {
+					spans[i].style.display = "none";
 				}
 			}
 			
@@ -202,11 +201,11 @@
 			});
 
 
-			document.getElementById('offCanvasShow').addEventListener('tap', function() {
-				offCanvasWrapper.offCanvas('show');
-			});
-			document.getElementById('offCanvasHide').addEventListener('tap', function() {
-				offCanvasWrapper.offCanvas('close');
+			document.getElementById('offCanvasShow').addEventListener('tap', function() {
+				offCanvasWrapper.offCanvas('show');
+			});
+			document.getElementById('offCanvasHide').addEventListener('tap', function() {
+				offCanvasWrapper.offCanvas('close');
 			});
 			//主界面和侧滑菜单界面均支持区域滚动；
 			mui('#offCanvasSideScroll').scroll();

examples/hello-mui/examples/offcanvas-drag-right-plus-menu.html

@@ -86,16 +86,12 @@
 				</ul>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<script type="text/javascript" charset="utf-8">
-			mui.init({
-				swipeBack:false
-			});
+			mui.init();
 			//获得侧滑主窗口webview对象
 			var main = null;
 			mui.plusReady(function () {
 				main = plus.webview.currentWebview().opener();
-				
 			})
 			function closeMenu () {
 				mui.fire(main,"menu:swipeleft");

examples/hello-mui/examples/offcanvas-drag-right.html

@@ -147,11 +147,8 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<script>
-			mui.init({
-				swipeBack: false,
-			});
+			mui.init();
 			//侧滑容器父节点
 			var offCanvasWrapper = mui('#offCanvasWrapper');
 			//主界面容器

examples/hello-mui/examples/pagination.html

@@ -8,21 +8,17 @@
 		<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">
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding-top: 0;
-			}
-		</style>
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
 	</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">pagination（分页）</h1>
+		</header>
 		<div class="mui-content">
 			<h5 class="mui-content-padded">分页(默认尺寸)</h5>
 			<div class="mui-content-padded">
@@ -189,11 +185,10 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
-		<script type="text/javascript">
-			mui.init();
-		</script>
 		<script>
+			mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
 			(function($) {
 				$('.mui-pagination').on('tap', 'a', function() {
 					var li = this.parentNode;

examples/hello-mui/examples/popovers.html

@@ -8,14 +8,19 @@
 		<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>
-			html,
-			body {
-				background-color: #efeff4;
-			}
 			/*跨webview需要手动指定位置*/
 			
+			header.mui-bar {
+				display: none!important;
+			}
+			.mui-bar-nav~.mui-content {
+				padding: 0!important;
+			}
 			#topPopover {
 				position: fixed;
 				top: 16px;
@@ -44,9 +49,14 @@
 	</head>
 
 	<body>
-		<header class="mui-bar mui-bar-footer">
-			<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>
+		<header class="mui-bar mui-bar-nav">
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+			<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
+			<h1 class="mui-title">popover（弹出菜单）</h1>
 		</header>
+		<footer class="mui-bar mui-bar-footer">
+			<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>
+		</footer>
 		<div class="mui-content">
 			<div class="mui-content-padded">
 				<p>popover（弹出菜单是）mobile App中常见的UI组件，在用户点击位置附近弹出悬浮菜单，向用户展示更多信息或提供快捷操作。</p>
@@ -156,9 +166,10 @@
 
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<script>
-			mui.init();
+			mui.init({
+				swipeBack: true //启用右滑关闭功能
+			});
 			mui('.mui-scroll-wrapper').scroll();
 			mui('body').on('shown', '.mui-popover', function(e) {
 				//console.log('shown', e.detail.id);//detail为当前popover元素

examples/hello-mui/examples/pullrefresh.html

@@ -28,10 +28,8 @@
 			</div>
 		</div>
 		<script src="../js/mui.min.js"></script>
-		<script src="../js/app.js"></script>
 		<script>
 			mui.init({
-				swipeBack: false,
 				pullRefresh: {
 					container: '#pullrefresh',
 					down: {

examples/hello-mui/examples/radio.html

@@ -8,18 +8,10 @@
 		<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">
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
-		</style>
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
 	</head>
 
 	<body>
@@ -40,7 +32,7 @@
 						<label>radio</label>
 						<input name="radio1" type="radio" checked>
 					</div>
-					<div class="mui-input-row mui-radio mui-left">
+					<div class="mui-input-row mui-radio mui-left mui-disabled">
 						<label>disabled radio</label>
 						<input name="radio1" type="radio" disabled="disabled">
 					</div>
@@ -58,17 +50,44 @@
 						<label>radio</label>
 						<input name="radio1" type="radio" checked>
 					</div>
-					<div class="mui-input-row mui-radio">
+					<div class="mui-input-row mui-radio mui-disabled">
 						<label>disabled radio</label>
 						<input name="radio1" type="radio" disabled="disabled">
 					</div>
 				</form>
 			</div>
+			<h5 class="mui-content-padded">列表模式的单选框</h5>
+			<ul class="mui-table-view mui-table-view-radio">
+				<li class="mui-table-view-cell">
+					<a class="mui-navigate-right">
+						Item 1
+					</a>
+				</li>
+				<li class="mui-table-view-cell mui-selected">
+					<a class="mui-navigate-right">
+						Item 2
+					</a>
+				</li>
+				<li class="mui-table-view-cell">
+					<a class="mui-navigate-right">
+						Item 3
+					</a>
+				</li>
+			</ul>
+			<div class="mui-content-padded">
+				<p id="info"></p>
+			</div>
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
+		var info = document.getElementById("info");
+		document.querySelector('.mui-table-view.mui-table-view-radio').addEventListener('selected',function(e){
+			info.innerHTML = "当前选中的为："+e.detail.el.innerText;
+		});
+		
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/range.html

@@ -8,17 +8,12 @@
 		<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>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
+			
 			 h5{
 		        padding-top: 15px;
 		    }
@@ -69,9 +64,10 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+				swipeBack:true //启用右滑关闭功能
+			});
 	    //监听input事件，获取range的value值，也可以直接element.value获取该range的值
 	    var rangeList = document.querySelectorAll('input[type="range"]');
 	    for(var i=0,len=rangeList.length;i<len;i++){

examples/hello-mui/examples/slider-table-default.html

@@ -8,17 +8,11 @@
 		<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>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
 			h5{
 		        padding-top: 8px;
 		        padding-bottom: 8px;
@@ -60,8 +54,9 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-		mui.init();
+		mui.init({
+			swipeBack:true //启用右滑关闭功能
+		});
 	</script>
 </html>
\ No newline at end of file

examples/hello-mui/examples/slider-table-pagination.html

@@ -8,18 +8,10 @@
 		<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">
-		<style>
-			html,body {
-				background-color: #efeff4;
-			}
-			header.mui-bar{
-				display: none;
-			}
-			.mui-bar-nav~.mui-content{
-				padding: 0;
-			}
-		</style>
+		<!--App自定义的css-->
+		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
 	</head>
 
 	<body>
@@ -76,10 +68,7 @@
 		</div>
 	</body>
 	<script src="../js/mui.min.js"></script>
-	<script src="../js/app.js"></script>
 	<script>
-	    mui.init({
-	    		swipeBack : false
-	    });
+	    mui.init();
 	</script>
 </html>
\ No newline at end of file