Skip to content

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

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

parent c2ccb8fd
Show whitespace changes
Inline Side-by-side
Showing with 1445 additions and 1588 deletions
examples/hello-mui/examples/accordion.html
View file @ 37979d3e
......@@ -9,8 +9,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,18 +21,14 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">折叠面板</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
......@@ -127,8 +122,12 @@
</li>
</ul>
</div>
</div>
</body>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/actionsheet-plus.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -42,9 +40,6 @@
color: #8f8f94;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -72,21 +67,19 @@
<li>支持跨webview的遮罩</li>
<li>在有map等原生组件时，依然会显示在最顶层，不会被遮挡</li>
</ul>
<p>另一方面，原生模式的actionsheet目前暂不支持样式自定义</p>
<p>另一方面，原生模式的actionsheet目前不支持自定义样式</p>
<p>
<a id="picture-btn" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>
</p>
</div>
</div>
<p id="info"></p>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
});
......
examples/hello-mui/examples/actionsheet.html
View file @ 37979d3e
......@@ -7,10 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -42,9 +39,6 @@
color: #8f8f94;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -136,7 +130,10 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
});
......
examples/hello-mui/examples/ajax.html
View file @ 37979d3e
......@@ -9,12 +9,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
......@@ -24,15 +19,6 @@
.mui-content-padded{
padding: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
body,body .mui-content{
background-color: #fff !important;
}
......@@ -44,13 +30,15 @@
background-color: #f9f2f4;
border-radius: 4px;
}
</style>
<header class="mui-bar mui-bar-nav">
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">AJAX</h1>
</header>
<div class="mui-content" >
</header>
<div class="mui-content" >
<div class="mui-content-padded" style="padding-bottom: 50px;">
<p style="text-indent: 22px;">
mui基于html5plus的<a href="http://www.dcloud.io/docs/api/zh_cn/xhr.shtml">XMLHttpRequest</a>，封装了常用的ajax函数，支持Get、Post请求方式， 支持返回json、xml、html、text、script数据类型；本示例使用<a href="http://www.oschina.net/question/82993_78609">RunJS</a>的Echo Ajax功能演示网络请求。
......@@ -79,9 +67,12 @@
<h4 class="mui-content-padded">获得响应：</h4>
<code id="response" ></code>
</div>
</div>
<script>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
(function($) {
mui.init();
var methodEl = document.getElementById("method");
var dataTypeEl = document.getElementById("dataType");
var respnoseEl = document.getElementById("response");
......@@ -137,7 +128,6 @@
}
});
})(mui);
</script>
</body>
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/badges.html
View file @ 37979d3e
......@@ -9,8 +9,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,27 +20,21 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
h5 {
margin: 10px;
}
.mui-badge {
margin: 10px;
}
</style>
<header class="mui-bar mui-bar-nav">
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">数字角标（Badges）</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>有底色</h5>
<span class="mui-badge">1</span>
......@@ -58,7 +51,11 @@
<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>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-badges.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,26 +19,21 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
</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">
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">带数字的按钮</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<div class="mui-content-padded">
<button type="button" class="mui-btn">Badge button <span class="mui-badge">1</span></button>
<button type="button" class="mui-btn mui-btn-primary">Badge button <span class="mui-badge mui-badge-primary">2</span></button>
......@@ -50,7 +43,11 @@
<button type="button" class="mui-btn mui-btn-royal">Badge button <span class="mui-badge mui-badge-royal">999</span></button>
</div>
</div>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-block.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,19 +19,18 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
.mui-content-padded{
margin: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">块级按钮</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<div class="mui-content-padded">
<button type="button" class="mui-btn mui-btn-block">Block button</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block">Block button</button>
......@@ -48,12 +45,11 @@
<button type="button" class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined">Block button</button>
<button type="button" class="mui-btn mui-btn-royal mui-btn-block mui-btn-outlined">Block button</button>
</div>
</div>
<style type="text/css">
.mui-content-padded{
margin: 10px;
}
</style>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-icons.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,25 +19,19 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-btn{
margin-top: 10px;
margin-left: 10px;
}
</style>
<header class="mui-bar mui-bar-nav">
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">带图标按钮</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>图标居左：</h5>
<button type="button" class="mui-btn mui-icon mui-icon-home">
......@@ -74,8 +66,11 @@
<span class="mui-icon mui-icon-forward"></span>
</button>
</div>
</div>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,25 +19,19 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
</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">
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">按钮（Button）</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h5>有底色按钮：</h5>
<button type="button" class="mui-btn">
......@@ -92,7 +84,11 @@
<button type="button" >按钮</button>
</div>
</div>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/checkbox.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,18 +20,13 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">复选框（checkbox）</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
......@@ -68,8 +61,11 @@
</div>
</form>
</div>
</div>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/dialog.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -30,9 +28,7 @@
padding: 20px 10px ;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -53,6 +49,11 @@
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
<script type="text/javascript" charset="utf-8">
var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap',function(){
......
examples/hello-mui/examples/grid-default.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,18 +20,15 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">9宫格默认样式</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-home"></span>
......@@ -63,8 +58,11 @@
<span class="mui-icon mui-icon-more"></span>
<div class="mui-media-body">more</div></a></li>
</ul>
</div>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/grid-pagination.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,27 +19,20 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
</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">
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">左右拖动分页9宫</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
循环
......@@ -234,8 +225,11 @@
<div class="mui-indicator"></div>
</div>
</div>
</div>
<script>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
});
......@@ -271,8 +265,5 @@
toggleLoop(loop);
});
});
</script>
</body>
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/icons.html
View file @ 37979d3e
......@@ -9,8 +9,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -22,15 +21,6 @@
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.flex-container {
display: -webkit-box;
display: -webkit-flex;
......@@ -70,6 +60,9 @@
color: #007aff;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Icons</h1>
......@@ -162,10 +155,13 @@
<a><span class="mui-icon mui-icon-pulldown"></span></a>
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
<script type="text/javascript" charset="utf-8">
var active = null,
lastid, span;
......@@ -198,7 +194,5 @@
lastid = id;
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/info.html
View file @ 37979d3e
......@@ -51,7 +51,7 @@
</p>
<p>更多详细介绍，请到<a href="http://dcloudio.github.io/mui">mui官网</a>查看；</p>
<h4>版本介绍</h4>
<p>当前版本为1.1.1，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<p>当前版本为1.2.0，可到<a href="https://github.com/dcloudio/mui">Github</a>上获取最新版本。</p>
<h4>License</h4>
<p>
mui遵循MIT License，源码已提交至Github，<a href="https://github.com/dcloudio/mui">点击查看</a>;
......
examples/hello-mui/examples/input.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -56,6 +54,8 @@
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
//语音识别完成事件
......
examples/hello-mui/examples/list-triplex-row.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -38,9 +36,6 @@
color:#f14e41;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -117,4 +112,9 @@
</ul>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/list-with-input.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,18 +20,13 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">列表带input类控件</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
......@@ -80,8 +73,11 @@
</li>
</ul>
</div>
</div>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/media-list.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -28,9 +26,6 @@
font-size: 15px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -223,5 +218,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/nav.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -69,7 +67,8 @@
</div>
</form>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
mui.init();
var header = document.getElementById("header");
......
examples/hello-mui/examples/offcanvas-drag-left-plus-main.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -70,6 +68,8 @@
</div>
</form>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
var main,menu, mask = mui.createMask(closeMenu);
var showMenu = false,
......@@ -283,7 +283,5 @@
}
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-left-plus-menu.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
body,.mui-content {
background-color: #333;
......@@ -36,9 +34,6 @@
margin-bottom: 35px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -79,8 +74,9 @@
</li>
</ul>
</div>
<script type="text/javascript" charset="utf-8">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:false,
});
......@@ -99,7 +95,7 @@
document.getElementById("close-btn").addEventListener('tap',closeMenu);
mui.menu = closeMenu;
mui.back = closeMenu;
</script>
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-left.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -40,6 +38,9 @@
font-size: 14px;
line-height: 24px;
}
input{
color: #000;
}
</style>
</head>
......@@ -146,6 +147,8 @@
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
......@@ -223,7 +226,5 @@
});
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-right-plus-main.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -69,6 +67,9 @@
</div>
</form>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
var main,menu, mask = mui.createMask(closeMenu);
var showMenu = false,mode = 'main-move';
......@@ -277,7 +278,4 @@
}
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-right-plus-menu.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
body, .mui-content {
background-color: #333;
......@@ -36,11 +34,7 @@
margin-bottom: 35px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<div class="mui-content">
<div class="title">侧滑导航</div>
......@@ -91,7 +85,8 @@
</li>
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:false
......
examples/hello-mui/examples/offcanvas-drag-right.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -39,6 +37,9 @@
font-size: 14px;
line-height: 24px;
}
input{
color: #000;
}
</style>
</head>
......@@ -145,6 +146,8 @@
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
......@@ -218,7 +221,5 @@
});
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pagination.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,9 +20,6 @@
padding-top: 0;
}
</style>
<script type="text/javascript">
mui.init();
</script>
</head>
<body>
......@@ -193,6 +188,11 @@
</ul>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
mui.init();
</script>
<script>
(function($) {
$('.mui-pagination').on('tap', 'a', function() {
......
examples/hello-mui/examples/popovers.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -43,9 +41,6 @@
padding: 10px;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -160,7 +155,10 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui('.mui-scroll-wrapper').scroll();
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
......
examples/hello-mui/examples/pullrefresh.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -29,6 +27,8 @@
</ul>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
......
examples/hello-mui/examples/radio.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,9 +20,6 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -70,6 +65,10 @@
</form>
</div>
</div>
</body>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/range.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,17 +19,6 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
h5{
padding-top: 15px;
}
......@@ -48,14 +35,15 @@
float: none;
text-align: center;
}
</style>
</style>
</head>
<header class="mui-bar mui-bar-nav">
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">滑块（range）</h1>
</header>
<div class="mui-content">
</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">
......@@ -77,13 +65,13 @@
<div class="mui-input-row mui-input-range">
<input type="range" id='block-range' value="50" min="0" max="100" >
</div>
</div>
</div>
<script>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
//监听input事件，获取range的value值，也可以直接element.value获取该range的值
var rangeList = document.querySelectorAll('input[type="range"]');
for(var i=0,len=rangeList.length;i<len;i++){
......@@ -101,10 +89,5 @@
document.getElementById('field-range-input').addEventListener('input',function(){
document.getElementById('field-range').value = this.value;
});
</script>
</body>
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-default.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,18 +20,13 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图片轮播</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
定时轮播
......@@ -88,8 +81,11 @@
<div class="mui-indicator"></div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
......@@ -102,8 +98,6 @@
});
}
});
</script>
</body>
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-table-default.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -33,9 +31,6 @@
color: #333;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -64,4 +59,9 @@
</ul>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-with-title.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,9 +20,6 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -90,7 +85,11 @@
</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
......@@ -104,6 +103,4 @@
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/switches.html
View file @ 37979d3e
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -9,8 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -23,9 +20,6 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -86,10 +80,10 @@
</li>
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
// mui.plusReady(function(){
// plus.webview.currentWebview().setStyle({bounce:'none'});
// });
mui.init();
mui('.mui-content .mui-switch').each(function() { //循环所有toggle
//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false');
......@@ -102,7 +96,5 @@
});
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-main.html
View file @ 37979d3e
......@@ -9,15 +9,12 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
......@@ -41,6 +38,8 @@
<span class="mui-tab-label">设置</span>
</a>
</nav>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
var subpages = ['tab-webview-subpage-about.html','tab-webview-subpage-chat.html','tab-webview-subpage-contact.html','tab-webview-subpage-setting.html'];
var subpage_style = {
......@@ -78,6 +77,20 @@
//更改当前活跃的选项卡
activeTab = targetTab;
});
//自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome',function () {
var defaultTab = document.getElementById("defaultTab");
//模拟首页点击
mui.trigger(defaultTab,'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if(defaultTab!==current){
current.classList.remove('mui-active');
defaultTab.classList.add('mui-active');
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-about.html
View file @ 37979d3e
......@@ -8,8 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -20,9 +18,6 @@
font-size: 15px;
}
</style>
<script type="text/javascript">
mui.init();
</script>
</head>
<body>
<div class="mui-content">
......@@ -34,4 +29,9 @@
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-chat.html
View file @ 37979d3e
......@@ -8,8 +8,6 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -76,6 +74,8 @@
</ul>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
......@@ -126,7 +126,5 @@
}
</script>
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-contact.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -46,9 +44,6 @@
float: left;
}
</style>
<script type="text/javascript">
mui.init();
</script>
</head>
<body>
......@@ -149,10 +144,11 @@
</div>
</li>
</ul>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-setting.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,9 +19,6 @@
font-size: 15px;
}
</style>
<script type="text/javascript">
mui.init();
</script>
</head>
<body>
......@@ -54,7 +49,7 @@
</ul>
<ul class="mui-table-view" style="margin-top: 25px;">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<a id="about" class="mui-navigate-right">
关于mui
</a>
</li>
......@@ -69,5 +64,15 @@
</div>
</style>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
document.getElementById("about").addEventListener('tap',function () {
//获得主页面的webview
var main = plus.webview.currentWebview().parent();
//触发主页面的gohome事件
mui.fire(main,'gohome');
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -22,17 +20,6 @@
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
/*.mui-bar-nav ~ .mui-content{padding-top:54px;}*/
.mui-card .mui-control-content {
padding: 10px;
}
......@@ -40,6 +27,8 @@
height: 150px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">按钮式选项卡</h1>
......@@ -188,7 +177,10 @@
</form>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
(function($) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
......
examples/hello-mui/examples/tabbar-labels-only.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,18 +20,15 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">文字选项卡</h1>
</header>
<nav class="mui-bar mui-bar-tab">
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#">
电话沟通
</a>
......@@ -46,8 +41,11 @@
<a class="mui-tab-item" href="#">
查看地图
</a>
</nav>
</body>
</nav>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-with-submenus.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -22,18 +20,12 @@
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-bar-popover {
width: 30%;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">含二级菜单的选项卡</h1>
......@@ -76,5 +68,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar.html
View file @ 37979d3e
......@@ -8,8 +8,6 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -52,9 +50,6 @@
float: left;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
......@@ -247,7 +242,10 @@
</ul>
</div>
</div>
</body>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-badges.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,18 +20,14 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">右侧带数字角标</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">card（圆角列表）
......@@ -66,8 +60,11 @@
</li>
</ul>
</div>
</div>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-collapses.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -22,19 +20,14 @@
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">二级列表</h1>
</header>
</header>
<div class="mui-content">
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">card（圆角列表）
......@@ -72,8 +65,11 @@
</li>
</ul>
</div>
</div>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-swipe.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -136,6 +134,8 @@
</li>
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
//禁止右滑关闭
mui.init({
......@@ -181,7 +181,5 @@
});
})(mui);
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews.html
View file @ 37979d3e
......@@ -8,15 +8,10 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
}
header.mui-bar{
display: none;
}
.mui-bar-nav~.mui-content{
padding: 0;
}
......@@ -28,14 +23,9 @@
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<div class="mui-content">
<div class="mui-content">
<div class="title">
右侧无导航箭头
</div>
......@@ -86,8 +76,11 @@
</li>
</ul>
</div>
</div>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/template.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -74,6 +72,8 @@
</header>
<div class="mui-loader">加载中...</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
var titleElem = document.getElementById("title")
var menu = document.getElementById("menu")
......@@ -91,15 +91,14 @@
}
menu.style.display = display;
});
var contentWebview = null;
document.getElementById("menu").addEventListener('tap', function(e) {
e.stopPropagation();
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
}
contentWebview.evalJS('mui("#topPopover").popover("toggle")');
});
//敲击顶部、回到顶部
document.querySelector('header').addEventListener('tap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
......
examples/hello-mui/examples/template_pullrefresh.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
......@@ -67,7 +65,8 @@
</header>
<div class="mui-content"></div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
var titleElem = document.getElementById("title");
window.addEventListener("updateHeader", function(e) {
......@@ -76,7 +75,6 @@
titleElem.className = "mui-title mui-fadein";
});
var contentWebview = null;
//敲击顶部、回到顶部
document.querySelector('header').addEventListener('tap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
......
examples/hello-mui/examples/typography.html
View file @ 37979d3e
......@@ -9,8 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,body {
background-color: #efeff4;
......@@ -21,24 +19,17 @@
.mui-bar-nav~.mui-content{
padding: 0;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<style>
.mui-content-padded {
padding: 10px;
}
</style>
<header class="mui-bar mui-bar-nav">
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Typography</h1>
</header>
<div class="mui-content">
</header>
<div class="mui-content">
<div class="mui-content-padded">
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
......@@ -50,8 +41,11 @@
p. 目前最接近原生App效果的框架。
</p>
</div>
</div>
</body>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/js/app.js
View file @ 37979d3e
......@@ -16,7 +16,7 @@
if ($.targets._popover) {
$($.targets._popover).popover('hide');
} else {
current.parent().evalJS('mui.back();');
current.parent().evalJS('mui&&mui.back();');
}
} else {
back();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment