Skip to content

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

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

parent c2ccb8fd
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 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,113 +21,113 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">折叠面板</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">表单</a>
<div class="mui-collapse-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
<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>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">折叠面板</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">表单</a>
<div class="mui-collapse-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
<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>
</div>
</form>
</div>
</form>
</div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">图片轮播</a>
<div class="mui-collapse-content">
<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="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</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>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">图片轮播</a>
<div class="mui-collapse-content">
<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="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</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-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</li>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">文字排版</a>
<div class="mui-collapse-content">
<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>
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">文字排版</a>
<div class="mui-collapse-content">
<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>
</li>
</ul>
</div>
</div>
</body>
</li>
</ul>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/actionsheet-plus.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -42,9 +40,6 @@
color: #8f8f94;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -72,21 +67,19 @@
<li>支持跨webview的遮罩</li>
<li>在有map等原生组件时，依然会显示在最顶层，不会被遮挡</li>
</ul>
<p>另一方面，原生模式的actionsheet目前暂不支持样式自定义</p>
<p>另一方面，原生模式的actionsheet目前不支持自定义样式</p>
<p>
<a id="picture-btn" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>
</p>
</div>
</div>
<p id="info"></p>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
});
......@@ -95,26 +88,26 @@
});
var info = document.getElementById("info");
document.getElementById("picture-btn").addEventListener('tap',function () {
var btnArray = [{title:"拍照或录像"},{title:"选取现有的"}];
plus.nativeUI.actionSheet( {
title:"选择照片",
cancel:"取消",
buttons:btnArray
}, function(e){
var index = e.index;
var text = "你刚点击了\"";
switch (index){
case 0:
text += "取消";
break;
case 1:
text += "拍照或录像";
break;
case 2:
text += "选取现有的";
break;
}
info.innerHTML = text+"\"按钮";
var btnArray = [{title:"拍照或录像"},{title:"选取现有的"}];
plus.nativeUI.actionSheet( {
title:"选择照片",
cancel:"取消",
buttons:btnArray
}, function(e){
var index = e.index;
var text = "你刚点击了\"";
switch (index){
case 0:
text += "取消";
break;
case 1:
text += "拍照或录像";
break;
case 2:
text += "选取现有的";
break;
}
info.innerHTML = text+"\"按钮";
} );
});
document.getElementById("delete-btn").addEventListener('tap',function () {
......
examples/hello-mui/examples/actionsheet.html
View file @ 37979d3e
......@@ -7,10 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -42,9 +39,6 @@
color: #8f8f94;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -136,7 +130,10 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
});
......
examples/hello-mui/examples/ajax.html
View file @ 37979d3e
......@@ -9,12 +9,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
......@@ -24,120 +19,115 @@
.mui-content-padded{
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>
<script>
mui.init();
</script>
</head>
<body>
<style>
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>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">AJAX</h1>
</header>
<div class="mui-content" >
<div class="mui-content-padded" style="padding-bottom: 50px;">
<p style="text-indent: 22px;">
mui基于html5plus的<a href="http://www.dcloud.io/docs/api/zh_cn/xhr.shtml">XMLHttpRequest</a>，封装了常用的ajax函数，支持Get、Post请求方式， 支持返回json、xml、html、text、script数据类型；本示例使用<a href="http://www.oschina.net/question/82993_78609">RunJS</a>的Echo Ajax功能演示网络请求。
</p>
<h4 class="mui-content-padded">发送请求：</h4>
<div class="mui-input-group">
<div class="mui-input-row">
<label>type:</label>
<select id="method">
<option value="get">GET</option>
<option value="post">POST</option>
</select>
</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>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">AJAX</h1>
</header>
<div class="mui-content" >
<div class="mui-content-padded" style="padding-bottom: 50px;">
<p style="text-indent: 22px;">
mui基于html5plus的<a href="http://www.dcloud.io/docs/api/zh_cn/xhr.shtml">XMLHttpRequest</a>，封装了常用的ajax函数，支持Get、Post请求方式， 支持返回json、xml、html、text、script数据类型；本示例使用<a href="http://www.oschina.net/question/82993_78609">RunJS</a>的Echo Ajax功能演示网络请求。
</p>
<h4 class="mui-content-padded">发送请求：</h4>
<div class="mui-input-group">
<div class="mui-input-row">
<label>type:</label>
<select id="method">
<option value="get">GET</option>
<option value="post">POST</option>
</select>
</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>
<h4 class="mui-content-padded">获得响应：</h4>
<code id="response" ></code>
</div>
</div>
<h4 class="mui-content-padded">获得响应：</h4>
<code id="response" ></code>
</div>
</div>
<script>
(function($) {
var methodEl = document.getElementById("method");
var dataTypeEl = document.getElementById("dataType");
var respnoseEl = document.getElementById("response");
//成功响应的回调函数
var success = function(response) {
var dataType = dataTypeEl.value;
if (dataType === 'json') {
response = JSON.stringify(response);
} else if (dataType === 'xml') {
response = new XMLSerializer().serializeToString(response).replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
respnoseEl.innerHTML = response;
};
var ajax = function() {
//利用RunJS的Echo Ajax功能测试
var url = 'http://runjs.cn/action/echo/';
//请求方式，默认为Get；
var type = methodEl.value;
//预期服务器范围的数据类型
var dataType = dataTypeEl.value;
//发送数据
var data = {
name: "mui",
version: "pre-release",
author: "chb",
description:"最接近原生APP体验的高性能前端框架"
};
url = url + (dataType === 'html' ? 'text' : dataType);
respnoseEl.innerHTML = '正在请求中...';
if (type === 'get') {
if (dataType === 'json') {
$.getJSON(url, data, success);
} else {
$.get(url, data, success, dataType);
}
} else if (type === 'post') {
$.post(url, data, success, dataType);
}
};
//发送请求按钮的点击事件
document.getElementById("confirm").addEventListener('tap', function() {
ajax();
});
//点击描述中链接时，打开对应网页介绍；
$('body').on('tap', 'a', function(e) {
var href = this.getAttribute('href');
if (href) {
if (window.plus) {
plus.runtime.openURL(href);
} else {
location.href = href;
}
}
});
})(mui);
</script>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
(function($) {
mui.init();
var methodEl = document.getElementById("method");
var dataTypeEl = document.getElementById("dataType");
var respnoseEl = document.getElementById("response");
//成功响应的回调函数
var success = function(response) {
var dataType = dataTypeEl.value;
if (dataType === 'json') {
response = JSON.stringify(response);
} else if (dataType === 'xml') {
response = new XMLSerializer().serializeToString(response).replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
respnoseEl.innerHTML = response;
};
var ajax = function() {
//利用RunJS的Echo Ajax功能测试
var url = 'http://runjs.cn/action/echo/';
//请求方式，默认为Get；
var type = methodEl.value;
//预期服务器范围的数据类型
var dataType = dataTypeEl.value;
//发送数据
var data = {
name: "mui",
version: "pre-release",
author: "chb",
description:"最接近原生APP体验的高性能前端框架"
};
url = url + (dataType === 'html' ? 'text' : dataType);
respnoseEl.innerHTML = '正在请求中...';
if (type === 'get') {
if (dataType === 'json') {
$.getJSON(url, data, success);
} else {
$.get(url, data, success, dataType);
}
} else if (type === 'post') {
$.post(url, data, success, dataType);
}
};
//发送请求按钮的点击事件
document.getElementById("confirm").addEventListener('tap', function() {
ajax();
});
//点击描述中链接时，打开对应网页介绍；
$('body').on('tap', 'a', function(e) {
var href = this.getAttribute('href');
if (href) {
if (window.plus) {
plus.runtime.openURL(href);
} else {
location.href = href;
}
}
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/badges.html
View file @ 37979d3e
......@@ -9,8 +9,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,44 +20,42 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
h5 {
margin: 10px;
}
.mui-badge {
margin: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
h5 {
margin: 10px;
}
.mui-badge {
margin: 10px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">数字角标（Badges）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>有底色</h5>
<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>
<h5>无底色（使用父元素背景色）</h5>
<span class="mui-badge mui-badge-inverted">1</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
</div>
</div>
</body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">数字角标（Badges）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>有底色</h5>
<span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</span>
<span class="mui-badge mui-badge-success">123</span>
<span class="mui-badge mui-badge-warning">3</span>
<span class="mui-badge mui-badge-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span>
<h5>无底色（使用父元素背景色）</h5>
<span class="mui-badge mui-badge-inverted">1</span>
<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-badges.html
View file @ 37979d3e
......@@ -8,9 +8,7 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
background-color: #efeff4;
......@@ -21,36 +19,35 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-btn{
margin-top: 10px;
margin-right: 100px;
margin-left: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-btn{
margin-top: 10px;
margin-right: 100px;
margin-left: 10px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">带数字的按钮</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<button type="button" class="mui-btn">Badge button <span class="mui-badge">1</span></button>
<button type="button" class="mui-btn mui-btn-primary">Badge button <span class="mui-badge mui-badge-primary">2</span></button>
<button type="button" class="mui-btn mui-btn-success">Badge button <span class="mui-badge mui-badge-success">12</span></button>
<button type="button" class="mui-btn mui-btn-warning">Badge button <span class="mui-badge mui-badge-warning">121</span></button>
<button type="button" class="mui-btn mui-btn-danger">Badge button <span class="mui-badge mui-badge-danger">999</span></button>
<button type="button" class="mui-btn mui-btn-royal">Badge button <span class="mui-badge mui-badge-royal">999</span></button>
</div>
</div>
</body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">带数字的按钮</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<button type="button" class="mui-btn">Badge button <span class="mui-badge">1</span></button>
<button type="button" class="mui-btn mui-btn-primary">Badge button <span class="mui-badge mui-badge-primary">2</span></button>
<button type="button" class="mui-btn mui-btn-success">Badge button <span class="mui-badge mui-badge-success">12</span></button>
<button type="button" class="mui-btn mui-btn-warning">Badge button <span class="mui-badge mui-badge-warning">121</span></button>
<button type="button" class="mui-btn mui-btn-danger">Badge button <span class="mui-badge mui-badge-danger">999</span></button>
<button type="button" class="mui-btn mui-btn-royal">Badge button <span class="mui-badge mui-badge-royal">999</span></button>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-block.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,39 +19,37 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-content-padded{
margin: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">块级按钮</h1>
</header>
<div class="mui-content">
<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-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-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-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-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-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-royal mui-btn-block mui-btn-outlined">Block button</button>
</div>
</div>
<style type="text/css">
.mui-content-padded{
margin: 10px;
}
</style>
</body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">块级按钮</h1>
</header>
<div class="mui-content">
<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-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-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-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-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-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-royal mui-btn-block mui-btn-outlined">Block button</button>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-icons.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,61 +19,58 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-btn{
margin-top: 10px;
margin-left: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-btn{
margin-top: 10px;
margin-left: 10px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">带图标按钮</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>图标居左：</h5>
<button type="button" class="mui-btn mui-icon mui-icon-home">
首页
</button>
<button type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-search">
搜索
</button>
<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">
<span class="mui-icon mui-icon-trash"></span>
删除
</button>
<button type="button" class="mui-btn mui-btn-link">
<span class="mui-icon mui-icon-back"></span>
返回
</button>
<h5>图标居右：</h5>
<button type="button" class="mui-btn mui-icon mui-icon-home mui-right">
首页
</button>
<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-success mui-icon mui-icon-plus mui-right">添加</button>
<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-link">
下一步
<span class="mui-icon mui-icon-forward"></span>
</button>
</div>
</div>
</body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">带图标按钮</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>图标居左：</h5>
<button type="button" class="mui-btn mui-icon mui-icon-home">
首页
</button>
<button type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-search">
搜索
</button>
<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">
<span class="mui-icon mui-icon-trash"></span>
删除
</button>
<button type="button" class="mui-btn mui-btn-link">
<span class="mui-icon mui-icon-back"></span>
返回
</button>
<h5>图标居右：</h5>
<button type="button" class="mui-btn mui-icon mui-icon-home mui-right">
首页
</button>
<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-success mui-icon mui-icon-plus mui-right">添加</button>
<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-link">
下一步
<span class="mui-icon mui-icon-forward"></span>
</button>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,78 +19,76 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
input, button, .mui-btn {
margin-top: 10px;
margin-left: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
input, button, .mui-btn {
margin-top: 10px;
margin-left: 10px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">按钮（Button）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>有底色按钮：</h5>
<button type="button" class="mui-btn">
默认
</button>
<div class="mui-btn mui-btn-primary">
蓝色
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">按钮（Button）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>有底色按钮：</h5>
<button type="button" class="mui-btn">
默认
</button>
<div class="mui-btn mui-btn-primary">
蓝色
</div>
<span class="mui-btn mui-btn-success">
绿色
</span>
<button type="button" class="mui-btn mui-btn-warning">
黄色
</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>
<span class="mui-btn mui-btn-success">
绿色
</span>
<button type="button" class="mui-btn mui-btn-warning">
黄色
</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>
</body>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/checkbox.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,54 +20,52 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">复选框（checkbox）</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox</label>
<input name="checkbox" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox</label>
<input name="checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>disabled checkbox</label>
<input name="checkbox" type="checkbox" disabled="disabled">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">复选框（checkbox）</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox</label>
<input name="checkbox" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>checkbox</label>
<input name="checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox mui-left">
<label>disabled checkbox</label>
<input name="checkbox" type="checkbox" disabled="disabled">
</div>
</form>
</div>
</form>
</div>
<h5 class="mui-content-padded">图标右对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox">
<label>checkbox</label>
<input name="checkbox1" type="checkbox" >
<h5 class="mui-content-padded">图标右对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox">
<label>checkbox</label>
<input name="checkbox1" type="checkbox" >
</div>
<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 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>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/dialog.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -30,9 +28,7 @@
padding: 20px 10px ;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -53,6 +49,11 @@
</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">
var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap',function(){
......
examples/hello-mui/examples/grid-default.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,49 +20,49 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">9宫格默认样式</h1>
</header>
<div class="mui-content">
<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="#">
<span class="mui-icon mui-icon-home"></span>
<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="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<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="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<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="#">
<span class="mui-icon mui-icon-location"></span>
<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="#">
<span class="mui-icon mui-icon-search"></span>
<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="#">
<span class="mui-icon mui-icon-phone"></span>
<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="#">
<span class="mui-icon mui-icon-gear"></span>
<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="#">
<span class="mui-icon mui-icon-info"></span>
<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="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div></a></li>
</ul>
</div>
</body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">9宫格默认样式</h1>
</header>
<div class="mui-content">
<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="#">
<span class="mui-icon mui-icon-home"></span>
<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="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<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="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<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="#">
<span class="mui-icon mui-icon-location"></span>
<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="#">
<span class="mui-icon mui-icon-search"></span>
<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="#">
<span class="mui-icon mui-icon-phone"></span>
<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="#">
<span class="mui-icon mui-icon-gear"></span>
<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="#">
<span class="mui-icon mui-icon-info"></span>
<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="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div></a></li>
</ul>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/grid-pagination.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,258 +19,251 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-slider-indicator {
bottom: 0;
}
.mui-slider {
background-color: #f2f2f2;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-slider-indicator {
bottom: 0;
}
.mui-slider {
background-color: #f2f2f2;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">左右拖动分页9宫</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
循环
<div id="Gallery_Toggle" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div id="Gallery" class="mui-slider" style="margin-top:15px;">
<div class="mui-slider-group">
<div class="mui-slider-item">
<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="#">
<span class="mui-icon mui-icon-home"></span>
<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="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<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="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<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="#">
<span class="mui-icon mui-icon-location"></span>
<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="#">
<span class="mui-icon mui-icon-search"></span>
<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="#">
<span class="mui-icon mui-icon-phone"></span>
<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="#">
<span class="mui-icon mui-icon-gear"></span>
<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="#">
<span class="mui-icon mui-icon-info"></span>
<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="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<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="#">
<span class="mui-icon mui-icon-home"></span>
<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="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<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="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<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="#">
<span class="mui-icon mui-icon-location"></span>
<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="#">
<span class="mui-icon mui-icon-search"></span>
<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="#">
<span class="mui-icon mui-icon-phone"></span>
<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="#">
<span class="mui-icon mui-icon-gear"></span>
<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="#">
<span class="mui-icon mui-icon-info"></span>
<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="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<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="#">
<span class="mui-icon mui-icon-home"></span>
<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="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<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="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<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="#">
<span class="mui-icon mui-icon-location"></span>
<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="#">
<span class="mui-icon mui-icon-search"></span>
<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="#">
<span class="mui-icon mui-icon-phone"></span>
<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="#">
<span class="mui-icon mui-icon-gear"></span>
<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="#">
<span class="mui-icon mui-icon-info"></span>
<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="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div>
</a>
</li>
</ul>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">左右拖动分页9宫</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
循环
<div id="Gallery_Toggle" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div id="Gallery" class="mui-slider" style="margin-top:15px;">
<div class="mui-slider-group">
<div class="mui-slider-item">
<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="#">
<span class="mui-icon mui-icon-home"></span>
<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="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<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="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<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="#">
<span class="mui-icon mui-icon-location"></span>
<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="#">
<span class="mui-icon mui-icon-search"></span>
<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="#">
<span class="mui-icon mui-icon-phone"></span>
<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="#">
<span class="mui-icon mui-icon-gear"></span>
<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="#">
<span class="mui-icon mui-icon-info"></span>
<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="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<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="#">
<span class="mui-icon mui-icon-home"></span>
<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="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<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="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<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="#">
<span class="mui-icon mui-icon-location"></span>
<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="#">
<span class="mui-icon mui-icon-search"></span>
<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="#">
<span class="mui-icon mui-icon-phone"></span>
<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="#">
<span class="mui-icon mui-icon-gear"></span>
<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="#">
<span class="mui-icon mui-icon-info"></span>
<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="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<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="#">
<span class="mui-icon mui-icon-home"></span>
<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="#">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
<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="#">
<span class="mui-icon mui-icon-chatbubble"></span>
<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="#">
<span class="mui-icon mui-icon-location"></span>
<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="#">
<span class="mui-icon mui-icon-search"></span>
<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="#">
<span class="mui-icon mui-icon-phone"></span>
<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="#">
<span class="mui-icon mui-icon-gear"></span>
<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="#">
<span class="mui-icon mui-icon-info"></span>
<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="#">
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div>
</a>
</li>
</ul>
</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>
</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>
</div>
</div>
<script>
mui.init({
swipeBack: false,
});
mui.ready(function() {
var slider = document.getElementById('Gallery');
var group = slider.querySelector('.mui-slider-group');
var items = mui('.mui-slider-item', group);
//克隆第一个节点
var first = items[0].cloneNode(true);
first.classList.add('mui-slider-item-duplicate');
//克隆最后一个节点
var last = items[items.length - 1].cloneNode(true);
last.classList.add('mui-slider-item-duplicate');
//处理是否循环逻辑，若支持循环，需支持两点：
//1、在.mui-slider-group节点上增加.mui-slider-loop类
//2、重复增加2个循环节点，图片顺序变为：N、1、2...N、1
function toggleLoop(loop) {
if (loop) {
group.classList.add('mui-slider-loop');
group.insertBefore(last, group.firstChild);
group.appendChild(first);
} else {
group.classList.remove('mui-slider-loop');
group.removeChild(first);
group.removeChild(last);
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
});
mui.ready(function() {
var slider = document.getElementById('Gallery');
var group = slider.querySelector('.mui-slider-group');
var items = mui('.mui-slider-item', group);
//克隆第一个节点
var first = items[0].cloneNode(true);
first.classList.add('mui-slider-item-duplicate');
//克隆最后一个节点
var last = items[items.length - 1].cloneNode(true);
last.classList.add('mui-slider-item-duplicate');
//处理是否循环逻辑，若支持循环，需支持两点：
//1、在.mui-slider-group节点上增加.mui-slider-loop类
//2、重复增加2个循环节点，图片顺序变为：N、1、2...N、1
function toggleLoop(loop) {
if (loop) {
group.classList.add('mui-slider-loop');
group.insertBefore(last, group.firstChild);
group.appendChild(first);
} else {
group.classList.remove('mui-slider-loop');
group.removeChild(first);
group.removeChild(last);
}
}
}
//按下“循环”按钮的处理逻辑；
document.getElementById('Gallery_Toggle').addEventListener('toggle', function(e) {
var loop = e.detail.isActive;
toggleLoop(loop);
//按下“循环”按钮的处理逻辑；
document.getElementById('Gallery_Toggle').addEventListener('toggle', function(e) {
var loop = e.detail.isActive;
toggleLoop(loop);
});
});
});
</script>
</body>
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/icons.html
View file @ 37979d3e
......@@ -9,8 +9,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -22,15 +21,6 @@
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.flex-container {
display: -webkit-box;
display: -webkit-flex;
......@@ -70,6 +60,9 @@
color: #007aff;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Icons</h1>
......@@ -162,10 +155,13 @@
<a><span class="mui-icon mui-icon-pulldown"></span></a>
</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">
var active = null,
lastid, span;
......@@ -198,7 +194,5 @@
lastid = id;
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/info.html
View file @ 37979d3e
......@@ -51,7 +51,7 @@
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<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>
<p>
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 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -56,6 +54,8 @@
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
//语音识别完成事件
......
examples/hello-mui/examples/list-triplex-row.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,100 +19,102 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
margin-top: 0;
}
.mui-table h4{
line-height: 21px;
font-weight: 500;
}
.mui-table .oa-icon{
position: absolute;
right:0;
bottom: 0;
}
.mui-table .oa-icon-star-filled{
color:#f14e41;
}
.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
margin-top: 0;
}
.mui-table h4{
line-height: 21px;
font-weight: 500;
}
.mui-table .oa-icon{
position: absolute;
right:0;
bottom: 0;
}
.mui-table .oa-icon-star-filled{
color:#f14e41;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">三行列表</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis">信息化推进办公室张彦合同付款信息化</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
</ul>
</div>
</body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">三行列表</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis">信息化推进办公室张彦合同付款信息化</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-table">
<div class="mui-table-cell mui-col-xs-10">
<h4 class="mui-ellipsis-2">信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款</h4>
<h5>申请人：李四</h5>
<p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
</div>
<div class="mui-table-cell mui-col-xs-2 mui-text-right">
<span class="mui-h5">12:25</span>
</div>
</div>
</li>
</ul>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/list-with-input.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,66 +20,64 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">列表带input类控件</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<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">
Item 1
<button type="button" class="mui-btn">
Button
</button>
</li>
<li class="mui-table-view-cell">
Item 2
<button type="button" class="mui-btn mui-btn-primary">
Button
</button>
</li>
<li class="mui-table-view-cell">
Item 3
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
Item 4
<div class="mui-switch mui-switch-blue mui-switch-mini mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 5
</li>
<li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 6
</li>
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 7
</li>
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 8
</li>
</ul>
</div>
</div>
</body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">列表带input类控件</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<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">
Item 1
<button type="button" class="mui-btn">
Button
</button>
</li>
<li class="mui-table-view-cell">
Item 2
<button type="button" class="mui-btn mui-btn-primary">
Button
</button>
</li>
<li class="mui-table-view-cell">
Item 3
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
Item 4
<div class="mui-switch mui-switch-blue mui-switch-mini mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 5
</li>
<li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 6
</li>
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 7
</li>
<li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 8
</li>
</ul>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/media-list.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -28,9 +26,6 @@
font-size: 15px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -223,5 +218,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/nav.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -69,7 +67,8 @@
</div>
</form>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
mui.init();
var header = document.getElementById("header");
......
examples/hello-mui/examples/offcanvas-drag-left-plus-main.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -70,6 +68,8 @@
</div>
</form>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
var main,menu, mask = mui.createMask(closeMenu);
var showMenu = false,
......@@ -283,7 +283,5 @@
}
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-left-plus-menu.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
body,.mui-content {
background-color: #333;
......@@ -36,9 +34,6 @@
margin-bottom: 35px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -79,27 +74,28 @@
</li>
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:false,
});
var main = null;
mui.plusReady(function () {
main = plus.webview.currentWebview().opener();
})
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:false,
});
var main = null;
mui.plusReady(function () {
main = plus.webview.currentWebview().opener();
})
function closeMenu () {
mui.fire(main,"menu:swiperight");
}
//左滑显示出来的菜单，只需监听右滑，然后将菜单关闭即可；在该菜单上左滑，不做任何操作；
window.addEventListener("swiperight",closeMenu);
document.getElementById("close-btn").addEventListener('tap',closeMenu);
mui.menu = closeMenu;
mui.back = closeMenu;
</script>
function closeMenu () {
mui.fire(main,"menu:swiperight");
}
//左滑显示出来的菜单，只需监听右滑，然后将菜单关闭即可；在该菜单上左滑，不做任何操作；
window.addEventListener("swiperight",closeMenu);
document.getElementById("close-btn").addEventListener('tap',closeMenu);
mui.menu = closeMenu;
mui.back = closeMenu;
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-left.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -40,6 +38,9 @@
font-size: 14px;
line-height: 24px;
}
input{
color: #000;
}
</style>
</head>
......@@ -146,6 +147,8 @@
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
......@@ -223,7 +226,5 @@
});
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-right-plus-main.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -69,6 +67,9 @@
</div>
</form>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
var main,menu, mask = mui.createMask(closeMenu);
var showMenu = false,mode = 'main-move';
......@@ -277,7 +278,4 @@
}
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-right-plus-menu.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
body, .mui-content {
background-color: #333;
......@@ -36,11 +34,7 @@
margin-bottom: 35px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<div class="mui-content">
<div class="title">侧滑导航</div>
......@@ -91,7 +85,8 @@
</li>
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:false
......
examples/hello-mui/examples/offcanvas-drag-right.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -39,6 +37,9 @@
font-size: 14px;
line-height: 24px;
}
input{
color: #000;
}
</style>
</head>
......@@ -145,6 +146,8 @@
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
......@@ -218,7 +221,5 @@
});
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pagination.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,9 +20,6 @@
padding-top: 0;
}
</style>
<script type="text/javascript">
mui.init();
</script>
</head>
<body>
......@@ -193,6 +188,11 @@
</ul>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
mui.init();
</script>
<script>
(function($) {
$('.mui-pagination').on('tap', 'a', function() {
......
examples/hello-mui/examples/popovers.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -43,9 +41,6 @@
padding: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -160,7 +155,10 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui('.mui-scroll-wrapper').scroll();
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
......
examples/hello-mui/examples/pullrefresh.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -29,6 +27,8 @@
</ul>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
......
examples/hello-mui/examples/radio.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,9 +20,6 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -70,6 +65,10 @@
</form>
</div>
</div>
</body>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/range.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,90 +19,75 @@
.mui-bar-nav~.mui-content{
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>
<script>
mui.init();
</script>
</head>
<body>
<style>
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>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">滑块（range）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5 style='margin-top:35px;'>label+输入框+滑块：</h5>
<div class="mui-input-row mui-input-range field-contain">
<div style="float:left">
<label >滑块：</label>
<input type="text" id='field-range-input' value='60'>
</div>
<div style="margin-left:121px;">
<input type="range" id='field-range' value="60" min="0" max="100" />
</div>
</div>
<h5>label+滑块：<span id='inline-range-val'>20</span></h5>
<div class="mui-input-row mui-input-range">
<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" >
</div>
</div>
</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>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">滑块（range）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5 style='margin-top:35px;'>label+输入框+滑块：</h5>
<div class="mui-input-row mui-input-range field-contain">
<div style="float:left">
<label >滑块：</label>
<input type="text" id='field-range-input' value='60'>
</div>
<div style="margin-left:121px;">
<input type="range" id='field-range' value="60" min="0" max="100" />
</div>
</div>
<h5>label+滑块：<span id='inline-range-val'>20</span></h5>
<div class="mui-input-row mui-input-range">
<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" >
</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
//监听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>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-default.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,88 +20,84 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图片轮播</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
定时轮播
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<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="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</a>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图片轮播</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
定时轮播
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<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="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</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 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 type="text/javascript" charset="utf-8">
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 src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
slider.slider({
interval: 5000
});
} else {
slider.slider({
interval: 0
});
}
});
}
});
</script>
</body>
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-table-default.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -33,9 +31,6 @@
color: #333;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -64,4 +59,9 @@
</ul>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-with-title.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,9 +20,6 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -90,20 +85,22 @@
</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>
<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>
\ No newline at end of file
examples/hello-mui/examples/switches.html
View file @ 37979d3e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -9,8 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -23,9 +20,6 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -86,10 +80,10 @@
</li>
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
// mui.plusReady(function(){
// plus.webview.currentWebview().setStyle({bounce:'none'});
// });
mui.init();
mui('.mui-content .mui-switch').each(function() { //循环所有toggle
//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false');
......@@ -102,7 +96,5 @@
});
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-main.html
View file @ 37979d3e
......@@ -9,15 +9,12 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
......@@ -41,6 +38,8 @@
<span class="mui-tab-label">设置</span>
</a>
</nav>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<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 subpage_style = {
......@@ -78,6 +77,20 @@
//更改当前活跃的选项卡
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>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-about.html
View file @ 37979d3e
......@@ -8,8 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -20,9 +18,6 @@
font-size: 15px;
}
</style>
<script type="text/javascript">
mui.init();
</script>
</head>
<body>
<div class="mui-content">
......@@ -34,4 +29,9 @@
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-chat.html
View file @ 37979d3e
......@@ -8,8 +8,6 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -76,6 +74,8 @@
</ul>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
......@@ -126,7 +126,5 @@
}
</script>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-contact.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -30,25 +28,22 @@
margin: -11px 0;
}
.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name, oa-contact-position {
float: left;
}
.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name, oa-contact-position {
float: left;
}
</style>
<script type="text/javascript">
mui.init();
</script>
</head>
<body>
......@@ -149,10 +144,11 @@
</div>
</li>
</ul>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-setting.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,9 +19,6 @@
font-size: 15px;
}
</style>
<script type="text/javascript">
mui.init();
</script>
</head>
<body>
......@@ -54,7 +49,7 @@
</ul>
<ul class="mui-table-view" style="margin-top: 25px;">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<a id="about" class="mui-navigate-right">
关于mui
</a>
</li>
......@@ -69,5 +64,15 @@
</div>
</style>
</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>
\ No newline at end of file
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -22,17 +20,6 @@
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
/*.mui-bar-nav ~ .mui-content{padding-top:54px;}*/
.mui-card .mui-control-content {
padding: 10px;
}
......@@ -40,6 +27,8 @@
height: 150px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">按钮式选项卡</h1>
......@@ -188,7 +177,10 @@
</form>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
(function($) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
......
examples/hello-mui/examples/tabbar-labels-only.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,32 +20,32 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">文字选项卡</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#">
电话沟通
</a>
<a class="mui-tab-item" href="#">
在线交流
</a>
<a class="mui-tab-item" href="#">
短信咨询
</a>
<a class="mui-tab-item" href="#">
查看地图
</a>
</nav>
</body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">文字选项卡</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#">
电话沟通
</a>
<a class="mui-tab-item" href="#">
在线交流
</a>
<a class="mui-tab-item" href="#">
短信咨询
</a>
<a class="mui-tab-item" href="#">
查看地图
</a>
</nav>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-with-submenus.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -22,18 +20,12 @@
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-bar-popover {
width: 30%;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">含二级菜单的选项卡</h1>
......@@ -76,5 +68,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar.html
View file @ 37979d3e
......@@ -8,8 +8,6 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -52,9 +50,6 @@
float: left;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -247,7 +242,10 @@
</ul>
</div>
</div>
</body>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-badges.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,52 +20,51 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">右侧带数字角标</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<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-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 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-divider">右侧有导航箭头</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="mui-badge mui-badge-danger">15</span>
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="mui-badge mui-badge-purple">5</span>
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="mui-badge mui-badge-warning">5</span>
Item 3
</a>
</li>
</ul>
</div>
</div>
</body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">右侧带数字角标</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<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-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 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-divider">右侧有导航箭头</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="mui-badge mui-badge-danger">15</span>
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="mui-badge mui-badge-purple">5</span>
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="mui-badge mui-badge-warning">5</span>
Item 3
</a>
</li>
</ul>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-collapses.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,58 +20,56 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">二级列表</h1>
</header>
<div class="mui-content">
<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>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">二级列表</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">iOS</a>
</li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">Android</a>
<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"><a class="mui-navigate-right" href="#">HTML5</a>
</li>
</ul>
</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">
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">PC方案</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="#">iOS</a>
</li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">Android</a>
</li>
<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">HTML5</a>
</li>
</ul>
</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 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>
</ul>
</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">
<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>
</ul>
</div>
</div>
</body>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-swipe.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -136,6 +134,8 @@
</li>
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
//禁止右滑关闭
mui.init({
......@@ -181,7 +181,5 @@
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews.html
View file @ 37979d3e
......@@ -8,15 +8,10 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
......@@ -28,66 +23,64 @@
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<div class="mui-content">
<div class="title">
右侧无导航箭头
</div>
<ul class="mui-table-view">
<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 3</li>
</ul>
<div class="title">
右侧有导航箭头
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
<div class="title">
card（圆角列表）
</div>
<div class="mui-card" style="margin-bottom: 35px;">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</div>
</div>
</body>
<div class="mui-content">
<div class="title">
右侧无导航箭头
</div>
<ul class="mui-table-view">
<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 3</li>
</ul>
<div class="title">
右侧有导航箭头
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
<div class="title">
card（圆角列表）
</div>
<div class="mui-card" style="margin-bottom: 35px;">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/template.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -74,6 +72,8 @@
</header>
<div class="mui-loader">加载中...</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
var titleElem = document.getElementById("title")
var menu = document.getElementById("menu")
......@@ -91,15 +91,14 @@
}
menu.style.display = display;
});
var contentWebview = null;
var contentWebview = null;
document.getElementById("menu").addEventListener('tap', function(e) {
e.stopPropagation();
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS('mui("#topPopover").popover("toggle")');
});
//敲击顶部、回到顶部
document.querySelector('header').addEventListener('tap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
......
examples/hello-mui/examples/template_pullrefresh.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -67,7 +65,8 @@
</header>
<div class="mui-content"></div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
var titleElem = document.getElementById("title");
window.addEventListener("updateHeader", function(e) {
......@@ -76,7 +75,6 @@
titleElem.className = "mui-title mui-fadein";
});
var contentWebview = null;
//敲击顶部、回到顶部
document.querySelector('header').addEventListener('tap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
......
examples/hello-mui/examples/typography.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,37 +19,33 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-content-padded {
padding: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-content-padded {
padding: 10px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Typography</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<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>
</body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Typography</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<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>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/js/app.js
View file @ 37979d3e
......@@ -16,7 +16,7 @@
if ($.targets._popover) {
$($.targets._popover).popover('hide');
} else {
current.parent().evalJS('mui.back();');
current.parent().evalJS('mui&&mui.back();');
}
} else {
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