Skip to content

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

调整hello mui中的js文件引用顺序

parent c2ccb8fd
Show whitespace changes
Inline Side-by-side
Showing with 1445 additions and 1588 deletions
examples/hello-mui/examples/accordion.html
View file @ 37979d3e
...@@ -9,8 +9,7 @@ ...@@ -9,8 +9,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -22,18 +21,14 @@ ...@@ -22,18 +21,14 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head>
</head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">折叠面板</h1> <h1 class="mui-title">折叠面板</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-card"> <div class="mui-card">
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse"> <li class="mui-table-view-cell mui-collapse">
...@@ -127,8 +122,12 @@ ...@@ -127,8 +122,12 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script>
</body> <script src="../js/app.js"></script>
<script>
mui.init();
</script>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/actionsheet-plus.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -42,9 +40,6 @@ ...@@ -42,9 +40,6 @@
color: #8f8f94; color: #8f8f94;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -72,21 +67,19 @@ ...@@ -72,21 +67,19 @@
<li>支持跨webview的遮罩</li> <li>支持跨webview的遮罩</li>
<li>在有map等原生组件时，依然会显示在最顶层，不会被遮挡</li> <li>在有map等原生组件时，依然会显示在最顶层，不会被遮挡</li>
</ul> </ul>
<p>另一方面，原生模式的actionsheet目前暂不支持样式自定义</p> <p>另一方面，原生模式的actionsheet目前不支持自定义样式</p>
<p> <p>
<a id="picture-btn" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a> <a id="picture-btn" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>
</p> </p>
</div> </div>
</div> </div>
<p id="info"></p> <p id="info"></p>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
mui.init();
mui('body').on('shown', '.mui-popover', function(e) { mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素 //console.log('shown', e.detail.id);//detail为当前popover元素
}); });
......
examples/hello-mui/examples/actionsheet.html
View file @ 37979d3e
...@@ -7,10 +7,7 @@ ...@@ -7,10 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <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-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -42,9 +39,6 @@ ...@@ -42,9 +39,6 @@
color: #8f8f94; color: #8f8f94;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -136,7 +130,10 @@ ...@@ -136,7 +130,10 @@
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
mui.init();
mui('body').on('shown', '.mui-popover', function(e) { mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素 //console.log('shown', e.detail.id);//detail为当前popover元素
}); });
......
examples/hello-mui/examples/ajax.html
View file @ 37979d3e
...@@ -9,12 +9,7 @@ ...@@ -9,12 +9,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body {
background-color: #efeff4;
}
header.mui-bar{ header.mui-bar{
display: none; display: none;
} }
...@@ -24,15 +19,6 @@ ...@@ -24,15 +19,6 @@
.mui-content-padded{ .mui-content-padded{
padding: 10px; padding: 10px;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
body,body .mui-content{ body,body .mui-content{
background-color: #fff !important; background-color: #fff !important;
} }
...@@ -44,13 +30,15 @@ ...@@ -44,13 +30,15 @@
background-color: #f9f2f4; background-color: #f9f2f4;
border-radius: 4px; border-radius: 4px;
} }
</style> </style>
<header class="mui-bar mui-bar-nav"> </head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <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> </header>
<div class="mui-content" > <div class="mui-content" >
<div class="mui-content-padded" style="padding-bottom: 50px;"> <div class="mui-content-padded" style="padding-bottom: 50px;">
<p style="text-indent: 22px;"> <p style="text-indent: 22px;">
mui基于html5plus的<a href="http://www.dcloud.io/docs/api/zh_cn/xhr.shtml">XMLHttpRequest</a>，封装了常用的ajax函数，支持Get、Post请求方式， 支持返回json、xml、html、text、script数据类型；本示例使用<a href="http://www.oschina.net/question/82993_78609">RunJS</a>的Echo Ajax功能演示网络请求。 mui基于html5plus的<a href="http://www.dcloud.io/docs/api/zh_cn/xhr.shtml">XMLHttpRequest</a>，封装了常用的ajax函数，支持Get、Post请求方式， 支持返回json、xml、html、text、script数据类型；本示例使用<a href="http://www.oschina.net/question/82993_78609">RunJS</a>的Echo Ajax功能演示网络请求。
...@@ -79,9 +67,12 @@ ...@@ -79,9 +67,12 @@
<h4 class="mui-content-padded">获得响应：</h4> <h4 class="mui-content-padded">获得响应：</h4>
<code id="response" ></code> <code id="response" ></code>
</div> </div>
</div> </div>
<script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
(function($) { (function($) {
mui.init();
var methodEl = document.getElementById("method"); var methodEl = document.getElementById("method");
var dataTypeEl = document.getElementById("dataType"); var dataTypeEl = document.getElementById("dataType");
var respnoseEl = document.getElementById("response"); var respnoseEl = document.getElementById("response");
...@@ -137,7 +128,6 @@ ...@@ -137,7 +128,6 @@
} }
}); });
})(mui); })(mui);
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/badges.html
View file @ 37979d3e
...@@ -9,8 +9,7 @@ ...@@ -9,8 +9,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -21,27 +20,21 @@ ...@@ -21,27 +20,21 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
h5 { h5 {
margin: 10px; margin: 10px;
} }
.mui-badge { .mui-badge {
margin: 10px; margin: 10px;
} }
</style> </style>
<header class="mui-bar mui-bar-nav"> </head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <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">数字角标（Badges）</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h5>有底色</h5> <h5>有底色</h5>
<span class="mui-badge">1</span> <span class="mui-badge">1</span>
...@@ -58,7 +51,11 @@ ...@@ -58,7 +51,11 @@
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span> <span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span> <span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
</div> </div>
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-badges.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -21,26 +19,21 @@ ...@@ -21,26 +19,21 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-btn{ .mui-btn{
margin-top: 10px; margin-top: 10px;
margin-right: 100px; margin-right: 100px;
margin-left: 10px; margin-left: 10px;
} }
</style> </style>
<header class="mui-bar mui-bar-nav">
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">带数字的按钮</h1> <h1 class="mui-title">带数字的按钮</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<button type="button" class="mui-btn">Badge button <span class="mui-badge">1</span></button> <button type="button" class="mui-btn">Badge button <span class="mui-badge">1</span></button>
<button type="button" class="mui-btn mui-btn-primary">Badge button <span class="mui-badge mui-badge-primary">2</span></button> <button type="button" class="mui-btn mui-btn-primary">Badge button <span class="mui-badge mui-badge-primary">2</span></button>
...@@ -50,7 +43,11 @@ ...@@ -50,7 +43,11 @@
<button type="button" class="mui-btn mui-btn-royal">Badge button <span class="mui-badge mui-badge-royal">999</span></button> <button type="button" class="mui-btn mui-btn-royal">Badge button <span class="mui-badge mui-badge-royal">999</span></button>
</div> </div>
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-block.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -21,19 +19,18 @@ ...@@ -21,19 +19,18 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
.mui-content-padded{
margin: 10px;
}
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">块级按钮</h1> <h1 class="mui-title">块级按钮</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<button type="button" class="mui-btn mui-btn-block">Block button</button> <button type="button" class="mui-btn mui-btn-block">Block button</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block">Block button</button> <button type="button" class="mui-btn mui-btn-primary mui-btn-block">Block button</button>
...@@ -48,12 +45,11 @@ ...@@ -48,12 +45,11 @@
<button type="button" class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined">Block button</button> <button type="button" class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined">Block button</button>
<button type="button" class="mui-btn mui-btn-royal mui-btn-block mui-btn-outlined">Block button</button> <button type="button" class="mui-btn mui-btn-royal mui-btn-block mui-btn-outlined">Block button</button>
</div> </div>
</div> </div>
<style type="text/css"> </body>
.mui-content-padded{ <script src="../js/mui.min.js"></script>
margin: 10px; <script src="../js/app.js"></script>
} <script>
</style> mui.init();
</body> </script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-icons.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -21,25 +19,19 @@ ...@@ -21,25 +19,19 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-btn{ .mui-btn{
margin-top: 10px; margin-top: 10px;
margin-left: 10px; margin-left: 10px;
} }
</style> </style>
<header class="mui-bar mui-bar-nav"> </head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">带图标按钮</h1> <h1 class="mui-title">带图标按钮</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h5>图标居左：</h5> <h5>图标居左：</h5>
<button type="button" class="mui-btn mui-icon mui-icon-home"> <button type="button" class="mui-btn mui-icon mui-icon-home">
...@@ -74,8 +66,11 @@ ...@@ -74,8 +66,11 @@
<span class="mui-icon mui-icon-forward"></span> <span class="mui-icon mui-icon-forward"></span>
</button> </button>
</div> </div>
</div> </div>
</body>
</body> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/buttons.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -21,25 +19,19 @@ ...@@ -21,25 +19,19 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
input, button, .mui-btn { input, button, .mui-btn {
margin-top: 10px; margin-top: 10px;
margin-left: 10px; margin-left: 10px;
} }
</style> </style>
<header class="mui-bar mui-bar-nav"> </head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <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">按钮（Button）</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h5>有底色按钮：</h5> <h5>有底色按钮：</h5>
<button type="button" class="mui-btn"> <button type="button" class="mui-btn">
...@@ -92,7 +84,11 @@ ...@@ -92,7 +84,11 @@
<button type="button" >按钮</button> <button type="button" >按钮</button>
</div> </div>
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/checkbox.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -22,18 +20,13 @@ ...@@ -22,18 +20,13 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <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> </header>
<div class="mui-content"> <div class="mui-content">
<h5 class="mui-content-padded">图标左对齐</h5> <h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card"> <div class="mui-card">
<form class="mui-input-group"> <form class="mui-input-group">
...@@ -68,8 +61,11 @@ ...@@ -68,8 +61,11 @@
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</body>
</body> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/dialog.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -30,9 +28,7 @@ ...@@ -30,9 +28,7 @@
padding: 20px 10px ; padding: 20px 10px ;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -53,6 +49,11 @@ ...@@ -53,6 +49,11 @@
</div> </div>
</div> </div>
</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"> <script type="text/javascript" charset="utf-8">
var info = document.getElementById("info"); var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap',function(){ document.getElementById("alertBtn").addEventListener('tap',function(){
......
examples/hello-mui/examples/grid-default.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -22,18 +20,15 @@ ...@@ -22,18 +20,15 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">9宫格默认样式</h1> <h1 class="mui-title">9宫格默认样式</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9"> <ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-home"></span> <span class="mui-icon mui-icon-home"></span>
...@@ -63,8 +58,11 @@ ...@@ -63,8 +58,11 @@
<span class="mui-icon mui-icon-more"></span> <span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div></a></li> <div class="mui-media-body">more</div></a></li>
</ul> </ul>
</div>
</div> </body>
</body> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/grid-pagination.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -21,27 +19,20 @@ ...@@ -21,27 +19,20 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-slider-indicator { .mui-slider-indicator {
bottom: 0; bottom: 0;
} }
.mui-slider { .mui-slider {
background-color: #f2f2f2; background-color: #f2f2f2;
} }
</style> </style>
<header class="mui-bar mui-bar-nav"> </head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">左右拖动分页9宫</h1> <h1 class="mui-title">左右拖动分页9宫</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
循环 循环
...@@ -234,8 +225,11 @@ ...@@ -234,8 +225,11 @@
<div class="mui-indicator"></div> <div class="mui-indicator"></div>
</div> </div>
</div> </div>
</div> </div>
<script> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({ mui.init({
swipeBack: false, swipeBack: false,
}); });
...@@ -271,8 +265,5 @@ ...@@ -271,8 +265,5 @@
toggleLoop(loop); toggleLoop(loop);
}); });
}); });
</script> </script>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/icons.html
View file @ 37979d3e
...@@ -9,8 +9,7 @@ ...@@ -9,8 +9,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -22,15 +21,6 @@ ...@@ -22,15 +21,6 @@
.mui-bar-nav~.mui-content { .mui-bar-nav~.mui-content {
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.flex-container { .flex-container {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -70,6 +60,9 @@ ...@@ -70,6 +60,9 @@
color: #007aff; color: #007aff;
} }
</style> </style>
</head>
<body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <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">Icons</h1>
...@@ -162,10 +155,13 @@ ...@@ -162,10 +155,13 @@
<a><span class="mui-icon mui-icon-pulldown"></span></a> <a><span class="mui-icon mui-icon-pulldown"></span></a>
</div> </div>
</div> </div>
</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"> <script type="text/javascript" charset="utf-8">
var active = null, var active = null,
lastid, span; lastid, span;
...@@ -198,7 +194,5 @@ ...@@ -198,7 +194,5 @@
lastid = id; lastid = id;
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/info.html
View file @ 37979d3e
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
</p> </p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p> <p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4> <h4>版本介绍</h4>
<p>当前版本为1.1.1，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p> <p>当前版本为1.2.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<h4>License</h4> <h4>License</h4>
<p> <p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>; mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
examples/hello-mui/examples/input.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -56,6 +54,8 @@ ...@@ -56,6 +54,8 @@
</div> </div>
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
mui.init(); mui.init();
//语音识别完成事件 //语音识别完成事件
......
examples/hello-mui/examples/list-triplex-row.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -38,9 +36,6 @@ ...@@ -38,9 +36,6 @@
color:#f14e41; color:#f14e41;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -117,4 +112,9 @@ ...@@ -117,4 +112,9 @@
</ul> </ul>
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/list-with-input.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -22,18 +20,13 @@ ...@@ -22,18 +20,13 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">列表带input类控件</h1> <h1 class="mui-title">列表带input类控件</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-card"> <div class="mui-card">
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
...@@ -80,8 +73,11 @@ ...@@ -80,8 +73,11 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</body>
</body> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/media-list.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -28,9 +26,6 @@ ...@@ -28,9 +26,6 @@
font-size: 15px; font-size: 15px;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -223,5 +218,9 @@ ...@@ -223,5 +218,9 @@
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/nav.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -69,7 +67,8 @@ ...@@ -69,7 +67,8 @@
</div> </div>
</form> </form>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript"> <script type="text/javascript">
mui.init(); mui.init();
var header = document.getElementById("header"); var header = document.getElementById("header");
......
examples/hello-mui/examples/offcanvas-drag-left-plus-main.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -70,6 +68,8 @@ ...@@ -70,6 +68,8 @@
</div> </div>
</form> </form>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
var main,menu, mask = mui.createMask(closeMenu); var main,menu, mask = mui.createMask(closeMenu);
var showMenu = false, var showMenu = false,
...@@ -283,7 +283,5 @@ ...@@ -283,7 +283,5 @@
} }
} }
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-left-plus-menu.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
body,.mui-content { body,.mui-content {
background-color: #333; background-color: #333;
...@@ -36,9 +34,6 @@ ...@@ -36,9 +34,6 @@
margin-bottom: 35px; margin-bottom: 35px;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -79,8 +74,9 @@ ...@@ -79,8 +74,9 @@
</li> </li>
</ul> </ul>
</div> </div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8"> <script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({ mui.init({
swipeBack:false, swipeBack:false,
}); });
...@@ -99,7 +95,7 @@ ...@@ -99,7 +95,7 @@
document.getElementById("close-btn").addEventListener('tap',closeMenu); document.getElementById("close-btn").addEventListener('tap',closeMenu);
mui.menu = closeMenu; mui.menu = closeMenu;
mui.back = closeMenu; mui.back = closeMenu;
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-left.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -40,6 +38,9 @@ ...@@ -40,6 +38,9 @@
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
} }
input{
color: #000;
}
</style> </style>
</head> </head>
...@@ -146,6 +147,8 @@ ...@@ -146,6 +147,8 @@
<div class="mui-off-canvas-backdrop"></div> <div class="mui-off-canvas-backdrop"></div>
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
mui.init({ mui.init({
swipeBack: false, swipeBack: false,
...@@ -223,7 +226,5 @@ ...@@ -223,7 +226,5 @@
}); });
} }
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-right-plus-main.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -69,6 +67,9 @@ ...@@ -69,6 +67,9 @@
</div> </div>
</form> </form>
</div> </div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
var main,menu, mask = mui.createMask(closeMenu); var main,menu, mask = mui.createMask(closeMenu);
var showMenu = false,mode = 'main-move'; var showMenu = false,mode = 'main-move';
...@@ -277,7 +278,4 @@ ...@@ -277,7 +278,4 @@
} }
} }
</script> </script>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-right-plus-menu.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
body, .mui-content { body, .mui-content {
background-color: #333; background-color: #333;
...@@ -36,11 +34,7 @@ ...@@ -36,11 +34,7 @@
margin-bottom: 35px; margin-bottom: 35px;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<div class="mui-content"> <div class="mui-content">
<div class="title">侧滑导航</div> <div class="title">侧滑导航</div>
...@@ -91,7 +85,8 @@ ...@@ -91,7 +85,8 @@
</li> </li>
</ul> </ul>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
mui.init({ mui.init({
swipeBack:false swipeBack:false
......
examples/hello-mui/examples/offcanvas-drag-right.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -39,6 +37,9 @@ ...@@ -39,6 +37,9 @@
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
} }
input{
color: #000;
}
</style> </style>
</head> </head>
...@@ -145,6 +146,8 @@ ...@@ -145,6 +146,8 @@
<div class="mui-off-canvas-backdrop"></div> <div class="mui-off-canvas-backdrop"></div>
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
mui.init({ mui.init({
swipeBack: false, swipeBack: false,
...@@ -218,7 +221,5 @@ ...@@ -218,7 +221,5 @@
}); });
} }
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/pagination.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -22,9 +20,6 @@ ...@@ -22,9 +20,6 @@
padding-top: 0; padding-top: 0;
} }
</style> </style>
<script type="text/javascript">
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -193,6 +188,11 @@ ...@@ -193,6 +188,11 @@
</ul> </ul>
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
mui.init();
</script>
<script> <script>
(function($) { (function($) {
$('.mui-pagination').on('tap', 'a', function() { $('.mui-pagination').on('tap', 'a', function() {
......
examples/hello-mui/examples/popovers.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -43,9 +41,6 @@ ...@@ -43,9 +41,6 @@
padding: 10px; padding: 10px;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -160,7 +155,10 @@ ...@@ -160,7 +155,10 @@
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
mui.init();
mui('.mui-scroll-wrapper').scroll(); mui('.mui-scroll-wrapper').scroll();
mui('body').on('shown', '.mui-popover', function(e) { mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素 //console.log('shown', e.detail.id);//detail为当前popover元素
......
examples/hello-mui/examples/pullrefresh.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -29,6 +27,8 @@ ...@@ -29,6 +27,8 @@
</ul> </ul>
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
mui.init({ mui.init({
swipeBack: false, swipeBack: false,
......
examples/hello-mui/examples/radio.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -22,9 +20,6 @@ ...@@ -22,9 +20,6 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -70,6 +65,10 @@ ...@@ -70,6 +65,10 @@
</form> </form>
</div> </div>
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/range.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -21,17 +19,6 @@ ...@@ -21,17 +19,6 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
h5{ h5{
padding-top: 15px; padding-top: 15px;
} }
...@@ -48,14 +35,15 @@ ...@@ -48,14 +35,15 @@
float: none; float: none;
text-align: center; text-align: center;
} }
</style> </style>
</head>
<header class="mui-bar mui-bar-nav"> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">滑块（range）</h1> <h1 class="mui-title">滑块（range）</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h5 style='margin-top:35px;'>label+输入框+滑块：</h5> <h5 style='margin-top:35px;'>label+输入框+滑块：</h5>
<div class="mui-input-row mui-input-range field-contain"> <div class="mui-input-row mui-input-range field-contain">
...@@ -77,13 +65,13 @@ ...@@ -77,13 +65,13 @@
<div class="mui-input-row mui-input-range"> <div class="mui-input-row mui-input-range">
<input type="range" id='block-range' value="50" min="0" max="100" > <input type="range" id='block-range' value="50" min="0" max="100" >
</div> </div>
</div> </div>
</div>
</div> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
mui.init();
//监听input事件，获取range的value值，也可以直接element.value获取该range的值 //监听input事件，获取range的value值，也可以直接element.value获取该range的值
var rangeList = document.querySelectorAll('input[type="range"]'); var rangeList = document.querySelectorAll('input[type="range"]');
for(var i=0,len=rangeList.length;i<len;i++){ for(var i=0,len=rangeList.length;i<len;i++){
...@@ -101,10 +89,5 @@ ...@@ -101,10 +89,5 @@
document.getElementById('field-range-input').addEventListener('input',function(){ document.getElementById('field-range-input').addEventListener('input',function(){
document.getElementById('field-range').value = this.value; document.getElementById('field-range').value = this.value;
}); });
</script>
</script>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/slider-default.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -22,18 +20,13 @@ ...@@ -22,18 +20,13 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图片轮播</h1> <h1 class="mui-title">图片轮播</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell"> <li id="switch" class="mui-table-view-cell">
定时轮播 定时轮播
...@@ -88,8 +81,11 @@ ...@@ -88,8 +81,11 @@
<div class="mui-indicator"></div> <div class="mui-indicator"></div>
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript" charset="utf-8"> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var slider = mui("#slider"); var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) { document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) { if (e.detail.isActive) {
...@@ -102,8 +98,6 @@ ...@@ -102,8 +98,6 @@
}); });
} }
}); });
</script> </script>
</body>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/slider-table-default.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -33,9 +31,6 @@ ...@@ -33,9 +31,6 @@
color: #333; color: #333;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -64,4 +59,9 @@ ...@@ -64,4 +59,9 @@
</ul> </ul>
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/slider-with-title.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -22,9 +20,6 @@ ...@@ -22,9 +20,6 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -90,7 +85,11 @@ ...@@ -90,7 +85,11 @@
</div> </div>
</div> </div>
</div> </div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
mui.init();
var slider = mui("#slider"); var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) { document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) { if (e.detail.isActive) {
...@@ -104,6 +103,4 @@ ...@@ -104,6 +103,4 @@
} }
}); });
</script> </script>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/switches.html
View file @ 37979d3e
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -9,8 +8,6 @@ ...@@ -9,8 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -23,9 +20,6 @@ ...@@ -23,9 +20,6 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -86,10 +80,10 @@ ...@@ -86,10 +80,10 @@
</li> </li>
</ul> </ul>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
// mui.plusReady(function(){ mui.init();
// plus.webview.currentWebview().setStyle({bounce:'none'});
// });
mui('.mui-content .mui-switch').each(function() { //循环所有toggle mui('.mui-content .mui-switch').each(function() { //循环所有toggle
//toggle.classList.contains('mui-active') 可识别该toggle的开关状态 //toggle.classList.contains('mui-active') 可识别该toggle的开关状态
this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false'); this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false');
...@@ -102,7 +96,5 @@ ...@@ -102,7 +96,5 @@
}); });
}); });
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-main.html
View file @ 37979d3e
...@@ -9,15 +9,12 @@ ...@@ -9,15 +9,12 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
...@@ -41,6 +38,8 @@ ...@@ -41,6 +38,8 @@
<span class="mui-tab-label">设置</span> <span class="mui-tab-label">设置</span>
</a> </a>
</nav> </nav>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
var subpages = ['tab-webview-subpage-about.html','tab-webview-subpage-chat.html','tab-webview-subpage-contact.html','tab-webview-subpage-setting.html']; var subpages = ['tab-webview-subpage-about.html','tab-webview-subpage-chat.html','tab-webview-subpage-contact.html','tab-webview-subpage-setting.html'];
var subpage_style = { var subpage_style = {
...@@ -78,6 +77,20 @@ ...@@ -78,6 +77,20 @@
//更改当前活跃的选项卡 //更改当前活跃的选项卡
activeTab = targetTab; activeTab = targetTab;
}); });
//自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome',function () {
var defaultTab = document.getElementById("defaultTab");
//模拟首页点击
mui.trigger(defaultTab,'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if(defaultTab!==current){
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-about.html
View file @ 37979d3e
...@@ -8,8 +8,6 @@ ...@@ -8,8 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -20,9 +18,6 @@ ...@@ -20,9 +18,6 @@
font-size: 15px; font-size: 15px;
} }
</style> </style>
<script type="text/javascript">
mui.init();
</script>
</head> </head>
<body> <body>
<div class="mui-content"> <div class="mui-content">
...@@ -34,4 +29,9 @@ ...@@ -34,4 +29,9 @@
</div> </div>
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-chat.html
View file @ 37979d3e
...@@ -8,8 +8,6 @@ ...@@ -8,8 +8,6 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -76,6 +74,8 @@ ...@@ -76,6 +74,8 @@
</ul> </ul>
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
mui.init({ mui.init({
swipeBack: false, swipeBack: false,
...@@ -126,7 +126,5 @@ ...@@ -126,7 +126,5 @@
} }
</script> </script>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-contact.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -46,9 +44,6 @@ ...@@ -46,9 +44,6 @@
float: left; float: left;
} }
</style> </style>
<script type="text/javascript">
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -149,10 +144,11 @@ ...@@ -149,10 +144,11 @@
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-setting.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -21,9 +19,6 @@ ...@@ -21,9 +19,6 @@
font-size: 15px; font-size: 15px;
} }
</style> </style>
<script type="text/javascript">
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -54,7 +49,7 @@ ...@@ -54,7 +49,7 @@
</ul> </ul>
<ul class="mui-table-view" style="margin-top: 25px;"> <ul class="mui-table-view" style="margin-top: 25px;">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a id="about" class="mui-navigate-right">
关于mui 关于mui
</a> </a>
</li> </li>
...@@ -69,5 +64,15 @@ ...@@ -69,5 +64,15 @@
</div> </div>
</style> </style>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
document.getElementById("about").addEventListener('tap',function () {
//获得主页面的webview
var main = plus.webview.currentWebview().parent();
//触发主页面的gohome事件
mui.fire(main,'gohome');
});
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -22,17 +20,6 @@ ...@@ -22,17 +20,6 @@
.mui-bar-nav~.mui-content { .mui-bar-nav~.mui-content {
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
/*.mui-bar-nav ~ .mui-content{padding-top:54px;}*/
.mui-card .mui-control-content { .mui-card .mui-control-content {
padding: 10px; padding: 10px;
} }
...@@ -40,6 +27,8 @@ ...@@ -40,6 +27,8 @@
height: 150px; height: 150px;
} }
</style> </style>
</head>
<body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">按钮式选项卡</h1> <h1 class="mui-title">按钮式选项卡</h1>
...@@ -188,7 +177,10 @@ ...@@ -188,7 +177,10 @@
</form> </form>
</div> </div>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
mui.init();
(function($) { (function($) {
$('#scroll').scroll({ $('#scroll').scroll({
indicators: true //是否显示滚动条 indicators: true //是否显示滚动条
......
examples/hello-mui/examples/tabbar-labels-only.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -22,18 +20,15 @@ ...@@ -22,18 +20,15 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">文字选项卡</h1> <h1 class="mui-title">文字选项卡</h1>
</header> </header>
<nav class="mui-bar mui-bar-tab"> <nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#"> <a class="mui-tab-item mui-active" href="#">
电话沟通 电话沟通
</a> </a>
...@@ -46,8 +41,11 @@ ...@@ -46,8 +41,11 @@
<a class="mui-tab-item" href="#"> <a class="mui-tab-item" href="#">
查看地图 查看地图
</a> </a>
</nav> </nav>
</body>
</body> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-with-submenus.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -22,18 +20,12 @@ ...@@ -22,18 +20,12 @@
.mui-bar-nav~.mui-content { .mui-bar-nav~.mui-content {
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-bar-popover { .mui-bar-popover {
width: 30%; width: 30%;
} }
</style> </style>
</head>
<body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">含二级菜单的选项卡</h1> <h1 class="mui-title">含二级菜单的选项卡</h1>
...@@ -76,5 +68,9 @@ ...@@ -76,5 +68,9 @@
</div> </div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tabbar.html
View file @ 37979d3e
...@@ -8,8 +8,6 @@ ...@@ -8,8 +8,6 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -52,9 +50,6 @@ ...@@ -52,9 +50,6 @@
float: left; float: left;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
...@@ -247,7 +242,10 @@ ...@@ -247,7 +242,10 @@
</ul> </ul>
</div> </div>
</div> </div>
</body>
</body> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-badges.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -22,18 +20,14 @@ ...@@ -22,18 +20,14 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">右侧带数字角标</h1> <h1 class="mui-title">右侧带数字角标</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-card"> <div class="mui-card">
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell">card（圆角列表） <li class="mui-table-view-cell">card（圆角列表）
...@@ -66,8 +60,11 @@ ...@@ -66,8 +60,11 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</body>
</body> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-collapses.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -22,19 +20,14 @@ ...@@ -22,19 +20,14 @@
padding: 0; padding: 0;
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">二级列表</h1> <h1 class="mui-title">二级列表</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-card"> <div class="mui-card">
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">card（圆角列表） <li class="mui-table-view-cell">card（圆角列表）
...@@ -72,8 +65,11 @@ ...@@ -72,8 +65,11 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</body>
</body> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-swipe.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -136,6 +134,8 @@ ...@@ -136,6 +134,8 @@
</li> </li>
</ul> </ul>
</div> </div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script> <script>
//禁止右滑关闭 //禁止右滑关闭
mui.init({ mui.init({
...@@ -181,7 +181,5 @@ ...@@ -181,7 +181,5 @@
}); });
})(mui); })(mui);
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tableviews.html
View file @ 37979d3e
...@@ -8,15 +8,10 @@ ...@@ -8,15 +8,10 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
} }
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
...@@ -28,14 +23,9 @@ ...@@ -28,14 +23,9 @@
} }
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<div class="mui-content">
<div class="mui-content">
<div class="title"> <div class="title">
右侧无导航箭头 右侧无导航箭头
</div> </div>
...@@ -86,8 +76,11 @@ ...@@ -86,8 +76,11 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</body>
</body> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/template.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -74,6 +72,8 @@ ...@@ -74,6 +72,8 @@
</header> </header>
<div class="mui-loader">加载中...</div> <div class="mui-loader">加载中...</div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var titleElem = document.getElementById("title") var titleElem = document.getElementById("title")
var menu = document.getElementById("menu") var menu = document.getElementById("menu")
...@@ -91,15 +91,14 @@ ...@@ -91,15 +91,14 @@
} }
menu.style.display = display; menu.style.display = display;
}); });
var contentWebview = null; var contentWebview = null;
document.getElementById("menu").addEventListener('tap', function(e) { document.getElementById("menu").addEventListener('tap', function(e) {
e.stopPropagation();
if(contentWebview==null){ if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0]; contentWebview = plus.webview.currentWebview().children()[0];
} }
contentWebview.evalJS('mui("#topPopover").popover("toggle")'); contentWebview.evalJS('mui("#topPopover").popover("toggle")');
}); });
//敲击顶部、回到顶部
document.querySelector('header').addEventListener('tap',function () { document.querySelector('header').addEventListener('tap',function () {
if(contentWebview==null){ if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0]; contentWebview = plus.webview.currentWebview().children()[0];
......
examples/hello-mui/examples/template_pullrefresh.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html, html,
body { body {
...@@ -67,7 +65,8 @@ ...@@ -67,7 +65,8 @@
</header> </header>
<div class="mui-content"></div> <div class="mui-content"></div>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var titleElem = document.getElementById("title"); var titleElem = document.getElementById("title");
window.addEventListener("updateHeader", function(e) { window.addEventListener("updateHeader", function(e) {
...@@ -76,7 +75,6 @@ ...@@ -76,7 +75,6 @@
titleElem.className = "mui-title mui-fadein"; titleElem.className = "mui-title mui-fadein";
}); });
var contentWebview = null; var contentWebview = null;
//敲击顶部、回到顶部
document.querySelector('header').addEventListener('tap',function () { document.querySelector('header').addEventListener('tap',function () {
if(contentWebview==null){ if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0]; contentWebview = plus.webview.currentWebview().children()[0];
......
examples/hello-mui/examples/typography.html
View file @ 37979d3e
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style> <style>
html,body { html,body {
background-color: #efeff4; background-color: #efeff4;
...@@ -21,24 +19,17 @@ ...@@ -21,24 +19,17 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-content-padded { .mui-content-padded {
padding: 10px; padding: 10px;
} }
</style> </style>
<header class="mui-bar mui-bar-nav"> </head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Typography</h1> <h1 class="mui-title">Typography</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h1>h1. Heading</h1> <h1>h1. Heading</h1>
<h2>h2. Heading</h2> <h2>h2. Heading</h2>
...@@ -50,8 +41,11 @@ ...@@ -50,8 +41,11 @@
p. 目前最接近原生App效果的框架。 p. 目前最接近原生App效果的框架。
</p> </p>
</div> </div>
</div> </div>
</body>
</body> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html> </html>
\ No newline at end of file
examples/hello-mui/js/app.js
View file @ 37979d3e
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
if ($.targets._popover) { if ($.targets._popover) {
$($.targets._popover).popover('hide'); $($.targets._popover).popover('hide');
} else { } else {
current.parent().evalJS('mui.back();'); current.parent().evalJS('mui&&mui.back();');
} }
} else { } else {
back(); back();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment