Skip to content

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

First Pages commit

parent 17dd3025
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1 addition and 16244 deletions
README.md deleted 100644 → 0
View file @ 17dd3025
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；
dist/css/mui.css deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
dist/css/mui.min.css deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
dist/js/mui.js deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
dist/js/mui.min.js deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/.project deleted 100644 → 0
View file @ 17dd3025
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>app-demo</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>com.aptana.ide.core.unifiedBuilder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>com.pandora.projects.ui.MKeyBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.pandora.projects.ui.MKeyNature</nature>
</natures>
</projectDescription>
examples/hello-mui/css/mui.min.css deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/css/oa.css deleted 100644 → 0
View file @ 17dd3025
@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
examples/hello-mui/examples/badges.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/buttons-with-badges.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/buttons-with-block.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/buttons-with-fabs.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/buttons-with-icons.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/buttons.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/cards.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/checkbox.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/demo.html deleted 100644 → 0
View file @ 17dd3025
<!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 id="demo" class="mui-content-padded">
<button class="mui-btn mui-btn-block" data-webview-id="demo1" data-webview-url="toggles.html">
Block button
</button>
<button class="mui-btn mui-btn-primary mui-btn-block" data-webview-id="demo2" data-webview-url="typography.html">
Block button
</button>
<button class="mui-btn mui-btn-success mui-btn-block" data-webview-id="demo3" data-webview-url="tableviews.html">
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>
</div>
</div>
<script>
(function($) {
var templates = {};
var show = {
aniShow : 'slide-in-right',
duration : 400
};
$.ready(function() {
$('#demo').on('tap', 'button', function() {
var id = this.getAttribute('data-webview-id');
var url = this.getAttribute('data-webview-url');
var webview = templates[id];
if (webview) {
if (webview.showed) {
webview.clear();
}
webview.show(show.aniShow, show.duration);
webview.loadURL(url);
var waiting = null;
var timeout = setTimeout(function() {
console.log(timeout);
waiting = plus.nativeUI.showWaiting();
}, show.duration);
webview.addEventListener("loaded", function() {
console.log(waiting);
if (waiting) {
waiting.close();
} else {
clearTimeout(timeout);
}
webview.showed = true;
}, false);
}
});
});
$.plusReady(function() {
templates = {
demo1 : createTemplate('DEMO1'),
demo2 : createTemplate('DEMO2'),
demo3 : createTemplate('DEMO3')
}
});
})(mui);
var createTemplate = function(title) {
title = title || '';
var template = plus.webview.create('titlebar.html');
template.addEventListener('loaded', function() {
template.evalJS('document.querySelector(".mui-title").innerHTML="' + title + '"');
});
return template;
};
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/dialog.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/events.html deleted 100644 → 0
View file @ 17dd3025
<!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">Events</h1>
</header>
<div class="mui-content">
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/forms-with-group-and-labels.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/forms-with-group.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/forms.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/grid-default.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/grid-pagination.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/icons.html deleted 100644 → 0
View file @ 17dd3025
<!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>
</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-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-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-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-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-right"></span>
</a>
<a>
<span class="mui-icon mui-icon-left-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-cycle"></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>
<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-close-cycle"></span>
</a>
</div>
<div class="mui-content-padded">
<!--<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>-->
<!--<div class="mui-spinner mui-spinner-large">
<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>-->
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/info.html deleted 100644 → 0
View file @ 17dd3025
<!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>
<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>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/inputs.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/iscroll.html deleted 100644 → 0
View file @ 17dd3025
<!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
examples/hello-mui/examples/list-triplex-row.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/list-with-input.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/modals.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/oa-contact-list.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/oa-contact-main.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/oa-grid.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/oa-missives-detail.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/offcanvas-plus-menu.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/offcanvas-with-left.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/offcanvas-with-right.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/pagination.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/popovers-with-js-call.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/popovers.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/preload-webview.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/preload.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/pulldown-and-pullup.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/pulldown-with-5+.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/pulldown.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/pullup.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/radio.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/range.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/slider-default.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/slider-table-default.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/slider-with-title.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/speech.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/switches.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/tabbar-labels-only.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/tabbar-with-anchor.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/tabbar-with-chat.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/tabbar-with-map.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/tabbar-with-sms.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/tabbar-with-submenus.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/tabbar.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/tableview-image-left.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/tableview-image-right.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/tableviews-with-swipe.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/tableviews.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/titlebar-with-buttons.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/titlebar-with-icons.html deleted 100644 → 0
View file @ 17dd3025
<!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>
<a class="mui-icon mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title">导航条包含图标</h1>
</header>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/titlebar-with-search.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/titlebar.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/top.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/top_list.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/typography.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/images/42x42.gif deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/images/60x60.gif deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/images/cbd.jpg deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/images/muwu.jpg deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/images/pull_arrow.png deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/images/pull_fresh.png deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/images/shuijiao.jpg deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/images/yuantiao.jpg deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/index.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/js/app.js deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/js/mui.min.js deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/js/update.js deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/list.html deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/manifest.json deleted 100644 → 0
View file @ 17dd3025
This diff is collapsed.
index.html 0 → 100644
View file @ b2fe7b29
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