Skip to content

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

优化hello mui

parent 7dfc1fdc
Expand all Show whitespace changes
Inline Side-by-side
Showing with 300 additions and 403 deletions
examples/hello-mui/css/mui.min.css
View file @ 3ae75f3a
This diff is collapsed.
examples/hello-mui/examples/badges.html
View file @ 3ae75f3a
<!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/buttons-with-fabs.html
View file @ 3ae75f3a
<!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/buttons-with-icons.html
View file @ 3ae75f3a
<!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/buttons.html
View file @ 3ae75f3a
<!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/cards.html
View file @ 3ae75f3a
<!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/checkbox.html
View file @ 3ae75f3a
<!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/demo.html deleted 100644 → 0
View file @ 7dfc1fdc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">预加载(模板)</h1>
</header>
<div class="mui-content">
<div id="demo" class="mui-content-padded">
<button class="mui-btn mui-btn-block" data-webview-id="demo1" data-webview-url="toggles.html">
Block button
</button>
<button class="mui-btn mui-btn-primary mui-btn-block" data-webview-id="demo2" data-webview-url="typography.html">
Block button
</button>
<button class="mui-btn mui-btn-success mui-btn-block" data-webview-id="demo3" data-webview-url="tableviews.html">
Block button
</button>
<button class="mui-btn mui-btn-warning mui-btn-block">
Block button
</button>
<button class="mui-btn mui-btn-danger mui-btn-block">
Block button
</button>
<button class="mui-btn mui-btn-royal mui-btn-block">
Block button
</button>
</div>
</div>
<script>
(function($) {
var templates = {};
var show = {
aniShow : 'slide-in-right',
duration : 400
};
$.ready(function() {
$('#demo').on('tap', 'button', function() {
var id = this.getAttribute('data-webview-id');
var url = this.getAttribute('data-webview-url');
var webview = templates[id];
if (webview) {
if (webview.showed) {
webview.clear();
}
webview.show(show.aniShow, show.duration);
webview.loadURL(url);
var waiting = null;
var timeout = setTimeout(function() {
console.log(timeout);
waiting = plus.nativeUI.showWaiting();
}, show.duration);
webview.addEventListener("loaded", function() {
console.log(waiting);
if (waiting) {
waiting.close();
} else {
clearTimeout(timeout);
}
webview.showed = true;
}, false);
}
});
});
$.plusReady(function() {
templates = {
demo1 : createTemplate('DEMO1'),
demo2 : createTemplate('DEMO2'),
demo3 : createTemplate('DEMO3')
}
});
})(mui);
var createTemplate = function(title) {
title = title || '';
var template = plus.webview.create('titlebar.html');
template.addEventListener('loaded', function() {
template.evalJS('document.querySelector(".mui-title").innerHTML="' + title + '"');
});
return template;
};
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/events.html deleted 100644 → 0
View file @ 7dfc1fdc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">Events</h1>
</header>
<div class="mui-content">
</div>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/forms-with-group-and-labels.html
View file @ 3ae75f3a
<!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/forms-with-group.html
View file @ 3ae75f3a
<!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/forms.html
View file @ 3ae75f3a
<!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/grid-default.html
View file @ 3ae75f3a
<!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/grid-pagination.html
View file @ 3ae75f3a
<!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/icons.html
View file @ 3ae75f3a
<!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>
...@@ -70,7 +73,6 @@ ...@@ -70,7 +73,6 @@
</a> </a>
<a> <a>
<span class="mui-icon mui-icon-spinner mui-spin"></span> <span class="mui-icon mui-icon-spinner mui-spin"></span>
</span>
</a> </a>
<a> <a>
<span class="mui-icon mui-icon-spinner-cycle mui-spin"></span> <span class="mui-icon mui-icon-spinner-cycle mui-spin"></span>
......
examples/hello-mui/examples/inputs.html
View file @ 3ae75f3a
<!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/iscroll.html
View file @ 3ae75f3a
<!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/modals.html
View file @ 3ae75f3a
<!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/oa-contact-list.html
View file @ 3ae75f3a
<!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 type="text/css"> <style type="text/css">
......
examples/hello-mui/examples/oa-contact-main.html
View file @ 3ae75f3a
<!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/oa-grid.html
View file @ 3ae75f3a
<!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/offcanvas-left-plus-main.html
View file @ 3ae75f3a
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<h1 class="mui-title">off canvas（侧滑导航）</h1> <h1 class="mui-title">off canvas（侧滑导航）</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron mui-hidden">
<li id="switch" class="mui-table-view-cell"> <li id="switch" class="mui-table-view-cell">
整体滑动 整体滑动
<div class="mui-switch"> <div class="mui-switch">
...@@ -118,15 +118,14 @@ ...@@ -118,15 +118,14 @@
swipeBack: false swipeBack: false
}); });
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性； //整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
mui.plusReady(function(){ if (!mui.os.android) {
if(mui.os.android){ document.getElementById("switch").parentNode.classList.remove('mui-hidden');
document.getElementById("switch").style.display = 'none';
} }
}); var menu, showMenu = false,
var menu, showMenu = false,slideTogether = false; slideTogether = false;
window.addEventListener('pagebeforeshow', function() { window.addEventListener('pagebeforeshow', function() {
var left = '0%'; var left = '0%';
if(slideTogether){ if (slideTogether) {
left = '-70%'; left = '-70%';
} }
menu = mui.createWindow({ menu = mui.createWindow({
...@@ -134,14 +133,16 @@ ...@@ -134,14 +133,16 @@
url: 'offcanvas-plus-menu.html', url: 'offcanvas-plus-menu.html',
styles: { styles: {
left: left, left: left,
width:'70%', width: '70%',
zindex: 9998 zindex: 9998
} }
}); });
if (menu) { if (menu) {
menu.show('none'); menu.show('none');
} }
mui.currentWebview.setStyle({left:0}); mui.currentWebview.setStyle({
left: 0
});
}); });
document.querySelector('.mui-icon-bars').addEventListener('tap', function() { document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
mui.currentWebview.setStyle({ mui.currentWebview.setStyle({
...@@ -151,7 +152,7 @@ ...@@ -151,7 +152,7 @@
} }
}); });
//如果整体移动，则menu页面也需要移动； //如果整体移动，则menu页面也需要移动；
if(slideTogether){ if (slideTogether) {
menu.setStyle({ menu.setStyle({
left: showMenu ? '-70%' : '0%', left: showMenu ? '-70%' : '0%',
transition: { transition: {
...@@ -161,29 +162,33 @@ ...@@ -161,29 +162,33 @@
} }
showMenu = !showMenu; showMenu = !showMenu;
}); });
function closeMenu(){
function closeMenu() {
menu.close('none'); menu.close('none');
} }
//按返回图标时，关闭菜单webview //按返回图标时，关闭菜单webview
document.querySelector('.mui-action-back').addEventListener('tap',closeMenu); document.querySelector('.mui-action-back').addEventListener('tap', closeMenu);
mui.plusReady(function(){ mui.plusReady(function() {
//按返回键时，关闭菜单webview //按返回键时，关闭菜单webview
plus.key.addEventListener('backbutton', closeMenu, false); plus.key.addEventListener('backbutton', closeMenu, false);
}); });
//整体切换开关事件，按下时，需变换menu界面的初始化位置； //整体切换开关事件，按下时，需变换menu界面的初始化位置；
document.getElementById("switch").addEventListener('toggle',function(event){ document.getElementById("switch").addEventListener('toggle', function(event) {
if(event.detail.isActive){ if (event.detail.isActive) {
//切换为整体移动 //切换为整体移动
//首先改变移动标志 //首先改变移动标志
slideTogether = true; slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方； //变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
menu.setStyle({left:'-70%'}); menu.setStyle({
}else{ left: '-70%'
});
} else {
slideTogether = false; slideTogether = false;
menu.setStyle({left:'0%'}); menu.setStyle({
left: '0%'
});
} }
}); });
</script> </script>
</body> </body>
......
examples/hello-mui/examples/offcanvas-right-plus-main.html
View file @ 3ae75f3a
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<h1 class="mui-title">off canvas（侧滑导航）</h1> <h1 class="mui-title">off canvas（侧滑导航）</h1>
</header> </header>
<div class="mui-content"> <div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron"> <ul class="mui-table-view mui-table-view-chevron mui-hidden">
<li id="switch" class="mui-table-view-cell"> <li id="switch" class="mui-table-view-cell">
整体滑动 整体滑动
<div class="mui-switch"> <div class="mui-switch">
...@@ -116,11 +116,9 @@ ...@@ -116,11 +116,9 @@
swipeBack: false swipeBack: false
}); });
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性； //整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
mui.plusReady(function(){ if (!mui.os.android) {
if(mui.os.android){ document.getElementById("switch").parentNode.classList.remove('mui-hidden');
document.getElementById("switch").style.display = 'none';
} }
});
var menu, showMenu = false,slideTogether = false; var menu, showMenu = false,slideTogether = false;
window.addEventListener('pagebeforeshow', function() { window.addEventListener('pagebeforeshow', function() {
var left = '30%'; var left = '30%';
......
examples/hello-mui/examples/preload.html
View file @ 3ae75f3a
...@@ -50,9 +50,6 @@ ...@@ -50,9 +50,6 @@
//两个webview合成的预加载 //两个webview合成的预加载
id : 'preloadMixWebview', //可选ID，未设置的话使用URL作为窗口ID id : 'preloadMixWebview', //可选ID，未设置的话使用URL作为窗口ID
url : 'preload-mixwebview-main.html', url : 'preload-mixwebview-main.html',
preload : true,
styles : {
},
subpages : [{ subpages : [{
id : 'preloadMixWebviewContent', id : 'preloadMixWebviewContent',
url : 'preload-mixwebview-content.html', url : 'preload-mixwebview-content.html',
...@@ -63,13 +60,9 @@ ...@@ -63,13 +60,9 @@
}, { }, {
id : 'preloadWebview', //可选ID，未设置的话使用URL作为窗口ID id : 'preloadWebview', //可选ID，未设置的话使用URL作为窗口ID
url : 'preload-webview.html', url : 'preload-webview.html',
preload : true,
styles : { styles : {
}, },
afterShowMethodName : 'preload_webview', //跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现 afterShowMethodName : 'preload_webview', //跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现
subpages : [
//子webview配置
]
}] }]
}); });
//点击打开mix窗口(两个webview合成的预加载窗口) //点击打开mix窗口(两个webview合成的预加载窗口)
......
examples/hello-mui/examples/pulldown-and-pullup.html
View file @ 3ae75f3a
...@@ -74,7 +74,20 @@ ...@@ -74,7 +74,20 @@
contentdown: '下拉可以刷新', contentdown: '下拉可以刷新',
contentover: '释放立即刷新', contentover: '释放立即刷新',
contentrefresh: '正在刷新...', contentrefresh: '正在刷新...',
callback: function(callback) { callback:pulldownRefresh
},
up: {
contentdown: '上拉显示更多',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh(callback){
setTimeout(function() { setTimeout(function() {
var table = document.body.querySelector('.mui-table-view'); var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell'); var cells = document.body.querySelectorAll('.mui-table-view-cell');
...@@ -82,17 +95,16 @@ ...@@ -82,17 +95,16 @@
var li = document.createElement('li'); var li = document.createElement('li');
li.className = 'mui-table-view-cell'; li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild); table.insertBefore(li, table.firstChild);
} }
callback(); //refresh completed callback(); //refresh completed
}, 1000); }, 1000);
} }
}, /**
up: { * 上拉加载具体业务实现
contentdown: '上拉显示更多', */
contentover: '释放立即刷新', function pullupRefresh(callback){
contentrefresh: '正在刷新...',
callback: function(callback) {
setTimeout(function() { setTimeout(function() {
var table = document.body.querySelector('.mui-table-view'); var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell'); var cells = document.body.querySelectorAll('.mui-table-view-cell');
...@@ -105,10 +117,6 @@ ...@@ -105,10 +117,6 @@
callback(); //refresh completed callback(); //refresh completed
}, 1000); }, 1000);
} }
}
}
});
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/pulldown-with-5+.html deleted 100644 → 0
View file @ 7dfc1fdc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
</style>
<script>
mui.init();
</script>
</head>
<body>
<div class="mui-content">
<div class="mui-content-padded">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 6
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 5
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 4
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
</ul>
</div>
</div>
<script>
mui.init({
optimize: true,
titleBar: {
title: 'pulldown with 5+'
},
pulldownRefresh: {
container: '.mui-content',
contentdown: '下拉可以刷新',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function(callback) {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.insertBefore(li, table.firstChild);
}
callback();//refresh completed
}, 1000);
}
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown-with-plus-content.html
View file @ 3ae75f3a
...@@ -62,9 +62,7 @@ ...@@ -62,9 +62,7 @@
</div> </div>
<script> <script>
mui.init({ mui.init({
optimize : true,
pullRefresh : { pullRefresh : {
container : '.mui-content',
down : { down : {
callback :pulldownRefresh callback :pulldownRefresh
} }
...@@ -82,7 +80,6 @@ ...@@ -82,7 +80,6 @@
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.insertBefore(li, table.firstChild); table.insertBefore(li, table.firstChild);
} }
//ws.endPullToRefresh();
//refresh completed 这行代码必须调用 //refresh completed 这行代码必须调用
callback(); callback();
}, 1000); }, 1000);
......
examples/hello-mui/examples/pulldown-with-plus-main-custom.html
View file @ 3ae75f3a
<!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,29 +21,19 @@ ...@@ -19,29 +21,19 @@
mui.init(); mui.init();
</script> </script>
</head> </head>
<body> <body>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
var ws = null, var list;
list = null;
// 扩展API加载完毕，现在可以正常调用扩展API // 扩展API加载完毕，现在可以正常调用扩展API
function plusReady() { function init() {
ws = plus.webview.currentWebview();
// wo = ws.opener();
list = plus.webview.create("pulldown-with-plus-content-custom.html", "pulldown-with-plus-content-custom.html", { list = plus.webview.create("pulldown-with-plus-content-custom.html", "pulldown-with-plus-content-custom.html", {
top: "48px", top: "48px",
bottom: "0px", bottom: "0px",
bounce: "vertical" bounce: "vertical"
}); });
// ws.append(list); plus.webview.currentWebview().append(list);
// list.addEventListener("loaded", function() { //叶面加载完成后才显示
// ws.show("slide-in-right", 300);
// wo.evalJS("closeWaiting()");
// if (plus.os.name != "Android") {
// plus.nativeUI.alert("由于Android性能不足，我们提供了原生的下拉刷新加速方案。iOS设备请使 用iscroll等标准框架来解决下拉刷新问题");
// }
// }, false);
ws.append(list);
// 实现列表可下拉刷新 // 实现列表可下拉刷新
list.addEventListener("dragBounce", onPullStateChange, false); list.addEventListener("dragBounce", onPullStateChange, false);
list.setBounce({ list.setBounce({
...@@ -53,14 +45,10 @@ ...@@ -53,14 +45,10 @@
} }
}); });
} }
if (window.plus) { mui.plusReady(init);
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// DOMContentLoaded事件处理 // DOMContentLoaded事件处理
var etext = null, var etext = null,eicon = null;
eicon = null;
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
etext = document.getElementById("text"); etext = document.getElementById("text");
eicon = document.getElementById("icon"); eicon = document.getElementById("icon");
...@@ -139,7 +127,7 @@ ...@@ -139,7 +127,7 @@
<div id="pull"> <div id="pull">
<img id="icon" src="../images/pull_arrow.png" /> <img id="icon" src="../images/pull_arrow.png" />
</div><font id="text">下拉可刷新</font> </div><font id="text">下拉可刷新</font>
</div> </div>
</div> </div>
......
examples/hello-mui/examples/pulldown-with-plus-main.html
View file @ 3ae75f3a
<!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.html
View file @ 3ae75f3a
<!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">
...@@ -71,7 +74,14 @@ ...@@ -71,7 +74,14 @@
contentdown: '下拉可以刷新', contentdown: '下拉可以刷新',
contentover: '释放立即刷新', contentover: '释放立即刷新',
contentrefresh: '正在刷新...', contentrefresh: '正在刷新...',
callback: function(callback) { callback: pulldownRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh(callback){
setTimeout(function() { setTimeout(function() {
var table = document.body.querySelector('.mui-table-view'); var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell'); var cells = document.body.querySelectorAll('.mui-table-view-cell');
...@@ -84,10 +94,7 @@ ...@@ -84,10 +94,7 @@
callback(); //refresh completed callback(); //refresh completed
}, 1000); }, 1000);
} }
}
}
});
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/pullup.html
View file @ 3ae75f3a
<!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">
...@@ -64,14 +67,20 @@ ...@@ -64,14 +67,20 @@
<script> <script>
mui.init({ mui.init({
swipeBack: false, swipeBack: false,
optimize: false,
pullRefresh: { pullRefresh: {
container: '.mui-content-padded', container: '.mui-content-padded',
up: { up: {
contentdown: '上拉显示更多', contentdown: '上拉显示更多',
contentover: '释放立即刷新', contentover: '释放立即刷新',
contentrefresh: '正在刷新...', contentrefresh: '正在刷新...',
callback: function(callback) { callback: pullupRefresh
}
}
});
/**
* 上拉加载具体业务实现
*/
function pullupRefresh(callback) {
setTimeout(function() { setTimeout(function() {
callback(); //refresh completed callback(); //refresh completed
var table = document.body.querySelector('.mui-table-view'); var table = document.body.querySelector('.mui-table-view');
...@@ -84,10 +93,6 @@ ...@@ -84,10 +93,6 @@
} }
}, 1000); }, 1000);
} }
}
}
});
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-labels-only.html
View file @ 3ae75f3a
<!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-anchor.html
View file @ 3ae75f3a
<!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/tableview-image-left.html
View file @ 3ae75f3a
<!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/tableview-image-right.html
View file @ 3ae75f3a
<!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/tableview-with-images-and-chevrons.html
View file @ 3ae75f3a
<!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-badges-and-chevrons.html
View file @ 3ae75f3a
<!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-badges.html
View file @ 3ae75f3a
<!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 @ 3ae75f3a
...@@ -327,22 +327,27 @@ ...@@ -327,22 +327,27 @@
swipeBack : false swipeBack : false
}); });
(function($) { (function($) {
var btnArray = ['确认','取消'];
$('#OA_task_1').on('tap', '.oa-task-action', function() { $('#OA_task_1').on('tap', '.oa-task-action', function() {
if (confirm('确认删除该条记录吗?')) {
var cell = this.parentNode.parentNode; var cell = this.parentNode.parentNode;
cell.parentNode.removeChild(cell); cell.parentNode.removeChild(cell);
}
}); });
$('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) { $('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {
if (confirm('左拖：确认删除该条记录吗?')) { var elem = this;
this.parentNode.removeChild(this); mui.confirm('确认删除该条记录？','Hello MUI',btnArray,function(e){
if(e.index==0){
elem.parentNode.removeChild(elem);
} }
}); });
});
$('#OA_task_2').on('slideright', '.mui-table-view-cell', function(event) { $('#OA_task_2').on('slideright', '.mui-table-view-cell', function(event) {
if (confirm('右拖：确认删除该条记录吗?')) { var elem = this;
this.parentNode.removeChild(this); mui.confirm('确认删除该条记录？','Hello MUI',btnArray,function(e){
if(e.index==0){
elem.parentNode.removeChild(elem);
} }
}); });
});
})(mui); })(mui);
</script> </script>
</body> </body>
......
examples/hello-mui/examples/tableviews-with-switches.html
View file @ 3ae75f3a
<!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.html
View file @ 3ae75f3a
<!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/titlebar-with-html5-and-5+.html
View file @ 3ae75f3a
<!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> <script>
......
examples/hello-mui/examples/titlebar-with-icons.html
View file @ 3ae75f3a
<!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/titlebar-with-text-and-icons.html
View file @ 3ae75f3a
<!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/titlebar-with-webview-and-5+.html
View file @ 3ae75f3a
<!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> <script>
......
examples/hello-mui/examples/typography.html
View file @ 3ae75f3a
<!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/index.html
View file @ 3ae75f3a
...@@ -33,6 +33,27 @@ ...@@ -33,6 +33,27 @@
document.getElementById('info').addEventListener('tap', function() { document.getElementById('info').addEventListener('tap', function() {
$.openWindow('examples/info.html', 'info'); $.openWindow('examples/info.html', 'info');
}); });
mui.plusReady(function() {
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
plus.key.addEventListener('backbutton', function(){
//首次按键，提示‘再按一次退出应用’
if(!first){
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function(){
first = null;
},1000);
}else{
if(new Date().getTime()-first<1000){
plus.runtime.quit();
}
}
}, false);
});
</script> </script>
</body> </body>
</html> </html>
......
examples/hello-mui/js/mui.min.js
View file @ 3ae75f3a
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