Skip to content

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

升级Hello MUI

parent b5d28290
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1127 additions and 426 deletions
examples/hello-mui/css/mui.min.css
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/examples/buttons-with-block.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
...@@ -41,5 +44,10 @@ ...@@ -41,5 +44,10 @@
<button class="mui-btn mui-btn-royal 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>
</div> </div>
<style type="text/css">
.mui-content-padded{
margin: 10px;
}
</style>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/dialog.html 0 → 100644
View file @ 17dd3025
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">消息框（dialog）</h1>
</header>
<div class="mui-content">
<div class="mui-content-padded" style="margin: 5px;text-align: center;">
<button id='alertBtn' class="mui-btn mui-btn-blue mui-btn-outlined">警告消息框</button>
<button id='confirmBtn' class="mui-btn mui-btn-blue mui-btn-outlined">确认消息框</button>
<button id='promptBtn' class="mui-btn mui-btn-blue mui-btn-outlined">输入对话框</button>
<button id='toastBtn' class="mui-btn mui-btn-blue mui-btn-outlined">自动消失提示框</button>
<div id="info">
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap',function(){
mui.alert('欢迎使用Hello MUI','Hello MUI',function(){
info.innerText = '你刚关闭了警告框';
});
});
document.getElementById("confirmBtn").addEventListener('tap',function(){
var btnArray = ['是','否'];
mui.confirm('MUI是个好框架，确认？','Hello MUI',btnArray,function(e){
if(e.index==0){
info.innerText = '你刚确认MUI是个好框架';
}else{
info.innerText = 'MUI没有得到你的认可，继续加油'
}
})
});
document.getElementById("promptBtn").addEventListener('tap',function(){
var btnArray = ['确定','取消'];
mui.prompt('请输入你对MUI的评语：','性能好',btnArray,function(e){
if(e.index==0){
info.innerText = '谢谢你的评语：'+e.value;
}else{
info.innerText = '你点了取消按钮';
}
})
});
document.getElementById("toastBtn").addEventListener('tap',function(){
mui.toast('欢迎体验Hello MUI');
});
</script>
<style type="text/css">
.mui-btn{
display: block;
width: 120px;
margin: 10px auto;
}
#info{
padding: 20px 10px ;
}
</style>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/info.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
...@@ -29,7 +32,8 @@ ...@@ -29,7 +32,8 @@
<div class="mui-content-padded"> <div class="mui-content-padded">
<h4 style="margin-top:10px;">mui</h4> <h4 style="margin-top:10px;">mui</h4>
<p > <p >
性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。 性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败
； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。
</p> </p>
<p > <p >
mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。 mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。
......
examples/hello-mui/examples/oa-missives.html → examples/hello-mui/examples/list-triplex-row.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<link rel="stylesheet" href="../css/oa.css"> <link rel="stylesheet" href="../css/oa.css">
...@@ -43,7 +46,7 @@ ...@@ -43,7 +46,7 @@
</style> </style>
<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> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">待办公文</h1> <h1 class="mui-title">三行列表</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"> <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
......
examples/hello-mui/examples/tableviews-with-buttons.html → examples/hello-mui/examples/list-with-input.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,11 +21,12 @@ ...@@ -19,11 +21,12 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <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> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">右侧带控件</h1> <h1 class="mui-title">列表带input类控件</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-card"> <div class="mui-card">
...@@ -47,28 +50,28 @@ ...@@ -47,28 +50,28 @@
</button> </button>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
Item 1 Item 3
<div class="mui-switch mui-active"> <div class="mui-switch mui-active">
<div class="mui-switch-handle"></div> <div class="mui-switch-handle"></div>
</div> </div>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
Item 3 Item 4
<div class="mui-switch mui-switch-blue mui-switch-mini mui-active"> <div class="mui-switch mui-switch-blue mui-switch-mini mui-active">
<div class="mui-switch-handle"></div> <div class="mui-switch-handle"></div>
</div> </div>
</li> </li>
<li class="mui-table-view-cell mui-radio mui-left"> <li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 3 <input name="radio" type="radio">Item 5
</li> </li>
<li class="mui-table-view-cell mui-radio mui-left"> <li class="mui-table-view-cell mui-radio mui-left">
<input name="radio" type="radio">Item 3 <input name="radio" type="radio">Item 6
</li> </li>
<li class="mui-table-view-cell mui-checkbox mui-left"> <li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 3 <input name="checkbox" type="checkbox">Item 7
</li> </li>
<li class="mui-table-view-cell mui-checkbox mui-left"> <li class="mui-table-view-cell mui-checkbox mui-left">
<input name="checkbox" type="checkbox">Item 3 <input name="checkbox" type="checkbox">Item 8
</li> </li>
</ul> </ul>
</div> </div>
......
examples/hello-mui/examples/oa-missives-detail.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<link rel="stylesheet" href="../css/oa.css"> <link rel="stylesheet" href="../css/oa.css">
......
examples/hello-mui/examples/offcanvas-left-plus-main.html 0 → 100644
View file @ 17dd3025
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu 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">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<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
});
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
mui.plusReady(function(){
if(mui.os.android){
document.getElementById("switch").style.display = 'none';
}
});
var menu, showMenu = false,slideTogether = false;
window.addEventListener('pagebeforeshow', function() {
var left = '0%';
if(slideTogether){
left = '-70%';
}
menu = mui.createWindow({
id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html',
styles: {
left: left,
width:'70%',
zindex: 9998
}
});
if (menu) {
menu.show('none');
}
mui.currentWebview.setStyle({left:0});
});
document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
mui.currentWebview.setStyle({
left: showMenu ? '0' : '70%',
transition: {
duration: 200
}
});
//如果整体移动，则menu页面也需要移动；
if(slideTogether){
menu.setStyle({
left: showMenu ? '-70%' : '0%',
transition: {
duration: 200
}
});
}
showMenu = !showMenu;
});
function closeMenu(){
menu.close('none');
}
//按返回图标时，关闭菜单webview
document.querySelector('.mui-action-back').addEventListener('tap',closeMenu);
mui.plusReady(function(){
//按返回键时，关闭菜单webview
plus.key.addEventListener('backbutton', closeMenu, false);
});
//整体切换开关事件，按下时，需变换menu界面的初始化位置；
document.getElementById("switch").addEventListener('toggle',function(event){
if(event.detail.isActive){
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
menu.setStyle({left:'-70%'});
}else{
slideTogether = false;
menu.setStyle({left:'0%'});
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-plus-menu.html 0 → 100644
View file @ 17dd3025
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<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>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 8
</a>
</li>
</ul>
<style type="text/css">
html,body{
background-color: #333;
}
</style>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:false
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-right-plus-main.html 0 → 100644
View file @ 17dd3025
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
<a class="mui-action-back mui-icon mui-icon-close mui-pull-left"></a>
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
整体滑动
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<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>
</div>
</div>
<script>
mui.init({
swipeBack: false
});
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
mui.plusReady(function(){
if(mui.os.android){
document.getElementById("switch").style.display = 'none';
}
});
var menu, showMenu = false,slideTogether = false;
window.addEventListener('pagebeforeshow', function() {
var left = '30%';
if(slideTogether){
left = '100%';
}
menu = mui.createWindow({
id: 'offcanvas-plus-menu',
url: 'offcanvas-plus-menu.html',
styles: {
left: '30%',
width:'70%',
zindex: 9998
}
});
menu.show('none');
mui.currentWebview.setStyle({left:0});
});
//点击侧滑按钮
document.querySelector('.mui-action-menu').addEventListener('tap', function() {
mui.currentWebview.setStyle({
left: showMenu ? '0' : '-70%',
transition: {
duration: 200
}
});
if(slideTogether){
menu.setStyle({
left: showMenu ? '100%' : '30%',
transition: {
duration: 200
}
});
}
showMenu = !showMenu;
});
function closeMenu(){
menu.close('none');
}
//按返回图标时，关闭菜单webview
document.querySelector('.mui-action-back').addEventListener('tap',closeMenu);
mui.plusReady(function(){
//按返回键时，关闭菜单webview
plus.key.addEventListener('backbutton', closeMenu, false);
});
//整体切换开关事件，按下时，需变换menu界面的初始化位置；
document.getElementById("switch").addEventListener('toggle',function(event){
if(event.detail.isActive){
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在100%的地方；
menu.setStyle({left:'100%'});
}else{
slideTogether = false;
menu.setStyle({left:'30%'});
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-with-left.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,9 +21,10 @@ ...@@ -19,9 +21,10 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<div class="mui-off-canvas-wrap"> <div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap"> <div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a> <a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>
...@@ -61,72 +64,8 @@ ...@@ -61,72 +64,8 @@
<div class="mui-switch-handle"></div> <div class="mui-switch-handle"></div>
</div> </div>
</li> </li>
<li class="mui-table-view-cell mui-media"> </ul>
<a class="mui-navigate-right"> <ul class="mui-table-view mui-table-view-chevron">
<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"> <li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../images/42x42.gif"> <img class="mui-media-object mui-pull-left" src="../images/42x42.gif">
...@@ -194,6 +133,46 @@ ...@@ -194,6 +133,46 @@
</a> </a>
</li> </li>
</ul> </ul>
<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> </div>
<!-- off-canvas backdrop --> <!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div> <div class="mui-off-canvas-backdrop"></div>
...@@ -201,15 +180,15 @@ ...@@ -201,15 +180,15 @@
</div> </div>
<script> <script>
mui.init({ mui.init({
swipeBack : false, swipeBack: false,
}); });
var offCanvasContainer = document.querySelector('.mui-off-canvas-wrap'); var offCanvasContainer = document.querySelector('.mui-off-canvas-wrap');
var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap'); var offCanvasInnerContainer = offCanvasContainer.querySelector('.mui-inner-wrap');
var offCanvas = mui('#offCanvas'); var offCanvas = mui('#offCanvas');
document.getElementById('switch').addEventListener('toggle', function(event) { document.getElementById('switch').addEventListener('toggle', function(event) {
if (event.detail.isActive) {//整体滑动时，侧滑菜单在inner-wrap内 if (event.detail.isActive) { //整体滑动时，侧滑菜单在inner-wrap内
offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild); offCanvasInnerContainer.insertBefore(offCanvas[0], offCanvasInnerContainer.firstElementChild);
} else {//仅主内容滑动时，侧滑菜单在off-canvas-wrap内 } else { //仅主内容滑动时，侧滑菜单在off-canvas-wrap内
offCanvasContainer.insertBefore(offCanvas[0], offCanvasContainer.firstElementChild) offCanvasContainer.insertBefore(offCanvas[0], offCanvasContainer.firstElementChild)
} }
}); });
...@@ -220,7 +199,7 @@ ...@@ -220,7 +199,7 @@
document.getElementById('offCanvasHide').addEventListener('tap', function() { document.getElementById('offCanvasHide').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or hide; //offCanvas.offCanvas('toggle')//toggle or hide;
offCanvas.offCanvas('hide'); offCanvas.offCanvas('hide');
}); });
</script> </script>
</body> </body>
......
examples/hello-mui/examples/offcanvas-with-right.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,9 +21,10 @@ ...@@ -19,9 +21,10 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<div class="mui-off-canvas-wrap"> <div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap"> <div class="mui-inner-wrap">
<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> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
......
examples/hello-mui/examples/pagination.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
...@@ -235,5 +238,10 @@ ...@@ -235,5 +238,10 @@
}); });
})(mui); })(mui);
</script> </script>
<style type="text/css">
.mui-content{
padding: 10px;
}
</style>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/popovers-with-actionsheet.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/popovers-with-cross-webviews-popover.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<div class="mui-content"> <div class="mui-content">
......
examples/hello-mui/examples/popovers-with-cross-webviews.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/popovers-with-js-call.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<style> <style>
......
examples/hello-mui/examples/popovers.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<style> <style>
...@@ -42,10 +45,6 @@ ...@@ -42,10 +45,6 @@
<li class="mui-table-view-cell"><a href="#">Item4</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="#">Item5</a></li>
<li class="mui-table-view-cell"><a href="#">Item6</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> </ul>
</div> </div>
</div> </div>
......
examples/hello-mui/examples/preload-mixwebview-content.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<div class="mui-content"> <div class="mui-content">
......
examples/hello-mui/examples/preload-mixwebview-main.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/preload-webview-with-openwindow.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/preload-webview.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/preload.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/pulldown-and-pullup.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/pulldown-with-5+.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<div class="mui-content"> <div class="mui-content">
......
examples/hello-mui/examples/pulldown-with-plus-content-custom.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
......
examples/hello-mui/examples/pulldown-with-plus-content.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<div class="mui-content"> <div class="mui-content">
......
examples/hello-mui/examples/radio.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/range.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
......
examples/hello-mui/examples/slider-default.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,57 +21,75 @@ ...@@ -19,57 +21,75 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <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> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图片轮播</h1> <h1 class="mui-title">图片轮播</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-slider"> <ul class="mui-table-view mui-table-view-chevron">
<div class="mui-slider-group mui-slider-loop"> <li id="switch" class="mui-table-view-cell">
<div class="mui-slider-item"> 定时轮播
<a href="#"> <div class="mui-switch">
<img src="../images/yuantiao.jpg"> <div class="mui-switch-handle"></div>
</a> </div>
</div> </li>
<div class="mui-slider-item"> </ul>
<a href="#"> <div id="slider" class="mui-slider">
<img src="../images/shuijiao.jpg"> <div class="mui-slider-group mui-slider-loop">
</a> <div class="mui-slider-item">
</div> <a href="#">
<div class="mui-slider-item"> <img src="../images/yuantiao.jpg">
<a href="#"> </a>
<img src="../images/muwu.jpg"> </div>
</a> <div class="mui-slider-item">
</div> <a href="#">
<div class="mui-slider-item"> <img src="../images/shuijiao.jpg">
<a href="#"> </a>
<img src="../images/cbd.jpg"> </div>
</a> <div class="mui-slider-item">
</div> <a href="#">
<div class="mui-slider-item"> <img src="../images/muwu.jpg">
<a href="#"> </a>
<img src="../images/yuantiao.jpg"> </div>
</a> <div class="mui-slider-item">
</div> <a href="#">
<div class="mui-slider-item"> <img src="../images/cbd.jpg">
<a href="#"> </a>
<img src="../images/shuijiao.jpg"> </div>
</a> <div class="mui-slider-item">
</div> <a href="#">
</div> <img src="../images/yuantiao.jpg">
<div class="mui-slider-indicator"> </a>
<div class="mui-indicator mui-active"></div> </div>
<div class="mui-indicator"></div> <div class="mui-slider-item">
<div class="mui-indicator"></div> <a href="#">
<div class="mui-indicator"></div> <img src="../images/shuijiao.jpg">
</div> </a>
</div> </div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div> </div>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
mui.init({ var slider = mui("#slider");
swipeBack : false document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
slider.slider({
slideshowDelay: 5000
});
} else {
slider.slider({
slideshowDelay: 0
});
}
}); });
</script> </script>
......
examples/hello-mui/examples/slider-table-default.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/slider-table-pagination.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/slider-with-title.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,64 +21,82 @@ ...@@ -19,64 +21,82 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <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> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图片轮播</h1> <h1 class="mui-title">图片轮播</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<div class="mui-slider"> <ul class="mui-table-view mui-table-view-chevron">
<div class="mui-slider-group mui-slider-loop"> <li id="switch" class="mui-table-view-cell">
<div class="mui-slider-item"> 定时轮播
<a href="#"> <div class="mui-switch">
<img src="../images/yuantiao.jpg"> <div class="mui-switch-handle"></div>
<p class="mui-slider-title">静静看这世界</p> </div>
</a> </li>
</div> </ul>
<div class="mui-slider-item"> <div id="slider" class="mui-slider">
<a href="#"> <div class="mui-slider-group mui-slider-loop">
<img src="../images/shuijiao.jpg"> <div class="mui-slider-item">
<p class="mui-slider-title">幸福就是可以一起睡觉</p> <a href="#">
</a> <img src="../images/yuantiao.jpg">
</div> <p class="mui-slider-title">静静看这世界</p>
<div class="mui-slider-item"> </a>
<a href="#"> </div>
<img src="../images/muwu.jpg"> <div class="mui-slider-item">
<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p> <a href="#">
</a> <img src="../images/shuijiao.jpg">
</div> <p class="mui-slider-title">幸福就是可以一起睡觉</p>
<div class="mui-slider-item"> </a>
<a href="#"> </div>
<img src="../images/cbd.jpg"> <div class="mui-slider-item">
<p class="mui-slider-title">Color of SIP CBD</p> <a href="#">
</a> <img src="../images/muwu.jpg">
</div> <p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
<div class="mui-slider-item"> </a>
<a href="#"> </div>
<img src="../images/yuantiao.jpg"> <div class="mui-slider-item">
<p class="mui-slider-title">静静看这世界</p> <a href="#">
</a> <img src="../images/cbd.jpg">
</div> <p class="mui-slider-title">Color of SIP CBD</p>
<div class="mui-slider-item"> </a>
<a href="#"> </div>
<img src="../images/shuijiao.jpg"> <div class="mui-slider-item">
<p class="mui-slider-title">幸福就是可以一起睡觉</p> <a href="#">
</a> <img src="../images/yuantiao.jpg">
</div> <p class="mui-slider-title">静静看这世界</p>
</div> </a>
<div class="mui-slider-indicator mui-text-right"> </div>
<div class="mui-indicator mui-active"></div> <div class="mui-slider-item">
<div class="mui-indicator"></div> <a href="#">
<div class="mui-indicator"></div> <img src="../images/shuijiao.jpg">
<div class="mui-indicator"></div> <p class="mui-slider-title">幸福就是可以一起睡觉</p>
</div> </a>
</div> </div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div> </div>
<script> <script>
$.ready(function() { var slider = mui("#slider");
$('.mui-slider-group').slider(); document.getElementById("switch").addEventListener('toggle', function(e) {
}); if (e.detail.isActive) {
slider.slider({
slideshowDelay: 5000
});
} else {
slider.slider({
slideshowDelay: 0
});
}
});
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/speech.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/switches.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<style> <style>
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<style> <style>
......
examples/hello-mui/examples/tabbar-with-chat.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tabbar-with-map.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tabbar-with-sms.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tabbar-with-submenus.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tabbar.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<style> <style>
......
examples/hello-mui/examples/tableviews-with-chevrons.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tableviews-with-collapses.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tableviews-with-swipe.html
View file @ 17dd3025
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello MUI</title> <title>Hello MUI</title>
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script> <script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script> <script src="../js/app.js"></script>
<style> <style>
html, body { html,
body {
background-color: #efeff4; background-color: #efeff4;
} }
</style> </style>
...@@ -19,6 +21,7 @@ ...@@ -19,6 +21,7 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<style> <style>
...@@ -81,7 +84,7 @@ ...@@ -81,7 +84,7 @@
.oa-task-action { .oa-task-action {
background-color: #527fdc; background-color: #527fdc;
color: white; color: white;
width: 18%; width: 25%;
line-height: 62px; line-height: 62px;
} }
/*左拖拉出，右拖关闭菜单*/ /*左拖拉出，右拖关闭菜单*/
......
examples/hello-mui/js/app.js
View file @ 17dd3025
...@@ -21,22 +21,27 @@ ...@@ -21,22 +21,27 @@
$.ready(function() { $.ready(function() {
$('body').on('tap', 'a', function(e) { $('body').on('tap', 'a', function(e) {
var id = this.getAttribute('href'); var id = this.getAttribute('href');
if(id){ if (id) {
if (~id.indexOf('.html')) { if (~id.indexOf('.html')) {
if (window.plus) { if (window.plus) {
$.openWindow({ $.openWindow({
id: id, id: id,
url: this.href, url: this.href,
styles:{
zindex:9999,
},
preload: $.os.ios ? false : true //TODO 暂时屏蔽IOS的预加载 preload: $.os.ios ? false : true //TODO 暂时屏蔽IOS的预加载
}); });
} else { } else {
document.location.href = this.href; document.location.href = this.href;
} }
}else{ } else {
plus.runtime.openURL(id); if (typeof plus !== 'undefined') {
plus.runtime.openURL(id);
}
} }
} }
}); });
}); });
})(mui); })(mui);
......
examples/hello-mui/js/mui.min.js
View file @ 17dd3025
This diff is collapsed.
examples/hello-mui/js/update.json deleted 100644 → 0
View file @ b5d28290
{
"appid":"HelloMUI",
"iOS":{
"version":"0.5.1",
"title":"Hello H5+(0.7.0)版本更新",
"note":"新增自动升级检测功能\n新增分享功能演示页面\n新增推送功能演示页面\n",
"url":"itms-apps://itunes.apple.com/cn/app/hello-h5+/id682211190?l=zh&mt=8"
},
"Android":{
"version":"0.5.1",
"title":"Hello H5+(0.7.0)版本更新",
"note":"新增自动升级检测功能\n新增分享功能演示页面\n新增推送功能演示页面\n",
"url":"http://d.m3w.cn/helloh5p/HelloH5.apk"
}
}
\ No newline at end of file
examples/hello-mui/list.html
View file @ 17dd3025
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