Skip to content

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

上传hello mui源码

parent d33af97b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 8781 additions and 0 deletions
examples/hello-mui/.project 0 → 100644
View file @ afa28503
<?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 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/css/oa.css 0 → 100644
View file @ afa28503
@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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-fabs.html 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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/events.html 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的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 0 → 100644
View file @ afa28503
<!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 0 → 100644
View file @ afa28503
<!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/modals.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/oa-contact-list.html 0 → 100644
View file @ afa28503
<!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 type="text/css">
.mui-content > .mui-table-view:first-child {
margin-top: 0px;
}
</style>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">姓名1</a></li>
<li class="mui-table-view-cell"><a href="#">姓名2</a></li>
<li class="mui-table-view-cell"><a href="#">姓名3</a></li>
<li class="mui-table-view-cell"><a href="#">姓名4</a></li>
<li class="mui-table-view-cell"><a href="#">姓名5</a></li>
<li class="mui-table-view-cell"><a href="#">姓名6</a></li>
<li class="mui-table-view-cell"><a href="#">姓名7</a></li>
<li class="mui-table-view-cell"><a href="#">姓名8</a></li>
<li class="mui-table-view-cell"><a href="#">姓名9</a></li>
<li class="mui-table-view-cell"><a href="#">姓名10</a></li>
<li class="mui-table-view-cell"><a href="#">姓名11</a></li>
<li class="mui-table-view-cell"><a href="#">姓名12</a></li>
<li class="mui-table-view-cell"><a href="#">姓名13</a></li>
<li class="mui-table-view-cell"><a href="#">姓名14</a></li>
<li class="mui-table-view-cell"><a href="#">姓名15</a></li>
<li class="mui-table-view-cell"><a href="#">姓名16</a></li>
<li class="mui-table-view-cell"><a href="#">姓名17</a></li>
<li class="mui-table-view-cell"><a href="#">姓名18</a></li>
<li class="mui-table-view-cell"><a href="#">姓名19</a></li>
<li class="mui-table-view-cell"><a href="#">姓名20</a></li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
mui.init({optimize:false,swipeBack: true});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/oa-contact-main.html 0 → 100644
View file @ afa28503
<!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>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="tabbar.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">Phone</span>
</a>
<a class="mui-tab-item" href="tabbar-with-chat.html">
<span class="mui-icon mui-icon-chat"></span>
<span class="mui-tab-label">Chat</span>
</a>
<a class="mui-tab-item" href="tabbar-with-sms.html">
<span class="mui-icon mui-icon-sms"></span>
<span class="mui-tab-label">SMS</span>
</a>
<a class="mui-tab-item" href="tabbar-with-map.html">
<span class="mui-icon mui-icon-map"></span>
<span class="mui-tab-label">Map</span>
</a>
</nav>
<script type="text/javascript">
mui.plusReady(function(){
var webview = plus.webview.currentWebview();
var list = plus.webview.create('oa-contact-list.html', 'oa-list', {top:'45px',bottom:'50px'});
webview.append(list);
});
mui.init({optimize:false,swipeBack: false});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/oa-grid.html 0 → 100644
View file @ afa28503
<!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>
/**grid 自适应代码**/
html, body, .mui-content {
height: 100%;
}
.mui-content > .mui-table-view:first-child {
margin-top: 0px;
}
.mui-content {
position: relative;
}
.mui-grid-view {
position: absolute;
top: 184px;
bottom: 0;
min-height: 330px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell {
height: 33.33333333%;
}
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn) {
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -40px;
}
</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">
<div style="height:140px;width:100%;background-image:url(../images/muwu.jpg);background-position:center center;"></div>
<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>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/oa-missives-detail.html 0 → 100644
View file @ afa28503
<!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-segmented-control{
background-color: #f6f6f6;
border: 0;
}
.mui-segmented-control .mui-control-item{
border: 0;
}
.mui-segmented-control .mui-control-item:active,.mui-segmented-control .mui-control-item.mui-active{
background-color: #f6f6f6;
}
.mui-segmented-control .mui-control-item.mui-active .mui-btn{
color: #fff;
background-color: #ee574f;
border-color: #ee574f;
}
.mui-segmented-control .mui-control-item .mui-block{
color:#a7a7a7;
margin-top: 5px;
}
.mui-h5,.mui-h6{
margin-top: 0;
}
.mui-input-row label{
width: 45%;
}
.oa-mute{
color:#8f8f94;
}
.mui-control-item .mui-block{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</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-segmented-control">
<a class="mui-control-item mui-active" href="#item1mobile">
<button class="mui-btn mui-fab mui-btn-mini">
<span class="oa-icon oa-icon-pages"></span>
</button>
<span class="mui-block">正文</span>
</a>
<a class="mui-control-item" href="#item2mobile">
<span class="mui-btn mui-fab mui-btn-mini">
<span class="mui-icon mui-icon-search"></span>
</span>
<span class="mui-block">搜索</span>
</a>
<a class="mui-control-item" href="#item3mobile">
<span class="mui-btn mui-fab mui-btn-mini">
<span class="oa-icon oa-icon-gear"></span>
</span>
<span class="mui-block">流程跟踪</span>
</a>
<a class="mui-control-item" href="#item4mobile">
<span class="mui-btn mui-fab mui-btn-mini">
<span class="oa-icon oa-icon-list"></span>
</span>
<span class="mui-block">意见列表</span>
</a>
</div>
<div class="mui-content-padded">
<span id="item1mobile" class="mui-control-content mui-active">Item 1</span>
<span id="item2mobile" class="mui-control-content">Item 2</span>
<span id="item3mobile" class="mui-control-content">Item 3</span>
<span id="item4mobile" class="mui-control-content">Item 4</span>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/oa-missives.html 0 → 100644
View file @ afa28503
<!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
examples/hello-mui/examples/offcanvas-with-left.html 0 → 100644
View file @ afa28503
<!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>
<div class="mui-off-canvas-wrap">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-icon mui-icon-close mui-pull-right"></a>
<h1 class="mui-title">Container with slide menu</h1>
</header>
<aside id="offCanvas" class="mui-off-canvas-left">
<button id="offCanvasHide" class="mui-btn mui-btn-primary mui-btn-block">
关闭侧滑菜单(js call)
</button>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<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>
</aside>
<div class="mui-content">
<button id="offCanvasShow" class="mui-btn mui-btn-primary mui-btn-block">
显示侧滑菜单(js call)
</button>
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
</ul>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script>
mui.init({
swipeBack : false,
});
var offCanvasContainer = document.querySelector('.mui-off-canvas-wrap');
var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap');
var offCanvas = mui('#offCanvas');
document.getElementById('switch').addEventListener('toggle', function(event) {
if (event.detail.isActive) {//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild);
} else {//仅主内容滑动时，侧滑菜单在off-canvas-wrap内
offCanvasContainer.insertBefore(offCanvas[0], offCanvasContainer.firstElementChild)
}
});
document.getElementById('offCanvasShow').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or show;
offCanvas.offCanvas('show');
});
document.getElementById('offCanvasHide').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or hide;
offCanvas.offCanvas('hide');
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-with-right.html 0 → 100644
View file @ afa28503
<!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>
<div class="mui-off-canvas-wrap">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title">Container with slide menu(right)</h1>
</header>
<aside id="offCanvas" class="mui-off-canvas-right">
<button id="offCanvasHide" class="mui-btn mui-btn-primary mui-btn-block">
关闭侧滑菜单(js call)
</button>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<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>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 7
</a>
</li>
</ul>
</aside>
<div class="mui-content">
<button id="offCanvasShow" class="mui-btn mui-btn-primary mui-btn-block">
显示侧滑菜单(js call)
</button>
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
<div class="mui-media-body">
Item 1
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.
</p>
</div>
</a>
</li>
</ul>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script>
mui.init({
swipeBack : false,
});
var offCanvasContainer = document.querySelector('.mui-off-canvas-wrap');
var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap');
var offCanvas = mui('#offCanvas');
document.getElementById('switch').addEventListener('toggle', function(event) {
if (event.detail.isActive) {//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild);
} else {//仅主内容滑动时，侧滑菜单在off-canvas-wrap内
offCanvasContainer.insertBefore(offCanvas[0], offCanvasContainer.firstElementChild)
}
});
document.getElementById('offCanvasShow').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or show;
offCanvas.offCanvas('show');
});
document.getElementById('offCanvasHide').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or hide;
offCanvas.offCanvas('hide');
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pagination.html 0 → 100644
View file @ afa28503
<!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">Pagination</h1>
</header>
<div class="mui-content">
<h5 class="mui-content-padded">分页(默认尺寸)</h5>
<div class="mui-content-padded">
<ul class="mui-pagination">
<li class="mui-previous mui-disabled">
<a href="#">
&laquo;
</a>
</li>
<li class="mui-active">
<a href="#">
1
</a>
</li>
<li>
<a href="#">
2
</a>
</li>
<li>
<a href="#">
3
</a>
</li>
<li>
<a href="#">
4
</a>
</li>
<li>
<a href="#">
5
</a>
</li>
<li class="mui-next">
<a href="#">
&raquo;
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">分页(大尺寸)</h5>
<div class="mui-content-padded">
<ul class="mui-pagination mui-pagination-lg">
<li class="mui-previous">
<a href="#">
&laquo;
</a>
</li>
<li>
<a href="#">
1
</a>
</li>
<li>
<a href="#">
2
</a>
</li>
<li>
<a href="#">
3
</a>
</li>
<li>
<a href="#">
4
</a>
</li>
<li class="mui-active">
<a href="#">
5
</a>
</li>
<li class="mui-next mui-disabled">
<a href="#">
&raquo;
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">分页(小尺寸)</h5>
<div class="mui-content-padded">
<ul class="mui-pagination mui-pagination-sm">
<li class="mui-previous">
<a href="#">
&laquo;
</a>
</li>
<li>
<a href="#">
1
</a>
</li>
<li>
<a href="#">
2
</a>
</li>
<li class="mui-active">
<a href="#">
3
</a>
</li>
<li>
<a href="#">
4
</a>
</li>
<li>
<a href="#">
5
</a>
</li>
<li class="mui-next">
<a href="#">
&raquo;
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">翻页(默认)</h5>
<div class="mui-content-padded">
<ul class="mui-pager">
<li>
<a href="#">
上一页
</a>
</li>
<li>
<a href="#">
下一页
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">翻页(对齐)</h5>
<div class="mui-content-padded">
<ul class="mui-pager">
<li class="mui-previous">
<a href="#">
上一页
</a>
</li>
<li class="mui-next">
<a href="#">
下一页
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">翻页(禁用)</h5>
<div class="mui-content-padded">
<ul class="mui-pager">
<li class="mui-disabled">
<span> 上一页 </span>
</li>
<li>
<a href="#">
下一页
</a>
</li>
</ul>
</div>
</div>
<script>
(function($) {
$('.mui-pagination').on('tap', 'a', function() {
var li = this.parentNode;
var classList = li.classList;
if (!classList.contains('mui-active') && !classList.contains('mui-disabled')) {
var active = li.parentNode.querySelector('.mui-active');
if (classList.contains('mui-previous')) {//previous
if (active) {
var previous = active.previousElementSibling;
console.log('previous', previous);
if (previous && !previous.classList.contains('mui-previous')) {
$.trigger(previous.querySelector('a'), 'tap');
} else {
classList.add('mui-disabled');
}
}
} else if (classList.contains('mui-next')) {//next
if (active) {
var next = active.nextElementSibling;
if (next && !next.classList.contains('mui-next')) {
$.trigger(next.querySelector('a'), 'tap');
} else {
classList.add('mui-disabled');
}
}
} else {//page
active.classList.remove('mui-active');
classList.add('mui-active');
var page = parseInt(this.innerText);
var previousPageElement = li.parentNode.querySelector('.mui-previous');
var nextPageElement = li.parentNode.querySelector('.mui-next');
previousPageElement.classList.remove('mui-disabled');
nextPageElement.classList.remove('mui-disabled');
if (page <= 1) {
previousPageElement.classList.add('mui-disabled');
} else if (page >= 5) {
nextPageElement.classList.add('mui-disabled');
}
}
}
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-actionsheet.html 0 → 100644
View file @ afa28503
<!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">Popovers with action sheet</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item" href="#mark">
Mark
</a>
<a class="mui-tab-item" href="#flagged">
Flagged
</a>
<a class="mui-tab-item" href="#">
</a>
<a class="mui-tab-item" href="#">
</a>
</nav>
<div id="mark" class="mui-popover mui-popover-action mui-popover-bottom">
<div class="mui-content-padded">
<button class="mui-btn mui-btn-primary mui-btn-block">As Read</button>
<button class="mui-btn mui-btn-positive mui-btn-block">As Unread</button>
<button class="mui-btn mui-btn-negative mui-btn-block">As Junk Mail</button>
<a class="mui-btn mui-btn-block" href="#mark">Cancel</a>
</div>
</div>
<div id="flagged" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Red</a></li>
<li class="mui-table-view-cell"><a href="#">Orange</a></li>
<li class="mui-table-view-cell"><a href="#">Yellow</a></li>
<li class="mui-table-view-cell"><a href="#">Green</a></li>
<li class="mui-table-view-cell"><a href="#">Blue</a></li>
<li class="mui-table-view-cell"><a href="#">Purple</a></li>
<li class="mui-table-view-cell"><a href="#">Gray</a></li>
</ul>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-cross-webviews-popover.html 0 → 100644
View file @ afa28503
<!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>
<div class="mui-content">
<div id="popover" class="mui-popover">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a href="#">
Item1
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item2
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item3
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item4
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item5
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item6
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item7
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item8
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item9
</a>
</li>
<li class="mui-table-view-cell">
<a href="#">
Item10
</a>
</li>
</ul>
</div>
</div>
<script>
mui.init({
back : function() {
var webview = plus.webview.currentWebview();
var parent = webview.parent();
if (parent) {
parent.hide('auto');
return false;
}
}
})
document.addEventListener('plus:togglePopover', function() {
$('#popover').popover('toggle');
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-cross-webviews.html 0 → 100644
View file @ afa28503
<!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">Popovers cross webviews</h1>
<a id="M_Popover_Trigger" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
</header>
<script>
mui.plusReady(function() {
var popover = plus.webview.create('popovers-with-cross-webviews-popover.html', null, {
top : '45px',
bottom : 0
});
plus.webview.currentWebview().append(popover);
document.getElementById('M_Popover_Trigger').addEventListener('tap', function() {
//mui hack plus event
$.fire(popover, 'plus:togglePopover');
});
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-js-call.html 0 → 100644
View file @ afa28503
<!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-popover{
top: 125px;
}
</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">Popovers</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<a id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">Open Popover</a>
</div>
<div id="popover" class="mui-popover">
<div class="mui-content-padded">
<a id="closePopover" class="mui-btn mui-btn-primary mui-btn-block">Close Popover</a>
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a></li>
<li class="mui-table-view-cell"><a href="#">Item2</a></li>
<li class="mui-table-view-cell"><a href="#">Item3</a></li>
<li class="mui-table-view-cell"><a href="#">Item4</a></li>
<li class="mui-table-view-cell"><a href="#">Item5</a></li>
<li class="mui-table-view-cell"><a href="#">Item6</a></li>
<li class="mui-table-view-cell"><a href="#">Item7</a></li>
<li class="mui-table-view-cell"><a href="#">Item8</a></li>
<li class="mui-table-view-cell"><a href="#">Item9</a></li>
<li class="mui-table-view-cell"><a href="#">Item10</a></li>
</ul>
</div>
</div>
<script>
document.getElementById('openPopover').addEventListener('tap', function() {
$('#popover').popover('show', {left: 100, right: 200});
//$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏
});
document.getElementById('closePopover').addEventListener('tap', function() {
$('#popover').popover('hide');
//$('#popover').popover('toggle');//也可以直接调用toggle。该方法自动识别是显示还是隐藏
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/popovers.html 0 → 100644
View file @ afa28503
<!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-popover{
top: 125px;
}
</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">Popovers</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<a href="#popover" class="mui-btn mui-btn-primary mui-btn-block">Click</a>
</div>
<div id="popover" class="mui-popover">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a></li>
<li class="mui-table-view-cell"><a href="#">Item2</a></li>
<li class="mui-table-view-cell"><a href="#">Item3</a></li>
<li class="mui-table-view-cell"><a href="#">Item4</a></li>
<li class="mui-table-view-cell"><a href="#">Item5</a></li>
<li class="mui-table-view-cell"><a href="#">Item6</a></li>
<li class="mui-table-view-cell"><a href="#">Item7</a></li>
<li class="mui-table-view-cell"><a href="#">Item8</a></li>
<li class="mui-table-view-cell"><a href="#">Item9</a></li>
<li class="mui-table-view-cell"><a href="#">Item10</a></li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/preload-mixwebview-content.html 0 → 100644
View file @ afa28503
<!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>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-hidden">
cared
<div id="M_Toggle" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell">
Item 1 <span class="mui-badge">14</span>
</li>
<li class="mui-table-view-cell">
Item 2 <span class="mui-badge">1</span>
</li>
<li class="mui-table-view-cell">
Item 3 <span class="mui-badge">5</span>
</li>
</ul>
</div>
</div>
<script>
mui.init({
back : function() {//建议5+可以在创建窗体时，允许传进去自定义参数，然后获取该窗体可以访问该参数，这样mui就可以识别出是lazyload窗口。而不用自己写了
if (window.plus) {
return {
preload : true
};
}
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/preload-mixwebview-main.html 0 → 100644
View file @ afa28503
<!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">Preload MixWebview</h1>
</header>
<script>
mui.init({
back : function() {//建议5+可以在创建窗体时，允许传进去自定义参数，然后获取该窗体可以访问该参数，这样mui就可以识别出是lazyload窗口。而不用自己写了
if (window.plus) {
return {
preload : true
};
}
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/preload-webview-with-openwindow.html 0 → 100644
View file @ afa28503
<!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">Preload Webview with openWindow</h1>
</header>
<div class="mui-content"></div>
<script>
mui.init({
back : function() {//建议5+可以在创建窗体时，允许传进去自定义参数，然后获取该窗体可以访问该参数，这样mui就可以识别出是lazyload窗口。而不用自己写了
if (window.plus) {
content.innerHTML = '';
//隐藏后清空内容区
return {
preload : true
};
}
}
});
var content = document.querySelector('.mui-content');
function preload_webview(params) {
params = JSON.parse(params || JSON.stringify({
count : 10
}));
var nWaiting;
if (plus) {
//TODO 5+没有提供show动画之后的callback。所以这里暂时延迟400ms来显示动画
setTimeout(function() {
nWaiting = plus.nativeUI.showWaiting();
}, 400);
}
setTimeout(function() {
var html = [];
html.push('<div class="mui-card"><ul class="mui-table-view">');
for (var i = 0; i < params.count; i++) {
html.push('<li class="mui-table-view-cell"><a class="mui-navigate-right">Item ' + (i + 1) + '</a></li>');
}
html.push('</ul></div>');
content.innerHTML = html.join('');
if (nWaiting) {
nWaiting.close();
}
}, 2000);
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/preload-webview.html 0 → 100644
View file @ afa28503
<!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">Preload Webview with init</h1>
</header>
<div class="mui-content"></div>
<script>
mui.init({
back : function() {//建议5+可以在创建窗体时，允许传进去自定义参数，然后获取该窗体可以访问该参数，这样mui就可以识别出是lazyload窗口。而不用自己写了
if (window.plus) {
content.innerHTML = '';
//隐藏后清空内容区
return {
preload : true
};
}
}
});
var content = document.querySelector('.mui-content');
function preload_webview(params) {
params = JSON.parse(params || JSON.stringify({
count : 10
}));
var nWaiting;
if (plus) {
//TODO 5+没有提供show动画之后的callback。所以这里暂时延迟400ms来显示动画
setTimeout(function() {
nWaiting = plus.nativeUI.showWaiting();
}, 400);
}
setTimeout(function() {
var html = [];
html.push('<div class="mui-card"><ul class="mui-table-view">');
for (var i = 0; i < params.count; i++) {
html.push('<li class="mui-table-view-cell"><a class="mui-navigate-right">Item ' + (i + 1) + '</a></li>');
}
html.push('</ul></div>');
content.innerHTML = html.join('');
if (nWaiting) {
nWaiting.close();
}
}, 2000);
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/preload.html 0 → 100644
View file @ afa28503
<!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">
<a id="M_Init" class="mui-btn mui-btn-primary mui-btn-block">
mui.init webviews
</a>
<a id="M_OpenWindowByOptions" class="mui-btn mui-btn-primary mui-btn-block">
mui.openWindow webviews
</a>
<a id="M_InitMix" class="mui-btn mui-btn-primary mui-btn-block">
mui.init mixwebviews
</a>
</div>
</div>
<script>
//通过init传递当前页面要打开的窗口配置(支持预加载窗口和非预加载窗口，后续只需openWindow传递该窗口id即可)
mui.init({
preloadLimit : 10, //预加载窗口的数量限制(默认为10，超出数量后，先进先出，始终仅保持10个隐藏状态的预加载窗口)
preloadPages : [//指定webview列表
{
//两个webview合成的预加载
id : 'preloadMixWebview', //可选ID，未设置的话使用URL作为窗口ID
url : 'preload-mixwebview-main.html',
preload : true,
styles : {
},
subpages : [{
id : 'preloadMixWebviewContent',
url : 'preload-mixwebview-content.html',
styles : {
top : '45px'
},
}]
}, {
id : 'preloadWebview', //可选ID，未设置的话使用URL作为窗口ID
url : 'preload-webview.html',
preload : true,
styles : {
},
afterShowMethodName : 'preload_webview', //跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现
subpages : [
//子webview配置
]
}]
});
//点击打开mix窗口(两个webview合成的预加载窗口)
document.getElementById('M_InitMix').addEventListener('tap', function() {
//直接根据窗口ID，打开之前已经设置了的窗口
$.openWindow('preloadMixWebview', {
params : {
count : 10
}
});
});
//点击打开窗口
document.getElementById('M_Init').addEventListener('tap', function() {
//直接根据窗口ID，打开之前已经设置了的窗口
$.openWindow('preloadWebview', {
params : {
count : 10
}
});
});
document.getElementById('M_OpenWindowByOptions').addEventListener('tap', function() {
//通过openWindow传递要打开的窗口参数(
//非预加载窗口打开,会自动缓存该页面的配置信息,后续可直接使用ID打开
//预加载窗口,本次打开非预加载，以后打开为预加载
$.openWindow({
id : 'preloadWebviewByOpenWindow',
url : 'preload-webview-with-openwindow.html',
preload : true,
styles : {
},
params : {
count : 10
},
afterShowMethodName : 'preload_webview'//跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现
});
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pull-refresh-content-custom.html 0 → 100644
View file @ afa28503
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</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, .mui-content {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<title>Hello H5+</title>
<script type="text/javascript" charset="utf-8">
var ws=null,wo=null;
// 扩展API加载完毕，现在可以正常调用扩展API
function plusReady(){
// 获取自身窗口
ws=plus.webview.currentWebview();
wo=ws.opener();
}
// 判断扩展API是否准备，否则监听"plusready"事件
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOM构建完成获取列表元素
var list=null;
document.addEventListener("DOMContentLoaded",function(){
list=document.getElementById("list");
});
// 刷新页面
function onRefresh(){
setTimeout(function(){
if(list){
var item=document.createElement("li");
item.innerHTML="<span>New Item "+(new Date())+"</span>";
list.insertBefore(item,list.firstChild);
}
ws.endPullToRefresh();
wo.evalJS("pullReset()");
},2000);
}
</script>
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
<style type="text/css">
li {
padding: 1em;
border-bottom: 1px solid #eaeaea;
}
li:active {
background: #f4f4f4;
}
</style>
</head>
<body>
<ul id="list" style="list-style:none;margin:0;padding:0;">
<li><span onclick="alert('ok');">Initializ List Item 1</span></li>
<li><span>Initializ List Item 2</span></li>
<li><span>Initializ List Item 3</span></li>
<li><span>Initializ List Item 4</span></li>
<li><span>Initializ List Item 5</span></li>
<li><span>Initializ List Item 6</span></li>
<li><span>Initializ List Item 7</span></li>
<li><span>Initializ List Item 8</span></li>
<li><span>Initializ List Item 9</span></li>
<li><span>Initializ List Item 10</span></li>
</ul>
</body>
</html>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown-and-pullup.html 0 → 100644
View file @ afa28503
<!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">Pulldown and pullup</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</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 1
</a>
</li>
</ul>
</div>
</div>
<script>
mui.init({
swipeBack:false,
optimize: false,
pullRefresh: {
container: '.mui-content-padded',
down: {
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function(callback) {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; 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>';
table.insertBefore(li, table.firstChild);
}
callback(); //refresh completed
}, 1000);
}
},
up: {
contentdown: '上拉显示更多',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function(callback) {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; 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>';
table.appendChild(li);
}
callback(); //refresh completed
}, 1000);
}
}
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown-with-5+.html 0 → 100644
View file @ afa28503
<!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>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</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 1
</a>
</li>
</ul>
</div>
</div>
<script>
mui.init({
optimize: true,
titleBar: {
title: 'pulldown with 5+'
},
pulldownRefresh: {
container: '.mui-content',
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function(callback) {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; 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>';
table.insertBefore(li, table.firstChild);
}
callback();//refresh completed
}, 1000);
}
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown-with-plus-content-custom.html 0 → 100644
View file @ afa28503
<!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>
<script type="text/javascript" charset="utf-8">
var ws = null,
wo = null;
// 扩展API加载完毕，现在可以正常调用扩展API
function plusReady() {
// 获取自身窗口
ws = plus.webview.currentWebview();
wo = ws.opener();
}
// 判断扩展API是否准备，否则监听"plusready"事件
if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// DOM构建完成获取列表元素
var list = null;
document.addEventListener("DOMContentLoaded", function() {
list = document.getElementById("list");
});
// 刷新页面
function onRefresh() {
setTimeout(function() {
if (list) {
var item = document.createElement("li");
item.innerHTML = "<span>New Item " + (new Date()) + "</span>";
list.insertBefore(item, list.firstChild);
}
ws.endPullToRefresh();
wo.evalJS("pullReset()");
}, 2000);
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; 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>';
table.insertBefore(li, table.firstChild);
}
ws.endPullToRefresh();
wo.evalJS("pullReset()");
}, 1000);
}
</script>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</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 1
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown-with-plus-content.html 0 → 100644
View file @ afa28503
<!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>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</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 1
</a>
</li>
</ul>
</div>
</div>
<script>
mui.init({
optimize : true,
pullRefresh : {
container : '.mui-content',
down : {
callback :pulldownRefresh
}
}
});
function pulldownRefresh(callback) {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; 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>';
table.insertBefore(li, table.firstChild);
}
//ws.endPullToRefresh();
//refresh completed 这行代码必须调用
callback();
}, 1000);
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown-with-plus-main-custom.html 0 → 100644
View file @ afa28503
<!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>
<script type="text/javascript" charset="utf-8">
var ws = null,
list = null;
// 扩展API加载完毕，现在可以正常调用扩展API
function plusReady() {
ws = plus.webview.currentWebview();
// wo = ws.opener();
list = plus.webview.create("pulldown-with-plus-content-custom.html", "pulldown-with-plus-content-custom.html", {
top: "48px",
bottom: "0px",
bounce: "vertical"
});
// ws.append(list);
// list.addEventListener("loaded", function() { //叶面加载完成后才显示
// ws.show("slide-in-right", 300);
// wo.evalJS("closeWaiting()");
// if (plus.os.name != "Android") {
// plus.nativeUI.alert("由于Android性能不足，我们提供了原生的下拉刷新加速方案。iOS设备请使 用iscroll等标准框架来解决下拉刷新问题");
// }
// }, false);
ws.append(list);
// 实现列表可下拉刷新
list.addEventListener("dragBounce", onPullStateChange, false);
list.setBounce({
position: {
top: "100px"
},
changeoffset: {
top: "50px"
}
});
}
if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// DOMContentLoaded事件处理
var etext = null,
eicon = null;
document.addEventListener("DOMContentLoaded", function() {
etext = document.getElementById("text");
eicon = document.getElementById("icon");
}, false);
// 下拉状态改变
function onPullStateChange(e) {
switch (e.status) {
case "beforeChangeOffset": //下拉可刷新状态
pull1();
break;
case "afterChangeOffset": //松开可刷新状态
pull2();
break;
case "dragEndAfterChangeOffset": //正在刷新状态
list.evalJS("onRefresh();");
pull3();
break;
default:
break;
}
}
function pull1() {
etext.textContent = "下拉可刷新";
eicon.style.webkitTransition = "all 0.3s ease-in";
eicon.style.webkitTransform = "rotate(0deg)";
}
function pull2() {
etext.textContent = "松开可刷新";
eicon.style.webkitTransition = "all 0.3s ease-in";
eicon.style.webkitTransform = "rotate(180deg)";
}
function pull3() {
etext.textContent = "正在刷新...";
eicon.src = "../images/pull_fresh.png";
eicon.style.webkitAnimation = "spin 1s infinite linear";
}
function pullReset() {
etext.textContent = "下拉可刷新";
eicon.src = "../images/pull_arrow.png";
eicon.style.webkitTransition = "";
eicon.style.webkitTransform = "";
eicon.style.webkitAnimation = "";
}
</script>
<style type="text/css">
#pull {
width: 24px;
height: 100%;
display: inline-block;
margin: 0 1em;
}
#icon {
height: 24px;
vertical-align: middle;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</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 style="text-align:center;height:44px;line-height:44px;">
<div id="pull">
<img id="icon" src="../images/pull_arrow.png" />
</div><font id="text">下拉可刷新</font>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown-with-plus-main.html 0 → 100644
View file @ afa28503
<!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 mui-pull-left"></a>
<h1 class="mui-title">下拉刷新</h1>
</header>
<script>
mui.init({
subpages : [{
id : 'pulldown-with-plus-content',
url : 'pulldown-with-plus-content.html',
styles : {
top : '48px',
bottom : 0
}
}]
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown.html 0 → 100644
View file @ afa28503
<!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">Pulldown</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</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 1
</a>
</li>
</ul>
</div>
</div>
<script>
mui.init({
swipeBack:false,
optimize: false,
pullRefresh: {
container: '.mui-content-padded',
down: {
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function(callback) {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; 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>';
table.insertBefore(li, table.firstChild);
}
callback(); //refresh completed
}, 1000);
}
}
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pullup.html 0 → 100644
View file @ afa28503
<!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">Pullup</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<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>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
</ul>
</div>
</div>
<script>
mui.init({
swipeBack: false,
optimize: false,
pullRefresh: {
container: '.mui-content-padded',
up: {
contentdown: '上拉显示更多',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function(callback) {
setTimeout(function() {
callback(); //refresh completed
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; 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>';
table.appendChild(li);
}
}, 1000);
}
}
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/radio.html 0 → 100644
View file @ afa28503
<!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">单选框（Radio）</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-radio mui-left">
<label>Radio</label>
<input name="radio1" type="radio">
</div>
<div class="mui-input-row mui-radio mui-left">
<label>Radio</label>
<input name="radio1" type="radio" 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-radio">
<label>Radio</label>
<input name="radio1" type="radio">
</div>
<div class="mui-input-row mui-radio">
<label>Radio</label>
<input name="radio1" type="radio" checked>
</div>
</form>
</div>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/range.html 0 → 100644
View file @ afa28503
<!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{
padding-top: 15px;
}
.field-contain label{
width: auto;
padding-right: 0;
}
.field-contain input[type='text']{
width: 40px;
height: 30px;
padding: 5px 0;
float: none;
text-align: center;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">滑块（range）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5 style='margin-top:35px;'>label+输入框+滑块：</h5>
<div class="mui-input-row mui-input-range field-contain">
<div style="float:left">
<label >滑块：</label>
<input type="text" id='field-range-input' value='60'>
</div>
<div style="margin-left:121px;">
<input type="range" id='field-range' value="60" min="0" max="100" />
</div>
</div>
<h5>label+滑块：<span id='inline-range-val'>20</span></h5>
<div class="mui-input-row mui-input-range">
<label>滑块：</label>
<input type="range" id='inline-range' value="20" min="0" max="100" >
</div>
<h5>整行滑块：<span id='block-range-val'>50</span></h5>
<div class="mui-input-row mui-input-range">
<input type="range" id='block-range' value="50" min="0" max="100" >
</div>
</div>
</div>
<script>
//监听input事件，获取range的value值，也可以直接element.value获取该range的值
var rangeList = document.querySelectorAll('input[type="range"]');
for(var i=0,len=rangeList.length;i<len;i++){
rangeList[i].addEventListener('input',function(){
if(this.id.indexOf('field')>=0){
document.getElementById(this.id+'-input').value = this.value;
}else{
document.getElementById(this.id+'-val').innerHTML = this.value;
}
});
}
document.getElementById('field-range-input').addEventListener('input',function(){
document.getElementById('field-range').value = this.value;
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-default.html 0 → 100644
View file @ afa28503
<!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-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/muwu.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/cbd.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack : false
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-table-default.html 0 → 100644
View file @ afa28503
<!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" style="background-color:#fff">
<h5 style="background-color:#efeff4">慢生活</h5>
<ul class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="../images/shuijiao.jpg">
<div class="mui-media-body">幸福就是可以一起睡觉</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="../images/muwu.jpg">
<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#"><img class="mui-media-object" src="../images/cbd.jpg">
<div class="mui-media-body">Color of SIP CBD</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-6">
<a href="#">
<img class="mui-media-object" src="../images/yuantiao.jpg">
<div class="mui-media-body">静静看这世界</div></a></li>
</ul>
</div>
<style>
h5{
padding-top: 8px;
padding-bottom: 8px;
text-indent: 12px;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
font-size: 15px;
margin-top:8px;
color: #333;
</style>
</style>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-table-pagination.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/slider-with-title.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/speech.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/switches.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tab-with-segmented-control.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tab-with-viewpagerindicator.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tabbar-labels-only.html 0 → 100644
View file @ afa28503
<!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>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#">
电话沟通
</a>
<a class="mui-tab-item" href="#">
在线交流
</a>
<a class="mui-tab-item" href="#">
短信咨询
</a>
<a class="mui-tab-item" href="#">
查看地图
</a>
</nav>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-with-anchor.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tabbar-with-chat.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tabbar-with-map.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tabbar-with-sms.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tabbar-with-submenus.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tabbar.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tableview-image-left.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tableview-image-right.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tableviews-with-badges.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tableviews-with-buttons.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tableviews-with-chevrons.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tableviews-with-collapses.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tableviews-with-swipe.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tableviews-with-switches.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/tableviews.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/titlebar-with-buttons.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/titlebar-with-html5-and-5+.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/titlebar-with-icons.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/titlebar-with-search.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/titlebar-with-text-and-icons.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/titlebar-with-webview-and-5+.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/titlebar.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/top.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/top_list.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/examples/typography.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/images/pull_fresh.png 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/images/shuijiao.jpg 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/images/yuantiao.jpg 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/index.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/js/app.js 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/js/mui.min.js 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/js/update.js 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/js/update.json 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/list.html 0 → 100644
View file @ afa28503
This diff is collapsed.
examples/hello-mui/manifest.json 0 → 100644
View file @ afa28503
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