Skip to content

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

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

parent c2ccb8fd
Expand all Hide 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,113 +21,113 @@ ...@@ -22,113 +21,113 @@
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"> <a class="mui-navigate-right" href="#">表单</a>
<a class="mui-navigate-right" href="#">表单</a> <div class="mui-collapse-content">
<div class="mui-collapse-content"> <form class="mui-input-group">
<form class="mui-input-group"> <div class="mui-input-row">
<div class="mui-input-row"> <label>Input</label>
<label>Input</label> <input type="text" placeholder="普通输入框">
<input type="text" placeholder="普通输入框"> </div>
</div> <div class="mui-input-row">
<div class="mui-input-row"> <label>Input</label>
<label>Input</label> <input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框"> </div>
</div>
<div class="mui-input-row">
<div class="mui-input-row"> <label>Input</label>
<label>Input</label> <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入"> </div>
</div> <div class="mui-button-row">
<div class="mui-button-row"> <button class="mui-btn mui-btn-primary" type="button" onclick="return false;">确认</button>&nbsp;&nbsp;
<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">确认</button>&nbsp;&nbsp; <button class="mui-btn mui-btn-primary" type="button" onclick="return false;">取消</button>
<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">取消</button> </div>
</form>
</div> </div>
</form> </li>
</div> <li class="mui-table-view-cell mui-collapse">
</li> <a class="mui-navigate-right" href="#">图片轮播</a>
<li class="mui-table-view-cell mui-collapse"> <div class="mui-collapse-content">
<a class="mui-navigate-right" href="#">图片轮播</a> <div id="slider" class="mui-slider">
<div class="mui-collapse-content"> <div class="mui-slider-group mui-slider-loop">
<div id="slider" class="mui-slider"> <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-group mui-slider-loop"> <div class="mui-slider-item mui-slider-item-duplicate">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --> <a href="#">
<div class="mui-slider-item mui-slider-item-duplicate"> <img src="../images/yuantiao.jpg">
<a href="#"> </a>
<img src="../images/yuantiao.jpg"> </div>
</a> <!-- 第一张 -->
</div> <div class="mui-slider-item">
<!-- 第一张 --> <a href="#">
<div class="mui-slider-item"> <img src="../images/shuijiao.jpg">
<a href="#"> </a>
<img src="../images/shuijiao.jpg"> </div>
</a> <!-- 第二张 -->
</div> <div class="mui-slider-item">
<!-- 第二张 --> <a href="#">
<div class="mui-slider-item"> <img src="../images/muwu.jpg">
<a href="#"> </a>
<img src="../images/muwu.jpg"> </div>
</a> <!-- 第三张 -->
</div> <div class="mui-slider-item">
<!-- 第三张 --> <a href="#">
<div class="mui-slider-item"> <img src="../images/cbd.jpg">
<a href="#"> </a>
<img src="../images/cbd.jpg"> </div>
</a> <!-- 第四张 -->
</div> <div class="mui-slider-item">
<!-- 第四张 --> <a href="#">
<div class="mui-slider-item"> <img src="../images/yuantiao.jpg">
<a href="#"> </a>
<img src="../images/yuantiao.jpg"> </div>
</a> <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
</div> <div class="mui-slider-item mui-slider-item-duplicate">
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) --> <a href="#">
<div class="mui-slider-item mui-slider-item-duplicate"> <img src="../images/shuijiao.jpg">
<a href="#"> </a>
<img src="../images/shuijiao.jpg"> </div>
</a> </div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div> </div>
</div> </div>
<div class="mui-slider-indicator"> </li>
<div class="mui-indicator mui-active"></div> <li class="mui-table-view-cell mui-collapse">
<div class="mui-indicator"></div> <a class="mui-navigate-right" href="#">文字排版</a>
<div class="mui-indicator"></div> <div class="mui-collapse-content">
<div class="mui-indicator"></div> <h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<p>
p. 目前最接近原生App效果的框架。
</p>
</div> </div>
</div> </li>
</div> </ul>
</li> </div>
<li class="mui-table-view-cell mui-collapse"> </div>
<a class="mui-navigate-right" href="#">文字排版</a> <script src="../js/mui.min.js"></script>
<div class="mui-collapse-content"> <script src="../js/app.js"></script>
<h1>h1. Heading</h1> <script>
<h2>h2. Heading</h2> mui.init();
<h3>h3. Heading</h3> </script>
<h4>h4. Heading</h4> </body>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<p>
p. 目前最接近原生App效果的框架。
</p>
</div>
</li>
</ul>
</div>
</div>
</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元素
}); });
...@@ -95,26 +88,26 @@ ...@@ -95,26 +88,26 @@
}); });
var info = document.getElementById("info"); var info = document.getElementById("info");
document.getElementById("picture-btn").addEventListener('tap',function () { document.getElementById("picture-btn").addEventListener('tap',function () {
var btnArray = [{title:"拍照或录像"},{title:"选取现有的"}]; var btnArray = [{title:"拍照或录像"},{title:"选取现有的"}];
plus.nativeUI.actionSheet( { plus.nativeUI.actionSheet( {
title:"选择照片", title:"选择照片",
cancel:"取消", cancel:"取消",
buttons:btnArray buttons:btnArray
}, function(e){ }, function(e){
var index = e.index; var index = e.index;
var text = "你刚点击了\""; var text = "你刚点击了\"";
switch (index){ switch (index){
case 0: case 0:
text += "取消"; text += "取消";
break; break;
case 1: case 1:
text += "拍照或录像"; text += "拍照或录像";
break; break;
case 2: case 2:
text += "选取现有的"; text += "选取现有的";
break; break;
} }
info.innerHTML = text+"\"按钮"; info.innerHTML = text+"\"按钮";
} ); } );
}); });
document.getElementById("delete-btn").addEventListener('tap',function () { document.getElementById("delete-btn").addEventListener('tap',function () {
......
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,120 +19,115 @@ ...@@ -24,120 +19,115 @@
.mui-content-padded{ .mui-content-padded{
padding: 10px; padding: 10px;
} }
body,body .mui-content{
background-color: #fff !important;
}
code {
word-wrap: break-word;
word-break: normal;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<style> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
body,body .mui-content{ <h1 class="mui-title">AJAX</h1>
background-color: #fff !important; </header>
} <div class="mui-content" >
code { <div class="mui-content-padded" style="padding-bottom: 50px;">
word-wrap: break-word; <p style="text-indent: 22px;">
word-break: normal; 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功能演示网络请求。
font-size: 90%; </p>
color: #c7254e; <h4 class="mui-content-padded">发送请求：</h4>
background-color: #f9f2f4; <div class="mui-input-group">
border-radius: 4px; <div class="mui-input-row">
} <label>type:</label>
</style> <select id="method">
<header class="mui-bar mui-bar-nav"> <option value="get">GET</option>
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <option value="post">POST</option>
<h1 class="mui-title">AJAX</h1> </select>
</header> </div>
<div class="mui-content" > <div class="mui-input-row">
<label>dataType:</label>
<div class="mui-content-padded" style="padding-bottom: 50px;"> <select id="dataType">
<p style="text-indent: 22px;"> <option value="html">HTML</option>
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功能演示网络请求。 <option value="json">JSON</option>
</p> <option value="xml">XML</option>
<h4 class="mui-content-padded">发送请求：</h4> </select>
<div class="mui-input-group"> </div>
<div class="mui-input-row"> <div class="mui-button-row">
<label>type:</label> <button type="button" id="confirm" class="mui-btn mui-btn-primary">发送请求</button>
<select id="method"> </div>
<option value="get">GET</option> </div>
<option value="post">POST</option> <h4 class="mui-content-padded">获得响应：</h4>
</select> <code id="response" ></code>
</div>
<div class="mui-input-row">
<label>dataType:</label>
<select id="dataType">
<option value="html">HTML</option>
<option value="json">JSON</option>
<option value="xml">XML</option>
</select>
</div>
<div class="mui-button-row">
<button type="button" id="confirm" class="mui-btn mui-btn-primary">发送请求</button>
</div> </div>
</div> </div>
<h4 class="mui-content-padded">获得响应：</h4> <script src="../js/mui.min.js"></script>
<code id="response" ></code> <script src="../js/app.js"></script>
</div> <script>
</div> (function($) {
<script> mui.init();
(function($) { 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"); //成功响应的回调函数
//成功响应的回调函数 var success = function(response) {
var success = function(response) { var dataType = dataTypeEl.value;
var dataType = dataTypeEl.value; if (dataType === 'json') {
if (dataType === 'json') { response = JSON.stringify(response);
response = JSON.stringify(response); } else if (dataType === 'xml') {
} else if (dataType === 'xml') { response = new XMLSerializer().serializeToString(response).replace(/</g, "&lt;").replace(/>/g, "&gt;");
response = new XMLSerializer().serializeToString(response).replace(/</g, "&lt;").replace(/>/g, "&gt;"); }
} respnoseEl.innerHTML = response;
respnoseEl.innerHTML = response; };
}; var ajax = function() {
var ajax = function() { //利用RunJS的Echo Ajax功能测试
//利用RunJS的Echo Ajax功能测试 var url = 'http://runjs.cn/action/echo/';
var url = 'http://runjs.cn/action/echo/'; //请求方式，默认为Get；
//请求方式，默认为Get； var type = methodEl.value;
var type = methodEl.value; //预期服务器范围的数据类型
//预期服务器范围的数据类型 var dataType = dataTypeEl.value;
var dataType = dataTypeEl.value; //发送数据
//发送数据 var data = {
var data = { name: "mui",
name: "mui", version: "pre-release",
version: "pre-release", author: "chb",
author: "chb", description:"最接近原生APP体验的高性能前端框架"
description:"最接近原生APP体验的高性能前端框架" };
}; url = url + (dataType === 'html' ? 'text' : dataType);
url = url + (dataType === 'html' ? 'text' : dataType); respnoseEl.innerHTML = '正在请求中...';
respnoseEl.innerHTML = '正在请求中...'; if (type === 'get') {
if (type === 'get') { if (dataType === 'json') {
if (dataType === 'json') { $.getJSON(url, data, success);
$.getJSON(url, data, success); } else {
} else { $.get(url, data, success, dataType);
$.get(url, data, success, dataType); }
} } else if (type === 'post') {
} else if (type === 'post') { $.post(url, data, success, dataType);
$.post(url, data, success, dataType); }
} };
}; //发送请求按钮的点击事件
//发送请求按钮的点击事件 document.getElementById("confirm").addEventListener('tap', function() {
document.getElementById("confirm").addEventListener('tap', function() { ajax();
ajax(); });
}); //点击描述中链接时，打开对应网页介绍；
//点击描述中链接时，打开对应网页介绍； $('body').on('tap', 'a', function(e) {
$('body').on('tap', 'a', function(e) { var href = this.getAttribute('href');
var href = this.getAttribute('href'); if (href) {
if (href) { if (window.plus) {
if (window.plus) { plus.runtime.openURL(href);
plus.runtime.openURL(href); } else {
} else { location.href = href;
location.href = href; }
} }
} });
}); })(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,44 +20,42 @@ ...@@ -21,44 +20,42 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
h5 {
margin: 10px;
}
.mui-badge {
margin: 10px;
}
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<style> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
h5 { <h1 class="mui-title">数字角标（Badges）</h1>
margin: 10px; </header>
} <div class="mui-content">
.mui-badge { <div class="mui-content-padded">
margin: 10px; <h5>有底色</h5>
} <span class="mui-badge">1</span>
</style> <span class="mui-badge mui-badge-primary">12</span>
<header class="mui-bar mui-bar-nav"> <span class="mui-badge mui-badge-success">123</span>
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <span class="mui-badge mui-badge-warning">3</span>
<h1 class="mui-title">数字角标（Badges）</h1> <span class="mui-badge mui-badge-danger">45</span>
</header> <span class="mui-badge mui-badge-purple">456</span>
<div class="mui-content"> <h5>无底色（使用父元素背景色）</h5>
<div class="mui-content-padded"> <span class="mui-badge mui-badge-inverted">1</span>
<h5>有底色</h5> <span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
<span class="mui-badge">1</span> <span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
<span class="mui-badge mui-badge-primary">12</span> <span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-success">123</span> <span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
<span class="mui-badge mui-badge-warning">3</span> <span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
<span class="mui-badge mui-badge-danger">45</span> </div>
<span class="mui-badge mui-badge-purple">456</span> </div>
<h5>无底色（使用父元素背景色）</h5> </body>
<span class="mui-badge mui-badge-inverted">1</span> <script src="../js/mui.min.js"></script>
<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span> <script src="../js/app.js"></script>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</span> <script>
<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span> mui.init();
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span> </script>
<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
</div>
</div>
</body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-badges.html
View file @ 37979d3e
...@@ -8,9 +8,7 @@ ...@@ -8,9 +8,7 @@
<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;
...@@ -21,36 +19,35 @@ ...@@ -21,36 +19,35 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
.mui-btn{
margin-top: 10px;
margin-right: 100px;
margin-left: 10px;
}
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<style> <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
.mui-btn{ <h1 class="mui-title">带数字的按钮</h1>
margin-top: 10px; </header>
margin-right: 100px; <div class="mui-content">
margin-left: 10px; <div class="mui-content-padded">
} <button type="button" class="mui-btn">Badge button <span class="mui-badge">1</span></button>
</style> <button type="button" class="mui-btn mui-btn-primary">Badge button <span class="mui-badge mui-badge-primary">2</span></button>
<header class="mui-bar mui-bar-nav"> <button type="button" class="mui-btn mui-btn-success">Badge button <span class="mui-badge mui-badge-success">12</span></button>
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a> <button type="button" class="mui-btn mui-btn-warning">Badge button <span class="mui-badge mui-badge-warning">121</span></button>
<h1 class="mui-title">带数字的按钮</h1> <button type="button" class="mui-btn mui-btn-danger">Badge button <span class="mui-badge mui-badge-danger">999</span></button>
</header> <button type="button" class="mui-btn mui-btn-royal">Badge button <span class="mui-badge mui-badge-royal">999</span></button>
<div class="mui-content">
<div class="mui-content-padded"> </div>
<button type="button" class="mui-btn">Badge button <span class="mui-badge">1</span></button> </div>
<button type="button" class="mui-btn mui-btn-primary">Badge button <span class="mui-badge mui-badge-primary">2</span></button> </body>
<button type="button" class="mui-btn mui-btn-success">Badge button <span class="mui-badge mui-badge-success">12</span></button> <script src="../js/mui.min.js"></script>
<button type="button" class="mui-btn mui-btn-warning">Badge button <span class="mui-badge mui-badge-warning">121</span></button> <script src="../js/app.js"></script>
<button type="button" class="mui-btn mui-btn-danger">Badge button <span class="mui-badge mui-badge-danger">999</span></button> <script>
<button type="button" class="mui-btn mui-btn-royal">Badge button <span class="mui-badge mui-badge-royal">999</span></button> mui.init();
</script>
</div>
</div>
</body>
</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,39 +19,37 @@ ...@@ -21,39 +19,37 @@
.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> <button type="button" class="mui-btn mui-btn-success mui-btn-block">Block button</button>
<button type="button" class="mui-btn mui-btn-success mui-btn-block">Block button</button> <button type="button" class="mui-btn mui-btn-warning mui-btn-block">Block button</button>
<button type="button" class="mui-btn mui-btn-warning mui-btn-block">Block button</button> <button type="button" class="mui-btn mui-btn-danger mui-btn-block">Block button</button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-block">Block button</button> <button type="button" class="mui-btn mui-btn-royal mui-btn-block">Block button</button>
<button type="button" class="mui-btn mui-btn-royal mui-btn-block">Block button</button> <button type="button" class="mui-btn mui-btn-block mui-btn-outlined">Block button</button>
<button type="button" class="mui-btn mui-btn-block mui-btn-outlined">Block button</button> <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">Block button</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">Block button</button> <button type="button" class="mui-btn mui-btn-success mui-btn-block mui-btn-outlined">Block button</button>
<button type="button" class="mui-btn mui-btn-success mui-btn-block mui-btn-outlined">Block button</button> <button type="button" class="mui-btn mui-btn-warning mui-btn-block mui-btn-outlined">Block button</button>
<button type="button" class="mui-btn mui-btn-warning 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-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> </body>
<style type="text/css"> <script src="../js/mui.min.js"></script>
.mui-content-padded{ <script src="../js/app.js"></script>
margin: 10px; <script>
} mui.init();
</style> </script>
</body>
</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,61 +19,58 @@ ...@@ -21,61 +19,58 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
.mui-btn{
margin-top: 10px;
margin-left: 10px;
}
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<style> <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
.mui-btn{ <h1 class="mui-title">带图标按钮</h1>
margin-top: 10px; </header>
margin-left: 10px; <div class="mui-content">
} <div class="mui-content-padded">
</style> <h5>图标居左：</h5>
<header class="mui-bar mui-bar-nav"> <button type="button" class="mui-btn mui-icon mui-icon-home">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a> 首页
<h1 class="mui-title">带图标按钮</h1> </button>
</header> <button type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-search">
<div class="mui-content"> 搜索
<div class="mui-content-padded"> </button>
<h5>图标居左：</h5> <button type="button" class="mui-btn mui-btn-success mui-icon mui-icon-plus">添加</button>
<button type="button" class="mui-btn mui-icon mui-icon-home"> <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">
首页 <span class="mui-icon mui-icon-trash"></span>
</button> 删除
<button type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-search"> </button>
搜索 <button type="button" class="mui-btn mui-btn-link">
</button> <span class="mui-icon mui-icon-back"></span>
<button type="button" class="mui-btn mui-btn-success mui-icon mui-icon-plus">添加</button> 返回
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined"> </button>
<span class="mui-icon mui-icon-trash"></span> <h5>图标居右：</h5>
删除 <button type="button" class="mui-btn mui-icon mui-icon-home mui-right">
</button> 首页
<button type="button" class="mui-btn mui-btn-link"> </button>
<span class="mui-icon mui-icon-back"></span> <button type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-search mui-right">
返回 搜索
</button> </button>
<h5>图标居右：</h5> <button type="button" class="mui-btn mui-btn-success mui-icon mui-icon-plus mui-right">添加</button>
<button type="button" class="mui-btn mui-icon mui-icon-home mui-right"> <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">
首页 删除
</button> <span class="mui-icon mui-icon-trash"></span>
<button type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-search mui-right"> </button>
搜索 <button type="button" class="mui-btn mui-btn-link">
</button> 下一步
<button type="button" class="mui-btn mui-btn-success mui-icon mui-icon-plus mui-right">添加</button> <span class="mui-icon mui-icon-forward"></span>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined"> </button>
删除 </div>
<span class="mui-icon mui-icon-trash"></span> </div>
</button> </body>
<button type="button" class="mui-btn mui-btn-link"> <script src="../js/mui.min.js"></script>
下一步 <script src="../js/app.js"></script>
<span class="mui-icon mui-icon-forward"></span> <script>
</button> mui.init();
</div> </script>
</div>
</body>
</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,78 +19,76 @@ ...@@ -21,78 +19,76 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
input, button, .mui-btn {
margin-top: 10px;
margin-left: 10px;
}
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<style> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
input, button, .mui-btn { <h1 class="mui-title">按钮（Button）</h1>
margin-top: 10px; </header>
margin-left: 10px; <div class="mui-content">
} <div class="mui-content-padded">
</style> <h5>有底色按钮：</h5>
<header class="mui-bar mui-bar-nav"> <button type="button" class="mui-btn">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> 默认
<h1 class="mui-title">按钮（Button）</h1> </button>
</header> <div class="mui-btn mui-btn-primary">
<div class="mui-content"> 蓝色
<div class="mui-content-padded"> </div>
<h5>有底色按钮：</h5> <span class="mui-btn mui-btn-success">
<button type="button" class="mui-btn"> 绿色
默认 </span>
</button> <button type="button" class="mui-btn mui-btn-warning">
<div class="mui-btn mui-btn-primary"> 黄色
蓝色 </button>
<button type="button" class="mui-btn mui-btn-danger">
红色
</button>
<button type="button" class="mui-btn mui-btn-royal">
紫色
</button>
<h5 style="margin-top: 10px;">无底色按钮（使用父元素的背景色）：</h5>
<button type="button" class="mui-btn mui-btn-outlined">
默认
</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">
操作
</button>
<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">
成功
</button>
<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">
警告
</button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">
危险
</button>
<button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">
高贵
</button>
<h5 style="margin-top: 15px;">链接按钮：</h5>
<button type="button" class="mui-btn mui-btn-link">
添加
</button>
<h5 style="margin-top: 10px;">默认input标签样式：</h5>
<input type="button" value="type=button" />
<input type="reset" value="type=reset" />
<input type="submit" value="type=submit" />
<h5 style="margin-top: 10px;">默认button标签样式：</h5>
<button type="button" >按钮</button>
</div>
</div> </div>
<span class="mui-btn mui-btn-success"> </body>
绿色 <script src="../js/mui.min.js"></script>
</span> <script src="../js/app.js"></script>
<button type="button" class="mui-btn mui-btn-warning"> <script>
黄色 mui.init();
</button> </script>
<button type="button" class="mui-btn mui-btn-danger">
红色
</button>
<button type="button" class="mui-btn mui-btn-royal">
紫色
</button>
<h5 style="margin-top: 10px;">无底色按钮（使用父元素的背景色）：</h5>
<button type="button" class="mui-btn mui-btn-outlined">
默认
</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">
操作
</button>
<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">
成功
</button>
<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">
警告
</button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">
危险
</button>
<button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">
高贵
</button>
<h5 style="margin-top: 15px;">链接按钮：</h5>
<button type="button" class="mui-btn mui-btn-link">
添加
</button>
<h5 style="margin-top: 10px;">默认input标签样式：</h5>
<input type="button" value="type=button" />
<input type="reset" value="type=reset" />
<input type="submit" value="type=submit" />
<h5 style="margin-top: 10px;">默认button标签样式：</h5>
<button type="button" >按钮</button>
</div>
</div>
</body>
</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,54 +20,52 @@ ...@@ -22,54 +20,52 @@
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"> <div class="mui-input-row mui-checkbox mui-left">
<div class="mui-input-row mui-checkbox mui-left"> <label>checkbox</label>
<label>checkbox</label> <input name="checkbox" type="checkbox" >
<input name="checkbox" type="checkbox" > </div>
</div> <div class="mui-input-row mui-checkbox mui-left">
<div class="mui-input-row mui-checkbox mui-left"> <label>checkbox</label>
<label>checkbox</label> <input name="checkbox" type="checkbox" checked>
<input name="checkbox" type="checkbox" checked> </div>
</div> <div class="mui-input-row mui-checkbox mui-left">
<div class="mui-input-row mui-checkbox mui-left"> <label>disabled checkbox</label>
<label>disabled checkbox</label> <input name="checkbox" type="checkbox" disabled="disabled">
<input name="checkbox" type="checkbox" disabled="disabled"> </div>
</form>
</div> </div>
</form> <h5 class="mui-content-padded">图标右对齐</h5>
</div> <div class="mui-card">
<h5 class="mui-content-padded">图标右对齐</h5> <form class="mui-input-group">
<div class="mui-card"> <div class="mui-input-row mui-checkbox">
<form class="mui-input-group"> <label>checkbox</label>
<div class="mui-input-row mui-checkbox"> <input name="checkbox1" type="checkbox" >
<label>checkbox</label> </div>
<input name="checkbox1" type="checkbox" > <div class="mui-input-row mui-checkbox">
<label>checkbox</label>
<input name="checkbox1" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox">
<label>disabled checkbox</label>
<input name="checkbox1" type="checkbox" disabled="disabled">
</div>
</form>
</div> </div>
<div class="mui-input-row mui-checkbox"> </div>
<label>checkbox</label> </body>
<input name="checkbox1" type="checkbox" checked> <script src="../js/mui.min.js"></script>
</div> <script src="../js/app.js"></script>
<div class="mui-input-row mui-checkbox"> <script>
<label>disabled checkbox</label> mui.init();
<input name="checkbox1" type="checkbox" disabled="disabled"> </script>
</div>
</form>
</div>
</div>
</body>
</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,49 +20,49 @@ ...@@ -22,49 +20,49 @@
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>
<div class="mui-media-body">Home</div></a></li> <div class="mui-media-body">Home</div></a></li>
<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-email"><span class="mui-badge">5</span></span> <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<div class="mui-media-body">Email</div></a></li> <div class="mui-media-body">Email</div></a></li>
<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-chatbubble"></span> <span class="mui-icon mui-icon-chatbubble"></span>
<div class="mui-media-body">Chat</div></a></li> <div class="mui-media-body">Chat</div></a></li>
<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-location"></span> <span class="mui-icon mui-icon-location"></span>
<div class="mui-media-body">location</div></a></li> <div class="mui-media-body">location</div></a></li>
<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-search"></span> <span class="mui-icon mui-icon-search"></span>
<div class="mui-media-body">Search</div></a></li> <div class="mui-media-body">Search</div></a></li>
<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-phone"></span> <span class="mui-icon mui-icon-phone"></span>
<div class="mui-media-body">Phone</div></a></li> <div class="mui-media-body">Phone</div></a></li>
<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-gear"></span> <span class="mui-icon mui-icon-gear"></span>
<div class="mui-media-body">Setting</div></a></li> <div class="mui-media-body">Setting</div></a></li>
<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-info"></span> <span class="mui-icon mui-icon-info"></span>
<div class="mui-media-body">about</div></a></li> <div class="mui-media-body">about</div></a></li>
<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-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/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-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,66 +20,64 @@ ...@@ -22,66 +20,64 @@
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"> card（圆角列表）
card（圆角列表） <div id="M_Toggle" class="mui-switch mui-active">
<div id="M_Toggle" class="mui-switch mui-active"> <div class="mui-switch-handle"></div>
<div class="mui-switch-handle"></div> </div>
</div> </li>
</li> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> Item 1
Item 1 <button type="button" class="mui-btn">
<button type="button" class="mui-btn"> Button
Button </button>
</button> </li>
</li> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> Item 2
Item 2 <button type="button" class="mui-btn mui-btn-primary">
<button type="button" class="mui-btn mui-btn-primary"> Button
Button </button>
</button> </li>
</li> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> Item 3
Item 3 <div class="mui-switch mui-active">
<div class="mui-switch mui-active"> <div class="mui-switch-handle"></div>
<div class="mui-switch-handle"></div> </div>
</div> </li>
</li> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> Item 4
Item 4 <div class="mui-switch mui-switch-blue mui-switch-mini mui-active">
<div class="mui-switch mui-switch-blue mui-switch-mini mui-active"> <div class="mui-switch-handle"></div>
<div class="mui-switch-handle"></div> </div>
</div> </li>
</li> <li class="mui-table-view-cell mui-radio mui-left">
<li class="mui-table-view-cell mui-radio mui-left"> <input name="radio" type="radio">Item 5
<input name="radio" type="radio">Item 5 </li>
</li> <li class="mui-table-view-cell mui-radio mui-left">
<li class="mui-table-view-cell mui-radio mui-left"> <input name="radio" type="radio">Item 6
<input name="radio" type="radio">Item 6 </li>
</li> <li class="mui-table-view-cell mui-checkbox mui-left">
<li class="mui-table-view-cell mui-checkbox mui-left"> <input name="checkbox" type="checkbox">Item 7
<input name="checkbox" type="checkbox">Item 7 </li>
</li> <li class="mui-table-view-cell mui-checkbox mui-left">
<li class="mui-table-view-cell mui-checkbox mui-left"> <input name="checkbox" type="checkbox">Item 8
<input name="checkbox" type="checkbox">Item 8 </li>
</li> </ul>
</ul> </div>
</div> </div>
</div> </body>
<script src="../js/mui.min.js"></script>
</body> <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,27 +74,28 @@ ...@@ -79,27 +74,28 @@
</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">
mui.init({
swipeBack:false,
});
var main = null;
mui.plusReady(function () {
main = plus.webview.currentWebview().opener();
})
<script type="text/javascript" charset="utf-8"> function closeMenu () {
mui.init({ mui.fire(main,"menu:swiperight");
swipeBack:false, }
});
var main = null; //左滑显示出来的菜单，只需监听右滑，然后将菜单关闭即可；在该菜单上左滑，不做任何操作；
mui.plusReady(function () { window.addEventListener("swiperight",closeMenu);
main = plus.webview.currentWebview().opener();
}) document.getElementById("close-btn").addEventListener('tap',closeMenu);
mui.menu = closeMenu;
function closeMenu () { mui.back = closeMenu;
mui.fire(main,"menu:swiperight"); </script>
}
//左滑显示出来的菜单，只需监听右滑，然后将菜单关闭即可；在该菜单上左滑，不做任何操作；
window.addEventListener("swiperight",closeMenu);
document.getElementById("close-btn").addEventListener('tap',closeMenu);
mui.menu = closeMenu;
mui.back = closeMenu;
</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,90 +19,75 @@ ...@@ -21,90 +19,75 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
h5{
padding-top: 15px;
}
.field-contain label{
width: auto;
padding-right: 0;
}
.field-contain input[type='text']{
width: 40px;
height: 30px;
padding: 5px 0;
float: none;
text-align: center;
}
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<style> <h1 class="mui-title">滑块（range）</h1>
</header>
h5{ <div class="mui-content">
padding-top: 15px; <div class="mui-content-padded">
} <h5 style='margin-top:35px;'>label+输入框+滑块：</h5>
<div class="mui-input-row mui-input-range field-contain">
.field-contain label{ <div style="float:left">
width: auto; <label >滑块：</label>
padding-right: 0; <input type="text" id='field-range-input' value='60'>
} </div>
<div style="margin-left:121px;">
.field-contain input[type='text']{ <input type="range" id='field-range' value="60" min="0" max="100" />
width: 40px; </div>
height: 30px; </div>
padding: 5px 0; <h5>label+滑块：<span id='inline-range-val'>20</span></h5>
float: none; <div class="mui-input-row mui-input-range">
text-align: center; <label>滑块：</label>
} <input type="range" id='inline-range' value="20" min="0" max="100" >
</style> </div>
<header class="mui-bar mui-bar-nav"> <h5>整行滑块：<span id='block-range-val'>50</span></h5>
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <div class="mui-input-row mui-input-range">
<h1 class="mui-title">滑块（range）</h1> <input type="range" id='block-range' value="50" min="0" max="100" >
</header> </div>
<div class="mui-content"> </div>
</div>
<div class="mui-content-padded"> </body>
<h5 style='margin-top:35px;'>label+输入框+滑块：</h5> <script src="../js/mui.min.js"></script>
<div class="mui-input-row mui-input-range field-contain"> <script src="../js/app.js"></script>
<div style="float:left"> <script>
<label >滑块：</label> mui.init();
<input type="text" id='field-range-input' value='60'> //监听input事件，获取range的value值，也可以直接element.value获取该range的值
</div> var rangeList = document.querySelectorAll('input[type="range"]');
<div style="margin-left:121px;"> for(var i=0,len=rangeList.length;i<len;i++){
<input type="range" id='field-range' value="60" min="0" max="100" /> rangeList[i].addEventListener('input',function(){
</div> if(this.id.indexOf('field')>=0){
</div> document.getElementById(this.id+'-input').value = this.value;
<h5>label+滑块：<span id='inline-range-val'>20</span></h5> }else{
<div class="mui-input-row mui-input-range"> document.getElementById(this.id+'-val').innerHTML = this.value;
<label>滑块：</label> }
<input type="range" id='inline-range' value="20" min="0" max="100" >
</div>
});
<h5>整行滑块：<span id='block-range-val'>50</span></h5> }
<div class="mui-input-row mui-input-range">
<input type="range" id='block-range' value="50" min="0" max="100" > document.getElementById('field-range-input').addEventListener('input',function(){
</div> document.getElementById('field-range').value = this.value;
});
</div> </script>
</div>
<script>
//监听input事件，获取range的value值，也可以直接element.value获取该range的值
var rangeList = document.querySelectorAll('input[type="range"]');
for(var i=0,len=rangeList.length;i<len;i++){
rangeList[i].addEventListener('input',function(){
if(this.id.indexOf('field')>=0){
document.getElementById(this.id+'-input').value = this.value;
}else{
document.getElementById(this.id+'-val').innerHTML = this.value;
}
});
}
document.getElementById('field-range-input').addEventListener('input',function(){
document.getElementById('field-range').value = this.value;
});
</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,88 +20,84 @@ ...@@ -22,88 +20,84 @@
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"> 定时轮播
定时轮播 <div class="mui-switch">
<div class="mui-switch"> <div class="mui-switch-handle"></div>
<div class="mui-switch-handle"></div> </div>
</div> </li>
</li> </ul>
</ul> <div id="slider" class="mui-slider">
<div id="slider" class="mui-slider"> <div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-group mui-slider-loop"> <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --> <div class="mui-slider-item mui-slider-item-duplicate">
<div class="mui-slider-item mui-slider-item-duplicate"> <a href="#">
<a href="#"> <img src="../images/yuantiao.jpg">
<img src="../images/yuantiao.jpg"> </a>
</a> </div>
</div> <!-- 第一张 -->
<!-- 第一张 --> <div class="mui-slider-item">
<div class="mui-slider-item"> <a href="#">
<a href="#"> <img src="../images/shuijiao.jpg">
<img src="../images/shuijiao.jpg"> </a>
</a> </div>
</div> <!-- 第二张 -->
<!-- 第二张 --> <div class="mui-slider-item">
<div class="mui-slider-item"> <a href="#">
<a href="#"> <img src="../images/muwu.jpg">
<img src="../images/muwu.jpg"> </a>
</a> </div>
</div> <!-- 第三张 -->
<!-- 第三张 --> <div class="mui-slider-item">
<div class="mui-slider-item"> <a href="#">
<a href="#"> <img src="../images/cbd.jpg">
<img src="../images/cbd.jpg"> </a>
</a> </div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div> </div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div> </div>
</div> <script src="../js/mui.min.js"></script>
</div> <script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
var slider = mui("#slider"); mui.init();
document.getElementById("switch").addEventListener('toggle', function(e) { var slider = mui("#slider");
if (e.detail.isActive) { document.getElementById("switch").addEventListener('toggle', function(e) {
slider.slider({ if (e.detail.isActive) {
interval: 5000 slider.slider({
}); interval: 5000
} else { });
slider.slider({ } else {
interval: 0 slider.slider({
interval: 0
});
}
}); });
} </script>
}); </body>
</script>
</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,20 +85,22 @@ ...@@ -90,20 +85,22 @@
</div> </div>
</div> </div>
</div> </div>
<script>
var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
slider.slider({
interval: 5000
});
} else {
slider.slider({
interval: 0
});
}
});
</script>
</body> </body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
slider.slider({
interval: 5000
});
} else {
slider.slider({
interval: 0
});
}
});
</script>
</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;
...@@ -30,25 +28,22 @@ ...@@ -30,25 +28,22 @@
margin: -11px 0; margin: -11px 0;
} }
.oa-contact-avatar { .oa-contact-avatar {
width: 75px; width: 75px;
} }
.oa-contact-avatar img { .oa-contact-avatar img {
border-radius: 50%; border-radius: 50%;
} }
.oa-contact-content { .oa-contact-content {
width: 100%; width: 100%;
} }
.oa-contact-name { .oa-contact-name {
margin-right: 20px; margin-right: 20px;
} }
.oa-contact-name, oa-contact-position { .oa-contact-name, oa-contact-position {
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,32 +20,32 @@ ...@@ -22,32 +20,32 @@
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>
<a class="mui-tab-item" href="#"> <a class="mui-tab-item" href="#">
在线交流 在线交流
</a> </a>
<a class="mui-tab-item" href="#"> <a class="mui-tab-item" href="#">
短信咨询 短信咨询
</a> </a>
<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,52 +20,51 @@ ...@@ -22,52 +20,51 @@
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（圆角列表） <div id="M_Toggle" class="mui-switch mui-active">
<div id="M_Toggle" class="mui-switch mui-active"> <div class="mui-switch-handle"></div>
<div class="mui-switch-handle"></div> </div>
</div> </li>
</li> <li class="mui-table-view-divider">右侧无导航箭头</li>
<li class="mui-table-view-divider">右侧无导航箭头</li> <li class="mui-table-view-cell">Item 1 <span class="mui-badge mui-badge-primary">14</span></li>
<li class="mui-table-view-cell">Item 1 <span class="mui-badge mui-badge-primary">14</span></li> <li class="mui-table-view-cell">Item 2 <span class="mui-badge mui-badge-success">1</span></li>
<li class="mui-table-view-cell">Item 2 <span class="mui-badge mui-badge-success">1</span></li> <li class="mui-table-view-cell">Item 3 <span class="mui-badge">5</span></li>
<li class="mui-table-view-cell">Item 3 <span class="mui-badge">5</span></li> <li class="mui-table-view-divider">右侧有导航箭头</li>
<li class="mui-table-view-divider">右侧有导航箭头</li> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> <a class="mui-navigate-right">
<a class="mui-navigate-right"> <span class="mui-badge mui-badge-danger">15</span>
<span class="mui-badge mui-badge-danger">15</span> Item 1
Item 1 </a>
</a> </li>
</li> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> <a class="mui-navigate-right">
<a class="mui-navigate-right"> <span class="mui-badge mui-badge-purple">5</span>
<span class="mui-badge mui-badge-purple">5</span> Item 2
Item 2 </a>
</a> </li>
</li> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> <a class="mui-navigate-right">
<a class="mui-navigate-right"> <span class="mui-badge mui-badge-warning">5</span>
<span class="mui-badge mui-badge-warning">5</span> Item 3
Item 3 </a>
</a> </li>
</li> </ul>
</ul> </div>
</div> </div>
</div> </body>
<script src="../js/mui.min.js"></script>
</body> <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,58 +20,56 @@ ...@@ -22,58 +20,56 @@
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">
<li class="mui-table-view-cell">card（圆角列表）
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">产品</a>
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">iOS</a> <li class="mui-table-view-cell">card（圆角列表）
</li> <div id="M_Toggle" class="mui-switch mui-active">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">Android</a> <div class="mui-switch-handle"></div>
</div>
</li> </li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">HTML5</a> <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">产品</a>
</li> <ul class="mui-table-view mui-table-view-chevron">
</ul> <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">iOS</a>
</li> </li>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">方案</a> <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">Android</a>
<ul class="mui-table-view mui-table-view-chevron"> </li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">PC方案</a> <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">HTML5</a>
</li>
</ul>
</li> </li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">手机方案</a> <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">方案</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">PC方案</a>
</li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">手机方案</a>
</li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">TV方案</a>
</li>
</ul>
</li> </li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">TV方案</a> <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">新闻</a>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">公司新闻</a>
</li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">行业新闻</a>
</li>
</ul>
</li> </li>
</ul> </ul>
</li> </div>
<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">新闻</a> </div>
<ul class="mui-table-view mui-table-view-chevron"> </body>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">公司新闻</a> <script src="../js/mui.min.js"></script>
</li> <script src="../js/app.js"></script>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">行业新闻</a> <script>
</li> mui.init();
</ul> </script>
</li>
</ul>
</div>
</div>
</body>
</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,66 +23,64 @@ ...@@ -28,66 +23,64 @@
} }
</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> <ul class="mui-table-view">
<ul class="mui-table-view"> <li class="mui-table-view-cell">Item 1</li>
<li class="mui-table-view-cell">Item 1</li> <li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 2</li> <li class="mui-table-view-cell">Item 3</li>
<li class="mui-table-view-cell">Item 3</li> </ul>
</ul> <div class="title">
<div class="title"> 右侧有导航箭头
右侧有导航箭头 </div>
</div> <ul class="mui-table-view">
<ul class="mui-table-view"> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> <a class="mui-navigate-right">
<a class="mui-navigate-right"> Item 1
Item 1 </a>
</a> </li>
</li> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> <a class="mui-navigate-right">
<a class="mui-navigate-right"> Item 2
Item 2 </a>
</a> </li>
</li> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> <a class="mui-navigate-right">
<a class="mui-navigate-right"> Item 3
Item 3 </a>
</a> </li>
</li> </ul>
</ul> <div class="title">
<div class="title"> card（圆角列表）
card（圆角列表） </div>
</div> <div class="mui-card" style="margin-bottom: 35px;">
<div class="mui-card" style="margin-bottom: 35px;"> <ul class="mui-table-view">
<ul class="mui-table-view"> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> <a class="mui-navigate-right">
<a class="mui-navigate-right"> Item 1
Item 1 </a>
</a> </li>
</li> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> <a class="mui-navigate-right">
<a class="mui-navigate-right"> Item 2
Item 2 </a>
</a> </li>
</li> <li class="mui-table-view-cell">
<li class="mui-table-view-cell"> <a class="mui-navigate-right">
<a class="mui-navigate-right"> Item 3
Item 3 </a>
</a> </li>
</li> </ul>
</ul> </div>
</div> </div>
</div> </body>
<script src="../js/mui.min.js"></script>
</body> <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,37 +19,33 @@ ...@@ -21,37 +19,33 @@
.mui-bar-nav~.mui-content{ .mui-bar-nav~.mui-content{
padding: 0; padding: 0;
} }
.mui-content-padded {
padding: 10px;
}
</style> </style>
<script>
mui.init();
</script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav">
<style> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
.mui-content-padded { <h1 class="mui-title">Typography</h1>
padding: 10px; </header>
} <div class="mui-content">
</style> <div class="mui-content-padded">
<header class="mui-bar mui-bar-nav"> <h1>h1. Heading</h1>
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h2>h2. Heading</h2>
<h1 class="mui-title">Typography</h1> <h3>h3. Heading</h3>
</header> <h4>h4. Heading</h4>
<div class="mui-content"> <h5>h5. Heading</h5>
<div class="mui-content-padded"> <h6>h6. Heading</h6>
<h1>h1. Heading</h1> <p>
<h2>h2. Heading</h2> p. 目前最接近原生App效果的框架。
<h3>h3. Heading</h3> </p>
<h4>h4. Heading</h4> </div>
<h5>h5. Heading</h5> </div>
<h6>h6. Heading</h6> </body>
<p> <script src="../js/mui.min.js"></script>
p. 目前最接近原生App效果的框架。 <script src="../js/app.js"></script>
</p> <script>
</div> mui.init();
</div> </script>
</body>
</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