Skip to content

M
mui
Commit 86f3bac6 authored by hbcui1984's avatar hbcui1984
Browse files
Options

精简主列表预加载代码

parent 9550b51c
Expand all Show whitespace changes
Inline Side-by-side
Showing with 16018 additions and 84 deletions
_site/LICENSE 0 → 100644
View file @ 86f3bac6
The MIT License (MIT)
Copyright (c) 2014 connors and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
_site/README.md 0 → 100644
View file @ 86f3bac6
mui
===
性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。
mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。
新手指南
--------
从<http://www.dcloud.io/hellomui>下载Hello MUI并安装，可直接在手机上体验MUI的控件UI及能力展示；
若想详细了解Hello MUI的源码及工作原理，可从<http://www.dcloud.io>下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，也可以在手机上体验MUI的各项能力。
若要使用MUI进行移动APP开发，可通过Hbuilder，新建“移动APP”，并选择“MUI”工程模板，该模板已内置MUI相关的资源文件。
License
-------
mui遵循MIT License；
_site/dist/css/mui.css 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/dist/css/mui.min.css 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/dist/js/mui.js 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/dist/js/mui.min.js 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/css/mui.min.css 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/css/oa.css 0 → 100644
View file @ 86f3bac6
@font-face {
font-family: OAicons;
font-style: normal;
font-weight: normal;
src: url("../fonts/ratchicons.eot");
src: url("../fonts/ratchicons.eot?#iefix") format("embedded-opentype"), url("../fonts/ratchicons.woff") format("woff"), url("../fonts/ratchicons.ttf") format("truetype"), url("../fonts/ratchicons.svg#svgFontName") format("svg");
}
.oa-icon{
display: inline-block;
font-family: OAicons;
font-size: 24px;
line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased;
}
.oa-icon-back:before {
content: '\e80a';
}
.oa-icon-bars:before {
content: '\e80e';
}
.oa-icon-caret:before {
content: '\e80f';
}
.oa-icon-check:before {
content: '\e810';
}
.oa-icon-close:before {
content: '\e811';
}
.oa-icon-code:before {
content: '\e812';
}
.oa-icon-compose:before {
content: '\e813';
}
.oa-icon-download:before {
content: '\e815';
}
.oa-icon-edit:before {
content: '\e829';
}
.oa-icon-forward:before {
content: '\e82a';
}
.oa-icon-gear:before {
content: '\e821';
}
.oa-icon-home:before {
content: '\e82b';
}
.oa-icon-info:before {
content: '\e82c';
}
.oa-icon-list:before {
content: '\e823';
}
.oa-icon-more-vertical:before {
content: '\e82e';
}
.oa-icon-more:before {
content: '\e82f';
}
.oa-icon-pages:before {
content: '\e824';
}
.oa-icon-pause:before {
content: '\e830';
}
.oa-icon-person:before {
content: '\e832';
}
.oa-icon-play:before {
content: '\e816';
}
.oa-icon-plus:before {
content: '\e817';
}
.oa-icon-refresh:before {
content: '\e825';
}
.oa-icon-search:before {
content: '\e819';
}
.oa-icon-share:before {
content: '\e81a';
}
.oa-icon-sound:before {
content: '\e827';
}
.oa-icon-sound2:before {
content: '\e828';
}
.oa-icon-sound3:before {
content: '\e80b';
}
.oa-icon-sound4:before {
content: '\e80c';
}
.oa-icon-star-filled:before {
content: '\e81b';
}
.oa-icon-star:before {
content: '\e81c';
}
.oa-icon-stop:before {
content: '\e81d';
}
.oa-icon-trash:before {
content: '\e81e';
}
.oa-icon-up-nav:before {
content: '\e81f';
}
.oa-icon-up:before {
content: '\e80d';
}
.oa-icon-right-nav:before {
content: '\e818';
}
.oa-icon-right:before {
content: '\e826';
}
.oa-icon-down-nav:before {
content: '\e814';
}
.oa-icon-down:before {
content: '\e820';
}
.oa-icon-left-nav:before {
content: '\e82d';
}
.oa-icon-left:before {
content: '\e822';
}
\ No newline at end of file
_site/examples/hello-mui/examples/badges.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/buttons-with-badges.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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-left-nav mui-pull-left"></a>
<h1 class="mui-title">带数字的按钮</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<button class="mui-btn">Badge button <span class="mui-badge">1</span></button>
<button class="mui-btn mui-btn-primary">Badge button <span class="mui-badge mui-badge-primary">2</span></button>
<button class="mui-btn mui-btn-success">Badge button <span class="mui-badge mui-badge-success">12</span></button>
<button class="mui-btn mui-btn-warning">Badge button <span class="mui-badge mui-badge-warning">121</span></button>
<button class="mui-btn mui-btn-danger">Badge button <span class="mui-badge mui-badge-danger">999</span></button>
<button class="mui-btn mui-btn-royal">Badge button <span class="mui-badge mui-badge-royal">999</span></button>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/buttons-with-block.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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-content-padded">
<button class="mui-btn mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-primary mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-success mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-warning mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-danger mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-royal mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-success mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-warning mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined">Block button</button>
<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>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/buttons-with-fabs.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-btn{
margin-top: 10px;
margin-right: 10px;
margin-left: 5px;
}
.mui-btn.mui-btn-mini{
margin-left: 13px;
margin-right: 18px;
}
</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">悬浮控制按钮</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<button class="mui-btn mui-fab mui-btn-mini">
<span class="mui-icon mui-icon-search"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-primary">
<span class="mui-icon mui-icon-plus"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-success">
<span class="mui-icon mui-icon-sms"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-danger">
<span class="mui-icon mui-icon-category"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-outlined">
<span class="mui-icon mui-icon-search"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-primary mui-btn-outlined">
<span class="mui-icon mui-icon-plus"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-success mui-btn-outlined">
<span class="mui-icon mui-icon-sms"></span>
</button>
<button class="mui-btn mui-fab mui-btn-mini mui-btn-danger mui-btn-outlined">
<span class="mui-icon mui-icon-category"></span>
</button>
</div>
<div class="mui-content-padded">
<button class="mui-btn mui-fab">
<span class="mui-icon mui-icon-search"></span>
</button>
<button class="mui-btn mui-fab mui-btn-primary">
<span class="mui-icon mui-icon-plus"></span>
</button>
<button class="mui-btn mui-fab mui-btn-success">
<span class="mui-icon mui-icon-sms"></span>
</button>
<button class="mui-btn mui-fab mui-btn-danger">
<span class="mui-icon mui-icon-category"></span>
</button>
<button class="mui-btn mui-fab mui-btn-outlined">
<span class="mui-icon mui-icon-search"></span>
</button>
<button class="mui-btn mui-fab mui-btn-primary mui-btn-outlined">
<span class="mui-icon mui-icon-plus"></span>
</button>
<button class="mui-btn mui-fab mui-btn-success mui-btn-outlined">
<span class="mui-icon mui-icon-sms"></span>
</button>
<button class="mui-btn mui-fab mui-btn-danger mui-btn-outlined">
<span class="mui-icon mui-icon-category"></span>
</button>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/buttons-with-icons.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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-left-nav mui-pull-left"></a>
<h1 class="mui-title">带图标按钮</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>图标居左：</h5>
<button class="mui-btn mui-icon mui-icon-home">
首页
</button>
<button class="mui-btn mui-btn-primary mui-icon mui-icon-search">
搜索
</button>
<button class="mui-btn mui-btn-success mui-icon mui-icon-plus">添加</button>
<button class="mui-btn mui-btn-danger mui-btn-outlined">
<span class="mui-icon mui-icon-trash"></span>
删除
</button>
<button class="mui-btn mui-btn-outlined">
<span class="mui-icon mui-icon-calendar"></span>
日程
</button>
<button class="mui-btn mui-btn-link">
<span class="mui-icon mui-icon-left-nav"></span>
返回
</button>
<h5>图标居右：</h5>
<button class="mui-btn mui-icon mui-icon-home mui-right">
首页
</button>
<button class="mui-btn mui-btn-primary mui-icon mui-icon-search mui-right">
搜索
</button>
<button class="mui-btn mui-btn-success mui-icon mui-icon-plus mui-right">添加</button>
<button class="mui-btn mui-btn-danger mui-btn-outlined">
删除
<span class="mui-icon mui-icon-trash"></span>
</button>
<button class="mui-btn mui-btn-outlined">
日程
<span class="mui-icon mui-icon-calendar"></span>
</button>
<button class="mui-btn mui-btn-link">
下一步
<span class="mui-icon mui-icon-right"></span>
</button>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/buttons.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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 class="mui-btn">
默认
</button>
<div class="mui-btn mui-btn-primary">
蓝色
</div>
<span class="mui-btn mui-btn-success">
绿色
</span>
<button class="mui-btn mui-btn-warning">
黄色
</button>
<button class="mui-btn mui-btn-danger">
红色
</button>
<button class="mui-btn mui-btn-royal">
紫色
</button>
<h5 style="margin-top: 10px;">无底色按钮（使用父元素的背景色）：</h5>
<button class="mui-btn mui-btn-outlined">
默认
</button>
<button class="mui-btn mui-btn-primary mui-btn-outlined">
操作
</button>
<button class="mui-btn mui-btn-success mui-btn-outlined">
成功
</button>
<button class="mui-btn mui-btn-warning mui-btn-outlined">
警告
</button>
<button class="mui-btn mui-btn-danger mui-btn-outlined">
危险
</button>
<button class="mui-btn mui-btn-royal mui-btn-outlined">
高贵
</button>
<h5 style="margin-top: 15px;">链接按钮：</h5>
<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>按钮</button>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/cards.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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">Cards</h1>
</header>
<div class="mui-content">
<div class="mui-card">
<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>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/checkbox.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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-checkbox-cycle mui-left">
<label>Checkbox</label>
<input name="checkbox" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox mui-checkbox-cycle mui-left mui-checked">
<label>Checkbox</label>
<input name="checkbox" type="checkbox" checked>
</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" >
</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 mui-checkbox-cycle">
<label>Checkbox</label>
<input name="checkbox1" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox mui-checkbox-cycle">
<label>Checkbox</label>
<input name="checkbox1" type="checkbox" checked>
</div>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/dialog.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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">消息框（dialog）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;text-align: center;">
<button id='alertBtn' class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
<button id='confirmBtn' class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
<button id='promptBtn' class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
<button id='toastBtn' class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
<div id="info">
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap',function(){
mui.alert('欢迎使用Hello MUI','Hello MUI',function(){
info.innerText = '你刚关闭了警告框';
});
});
document.getElementById("confirmBtn").addEventListener('tap',function(){
var btnArray = ['是','否'];
mui.confirm('MUI是个好框架，确认？','Hello MUI',btnArray,function(e){
if(e.index==0){
info.innerText = '你刚确认MUI是个好框架';
}else{
info.innerText = 'MUI没有得到你的认可，继续加油'
}
})
});
document.getElementById("promptBtn").addEventListener('tap',function(){
var btnArray = ['确定','取消'];
mui.prompt('请输入你对MUI的评语：','性能好',btnArray,function(e){
if(e.index==0){
info.innerText = '谢谢你的评语：'+e.value;
}else{
info.innerText = '你点了取消按钮';
}
})
});
document.getElementById("toastBtn").addEventListener('tap',function(){
mui.toast('欢迎体验Hello MUI');
});
</script>
<style type="text/css">
.mui-btn{
display: block;
width: 120px;
margin: 10px auto;
}
#info{
padding: 20px 10px ;
}
</style>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/forms-with-group-and-labels.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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">Form with input group and labels</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label>Radio</label>
<input name="radio" type="radio">
</div>
<div class="mui-input-row mui-radio">
<label>Radio</label>
<input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-checkbox">
<label>Checkbox</label>
<input name="checkbox" type="checkbox" >
</div>
<div class="mui-input-row mui-checkbox">
<label>Checkbox</label>
<input name="checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row mui-select">
<label>Select</label>
<select><option>选项1</option><option>选项2</option><option>选项3</option><option>选项4</option><option>选项5</option></select>
</div>
<div class="mui-input-row mui-input-range">
<label>Slider</label>
<input type="range" value="60" min="0" max="100">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="placeholder">
</div>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/forms-with-group.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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">Form with input group</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<form class="mui-input-group">
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="Full name">
</div>
<div class="mui-input-row">
<input type="email" class="mui-input-speech" placeholder="Email">
</div>
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="Username">
</div>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/forms.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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">Forms</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<form>
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="Full name">
</div>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-speech mui-input-clear" placeholder="search">
</div>
<div class="mui-input-row">
<input type="text" class="mui-input-speech mui-input-clear" placeholder="speech">
</div>
<div class="mui-input-row mui-input-range">
<input type="range" value="60" min="0" max="100">
</div>
<div class="mui-input-row">
<textarea rows="5"></textarea>
</div>
<div class="mui-input-row">
<button class="mui-btn mui-btn-positive mui-btn-block">Choose existing</button>
</div>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/grid-default.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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-hidden" style="margin-bottom:15px;">
<li class="mui-table-view-cell">cared
<div id="M_Toggle_Grid_Carded" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<div class="mui-card">
<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-sms"><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-calendar"></span>
<div class="mui-media-body">Calendar</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-chat"></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-category"></span>
<div class="mui-media-body">Sort</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-map"></span>
<div class="mui-media-body">Map</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-cog"></span>
<div class="mui-media-body">Setting</div></a></li>
</ul>
</div>
</div>
<script>
var content = document.querySelector('.mui-content');
var toggle = document.getElementById('M_Toggle_Grid_Carded');
var card = document.querySelector('.mui-card');
var grid = document.querySelector('.mui-grid-view');
toggle.addEventListener('toggle', function(event) {
var isActive = event.detail.isActive;
if (isActive) {
card.appendChild(grid);
card.style.display = '';
} else {
content.appendChild(grid);
card.style.display = 'none';
}
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/grid-pagination.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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 class="mui-badge">5</span></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-sms"></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-calendar"></span>
<div class="mui-media-body">
Calendar
</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-chat"></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-category"></span>
<div class="mui-media-body">
Sort
</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-map"></span>
<div class="mui-media-body">
Map
</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-cog"></span>
<div class="mui-media-body">
Setting
</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-sms"><span class="mui-badge">6</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-calendar"></span>
<div class="mui-media-body">
Calendar
</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-chat"></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-category"></span>
<div class="mui-media-body">
Sort
</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-map"></span>
<div class="mui-media-body">
Map
</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-cog"></span>
<div class="mui-media-body">
Setting
</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-sms"></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-calendar"><span class="mui-badge">7</span></span>
<div class="mui-media-body">
Calendar
</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-chat"></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-category"></span>
<div class="mui-media-body">
Sort
</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-map"></span>
<div class="mui-media-body">
Map
</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-cog"></span>
<div class="mui-media-body">
Setting
</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>
<script>
$.init({
swipeBack : false,
});
$.ready(function() {
var slider = document.getElementById('Gallery');
var group = slider.querySelector('.mui-slider-group');
var items = $('.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');
function toggleLoop(toggle) {
if (toggle) {
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 detail = e.detail;
toggleLoop(detail.isActive);
});
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/icons.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-content-padded {
padding: 10px;
}
.mui-content-padded a {
margin: 3px;
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 25px;
float: left;
}
.mui-content-padded a .mui-icon {
margin-top: 12px;
}
.mui-spinner {
margin-top: 12px
}
.mui-spinner-indicator {
background: #007AFF;
}
</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">Icons</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<a>
<div class="mui-spinner">
<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
</div>
</a>
<a>
<span class="mui-icon mui-icon-spinner mui-spin"></span>
</a>
<a>
<span class="mui-icon mui-icon-spinner-cycle mui-spin"></span>
</a>
<a>
<span class="mui-icon mui-icon-weibo"></span>
</a>
<a>
<span class="mui-icon mui-icon-pin"></span>
</a>
<!--电话-->
<a><span class="mui-icon mui-icon-phone"></span></a>
<a><span class="mui-icon mui-icon-phone-solid"></span></a>
<a><span class="mui-icon mui-icon-phone-filled"></span></a>
<a>
<span class="mui-icon mui-icon-map"></span>
</a>
<a>
<span class="mui-icon mui-icon-sms"></span>
</a>
<a>
<span class="mui-icon mui-icon-chat"></span>
</a>
<a>
<span class="mui-icon mui-icon-search"></span>
</a>
<a><span class="mui-icon mui-icon-close"></span></a>
<a><span class="mui-icon mui-icon-close-cycle"></span></a>
<a><span class="mui-icon mui-icon-clear"></span></a>
<a>
<span class="mui-icon mui-icon-reply"></span>
</a>
<a>
<span class="mui-icon mui-icon-trash"></span>
</a>
<a>
<span class="mui-icon mui-icon-edit"></span>
</a>
<a>
<span class="mui-icon mui-icon-home"></span>
</a>
<a><span class="mui-icon mui-icon-category"></span></a>
<a><span class="mui-icon mui-icon-bars"></span></a>
<a>
<span class="mui-icon mui-icon-calendar"></span>
</a>
<a>
<span class="mui-icon mui-icon-cog"></span>
</a>
<a>
<span class="mui-icon mui-icon-speech"></span>
</a>
<a><span class="mui-icon mui-icon-pulldown"></span></a>
<a><span class="mui-icon mui-icon-arrow-left"></span></a>
<a><span class="mui-icon mui-icon-arrow-right"></span></a>
<!--较粗的箭头-->
<a><span class="mui-icon mui-icon-up"></span></a>
<a><span class="mui-icon mui-icon-down"></span></a>
<a><span class="mui-icon mui-icon-left"></span></a>
<a><span class="mui-icon mui-icon-right"></span></a>
<!--导航箭头-->
<a><span class="mui-icon mui-icon-up-nav"></span></a>
<a><span class="mui-icon mui-icon-down-nav"></span></a>
<a><span class="mui-icon mui-icon-left-nav"></span></a>
<a><span class="mui-icon mui-icon-right-nav"></span></a>
<a><span class="mui-icon mui-icon-radio"></span></a>
<a><span class="mui-icon mui-icon-radio-checked"></span></a>
<a><span class="mui-icon mui-icon-checkbox"></span></a>
<a><span class="mui-icon mui-icon-checkbox-checked"></span></a>
<a><span class="mui-icon mui-icon-checkbox-checked-cycle"></span></a>
<a><span class="mui-icon mui-icon-bars"></span></a>
<a><span class="mui-icon mui-icon-plus"></span></a>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/info.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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-content-padded">
<h4 style="margin-top:10px;">mui</h4>
<p >
性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败
； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。
</p>
<p >
mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。
</p>
<h4>新手指南</h4>
<p>
若想详细了解Hello MUI的源码及工作原理，可从<a href="http://www.dcloud.io">Dcloud官网</a>下载Hbuilder，选择新建“移动APP”，并选择“Hello MUI”工程模板，创建工程；然后通过数据线将手机连接上电脑，点击运行，就可以在手机上体验MUI的各项能力。
</p><p>
若要使用MUI进行移动APP开发，可通过Hbuilder，新建“移动APP”，并选择“MUI”工程模板，该模板已内置MUI相关的资源文件。
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为0.5.5，可到<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>;
</p>
</div>
</div>
<style type="text/css">
p{
text-indent: 22px;
padding: 5px 8px;
}
html,body,.mui-content{
background-color: #fff;
}
h4{
margin-left: 5px;
}
</style>
<script type="text/javascript" charset="utf-8">
//处理点击事件，需要打开原生浏览器
$('body').on('tap', 'a', function(e) {
var href = this.getAttribute('href');
if (href) {
if(window.plus){
plus.runtime.openURL(href);
}else{
location.href = href;
}
}
});
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/inputs.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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-content-padded" style="margin: 5px;">
<h5>默认搜索框：</h5>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="">
</div>
<h5>语音输入搜索框：</h5>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框">
</div>
<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>
</form>
<div class="mui-input-row" style="margin: 10px 5px;">
<textarea rows="5" placeholder="多行文本框"></textarea>
</div>
</div>
</div>
<style type="text/css">
h5{
margin: 5px 7px;
}
</style>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/iscroll.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
body {
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
</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">iscroll 4</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">Phone</span>
</a>
<a class="mui-tab-item" href="#">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">Chat</span>
</a>
<a class="mui-tab-item" href="#">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">SMS</span>
</a>
<a class="mui-tab-item" href="#">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">Map</span>
</a>
</nav>
<div class="mui-bar mui-bar-standard mui-bar-header-secondary">
<button id="addRow" class="mui-btn mui-btn-primary mui-btn-block">
增加50个列表项
</button>
</div>
<div id="wrapper" class="mui-content mui-iscroll-wrapper">
<div class="mui-iscroll">
<ul class="mui-table-view mui-table-view-chevron"></ul>
</div>
</div>
<script src="../js/iscroll.js"></script>
<script>
(function($) {
$.ready(function() {
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
var myScroll = new iScroll('wrapper', {
hScroll : false,
bounce : false,
lockDirection : true,
useTransform : true,
useTransition : false,
checkDOMChanges : false,
onBeforeScrollStart : function(e) {
var target = e.target;
while (target.nodeType != 1) {
target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
e.preventDefault();
}
}
}
});
var table = document.body.querySelector('.mui-table-view');
function addRows(count) {
var cells = document.body.querySelectorAll('.mui-table-view-cell');
var frag = document.createDocumentFragment();
for (var i = cells.length, len = i + count; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
frag.appendChild(li);
}
table.appendChild(frag);
//refresh
myScroll.refresh();
}
addRows(100);
document.getElementById('addRow').addEventListener('tap', function() {
addRows(50);
alert('增加成功，共计' + document.body.querySelectorAll('.mui-table-view-cell').length + '个列表项');
});
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/list-triplex-row.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<link rel="stylesheet" href="../css/oa.css">
<style>
.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>
<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>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/list-with-input.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/modals.html 0 → 100644
View file @ 86f3bac6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</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">Modals</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<a href="#modal" class="mui-btn mui-btn-primary mui-btn-block">Click</a>
</div>
<div id="modal" class="mui-modal">
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-close mui-pull-right" href="#modal"></a>
<h1 class="mui-title">Modal</h1>
</header>
<div class="mui-content">
<p class="mui-content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
_site/examples/hello-mui/examples/oa-contact-list.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/oa-contact-main.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/oa-grid.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/oa-missives-detail.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/offcanvas-plus-menu.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/offcanvas-with-left.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/offcanvas-with-right.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/pagination.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/popovers-with-js-call.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/popovers.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/preload-mixwebview-main.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/preload-webview.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/preload.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/pulldown-and-pullup.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/pullrefresh-down-main.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/pullup.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/radio.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/range.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/slider-default.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/slider-table-default.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/slider-table-pagination.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/slider-with-title.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/speech.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/switches.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/tab-webview-main.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/tab-webview-subpage-map.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/tab-webview-subpage-sms.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/tabbar-labels-only.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/tabbar-with-submenus.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/tabbar.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/tableview-image-left.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/tableview-image-right.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/tableviews-with-badges.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/tableviews-with-swipe.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/tableviews.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/titlebar-with-buttons.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/titlebar-with-icons.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/titlebar-with-search.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/titlebar.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/top.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/top_list.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/examples/typography.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/images/muwu.jpg 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/images/pull_arrow.png 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/images/pull_fresh.png 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/images/shuijiao.jpg 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/images/yuantiao.jpg 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/index.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/js/app.js 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/js/mui.min.js 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/js/update.js 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/list.html 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
_site/examples/hello-mui/manifest.json 0 → 100644
View file @ 86f3bac6
This diff is collapsed.
examples/hello-mui/list.html
View file @ 86f3bac6
This diff is collapsed.
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