Skip to content

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

优化hello mui

parent 7dfc1fdc
Expand all Hide 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>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<style>
......
examples/hello-mui/examples/buttons-with-fabs.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<style>
......
examples/hello-mui/examples/buttons-with-icons.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<style>
......
examples/hello-mui/examples/buttons.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<style>
......
examples/hello-mui/examples/cards.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/checkbox.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<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>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/forms-with-group.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/forms.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
......
examples/hello-mui/examples/grid-default.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/grid-pagination.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<style>
......
examples/hello-mui/examples/icons.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<style>
......@@ -70,7 +73,6 @@
</a>
<a>
<span class="mui-icon mui-icon-spinner mui-spin"></span>
</span>
</a>
<a>
<span class="mui-icon mui-icon-spinner-cycle mui-spin"></span>
......
examples/hello-mui/examples/inputs.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/iscroll.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<style>
......
examples/hello-mui/examples/modals.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/oa-contact-list.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<style type="text/css">
......
examples/hello-mui/examples/oa-contact-main.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<link rel="stylesheet" href="../css/oa.css">
......
examples/hello-mui/examples/oa-grid.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<style>
......
examples/hello-mui/examples/offcanvas-left-plus-main.html
View file @ 3ae75f3a
......@@ -32,7 +32,7 @@
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<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">
整体滑动
<div class="mui-switch">
......@@ -118,15 +118,14 @@
swipeBack: false
});
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
mui.plusReady(function(){
if(mui.os.android){
document.getElementById("switch").style.display = 'none';
}
});
var menu, showMenu = false,slideTogether = false;
if (!mui.os.android) {
document.getElementById("switch").parentNode.classList.remove('mui-hidden');
}
var menu, showMenu = false,
slideTogether = false;
window.addEventListener('pagebeforeshow', function() {
var left = '0%';
if(slideTogether){
if (slideTogether) {
left = '-70%';
}
menu = mui.createWindow({
......@@ -134,14 +133,16 @@
url: 'offcanvas-plus-menu.html',
styles: {
left: left,
width:'70%',
width: '70%',
zindex: 9998
}
});
if (menu) {
menu.show('none');
}
mui.currentWebview.setStyle({left:0});
mui.currentWebview.setStyle({
left: 0
});
});
document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
mui.currentWebview.setStyle({
......@@ -151,7 +152,7 @@
}
});
//如果整体移动，则menu页面也需要移动；
if(slideTogether){
if (slideTogether) {
menu.setStyle({
left: showMenu ? '-70%' : '0%',
transition: {
......@@ -161,29 +162,33 @@
}
showMenu = !showMenu;
});
function closeMenu(){
menu.close('none');
}
//按返回图标时，关闭菜单webview
document.querySelector('.mui-action-back').addEventListener('tap',closeMenu);
mui.plusReady(function(){
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){
document.getElementById("switch").addEventListener('toggle', function(event) {
if (event.detail.isActive) {
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
menu.setStyle({left:'-70%'});
}else{
menu.setStyle({
left: '-70%'
});
} else {
slideTogether = false;
menu.setStyle({left:'0%'});
menu.setStyle({
left: '0%'
});
}
});
</script>
</body>
......
examples/hello-mui/examples/offcanvas-right-plus-main.html
View file @ 3ae75f3a
......@@ -32,7 +32,7 @@
<h1 class="mui-title">off canvas（侧滑导航）</h1>
</header>
<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">
整体滑动
<div class="mui-switch">
......@@ -116,11 +116,9 @@
swipeBack: false
});
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
mui.plusReady(function(){
if(mui.os.android){
document.getElementById("switch").style.display = 'none';
}
});
if (!mui.os.android) {
document.getElementById("switch").parentNode.classList.remove('mui-hidden');
}
var menu, showMenu = false,slideTogether = false;
window.addEventListener('pagebeforeshow', function() {
var left = '30%';
......
examples/hello-mui/examples/preload.html
View file @ 3ae75f3a
......@@ -50,9 +50,6 @@
//两个webview合成的预加载
id : 'preloadMixWebview', //可选ID，未设置的话使用URL作为窗口ID
url : 'preload-mixwebview-main.html',
preload : true,
styles : {
},
subpages : [{
id : 'preloadMixWebviewContent',
url : 'preload-mixwebview-content.html',
......@@ -63,13 +60,9 @@
}, {
id : 'preloadWebview', //可选ID，未设置的话使用URL作为窗口ID
url : 'preload-webview.html',
preload : true,
styles : {
},
afterShowMethodName : 'preload_webview', //跨webview的js call,不应该有这种东西，应该5+触发afterShow，预加载窗口监听实现
subpages : [
//子webview配置
]
}]
});
//点击打开mix窗口(两个webview合成的预加载窗口)
......
examples/hello-mui/examples/pulldown-and-pullup.html
View file @ 3ae75f3a
......@@ -74,41 +74,49 @@
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);
}
callback:pulldownRefresh
},
up: {
contentdown: '上拉显示更多',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function(callback) {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
callback(); //refresh completed
}, 1000);
}
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh(callback){
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
callback(); //refresh completed
}, 1000);
}
/**
* 上拉加载具体业务实现
*/
function pullupRefresh(callback){
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
callback(); //refresh completed
}, 1000);
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pulldown-with-5+.html 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 @@
</div>
<script>
mui.init({
optimize : true,
pullRefresh : {
container : '.mui-content',
down : {
callback :pulldownRefresh
}
......@@ -82,7 +80,6 @@
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.insertBefore(li, table.firstChild);
}
//ws.endPullToRefresh();
//refresh completed 这行代码必须调用
callback();
}, 1000);
......
examples/hello-mui/examples/pulldown-with-plus-main-custom.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,29 +21,19 @@
mui.init();
</script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
var ws = null,
list = null;
// 扩展API加载完毕，现在可以正常调用扩展API
function plusReady() {
ws = plus.webview.currentWebview();
// wo = ws.opener();
var list;
// 扩展API加载完毕，现在可以正常调用扩展API
function init() {
list = plus.webview.create("pulldown-with-plus-content-custom.html", "pulldown-with-plus-content-custom.html", {
top: "48px",
bottom: "0px",
bounce: "vertical"
});
// ws.append(list);
// list.addEventListener("loaded", function() { //叶面加载完成后才显示
// ws.show("slide-in-right", 300);
// wo.evalJS("closeWaiting()");
// if (plus.os.name != "Android") {
// plus.nativeUI.alert("由于Android性能不足，我们提供了原生的下拉刷新加速方案。iOS设备请使 用iscroll等标准框架来解决下拉刷新问题");
// }
// }, false);
ws.append(list);
plus.webview.currentWebview().append(list);
// 实现列表可下拉刷新
list.addEventListener("dragBounce", onPullStateChange, false);
list.setBounce({
......@@ -53,14 +45,10 @@
}
});
}
if (window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
mui.plusReady(init);
// DOMContentLoaded事件处理
var etext = null,
eicon = null;
var etext = null,eicon = null;
document.addEventListener("DOMContentLoaded", function() {
etext = document.getElementById("text");
eicon = document.getElementById("icon");
......@@ -135,11 +123,11 @@
<h1 class="mui-title">自定义下拉刷新</h1>
</header>
<div class="mui-content">
<div style="text-align:center;height:44px;line-height:44px;">
<div id="pull">
<img id="icon" src="../images/pull_arrow.png" />
</div><font id="text">下拉可刷新</font>
</div>
<div style="text-align:center;height:44px;line-height:44px;">
<div id="pull">
<img id="icon" src="../images/pull_arrow.png" />
</div><font id="text">下拉可刷新</font>
</div>
</div>
......
examples/hello-mui/examples/pulldown-with-plus-main.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/pulldown.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......@@ -71,23 +74,27 @@
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);
}
callback: pulldownRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh(callback){
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.insertBefore(li, table.firstChild);
}
callback(); //refresh completed
}, 1000);
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/pullup.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......@@ -64,30 +67,32 @@
<script>
mui.init({
swipeBack: false,
optimize: false,
pullRefresh: {
container: '.mui-content-padded',
up: {
contentdown: '上拉显示更多',
contentover: '释放立即刷新',
contentrefresh: '正在刷新...',
callback: function(callback) {
setTimeout(function() {
callback(); //refresh completed
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1000);
}
callback: pullupRefresh
}
}
});
/**
* 上拉加载具体业务实现
*/
function pullupRefresh(callback) {
setTimeout(function() {
callback(); //refresh completed
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 3; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
table.appendChild(li);
}
}, 1000);
}
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-labels-only.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tabbar-with-anchor.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tableview-image-left.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tableview-image-right.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tableview-with-images-and-chevrons.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tableviews-with-badges-and-chevrons.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tableviews-with-badges.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tableviews-with-swipe.html
View file @ 3ae75f3a
......@@ -327,21 +327,26 @@
swipeBack : false
});
(function($) {
var btnArray = ['确认','取消'];
$('#OA_task_1').on('tap', '.oa-task-action', function() {
if (confirm('确认删除该条记录吗?')) {
var cell = this.parentNode.parentNode;
cell.parentNode.removeChild(cell);
}
var cell = this.parentNode.parentNode;
cell.parentNode.removeChild(cell);
});
$('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {
if (confirm('左拖：确认删除该条记录吗?')) {
this.parentNode.removeChild(this);
}
$('#OA_task_2').on('slideleft', '.mui-table-view-cell', function(event) {
var elem = 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) {
if (confirm('右拖：确认删除该条记录吗?')) {
this.parentNode.removeChild(this);
}
var elem = this;
mui.confirm('确认删除该条记录？','Hello MUI',btnArray,function(e){
if(e.index==0){
elem.parentNode.removeChild(elem);
}
});
});
})(mui);
</script>
......
examples/hello-mui/examples/tableviews-with-switches.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/tableviews.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/titlebar-with-html5-and-5+.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<script>
......
examples/hello-mui/examples/titlebar-with-icons.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
......
examples/hello-mui/examples/titlebar-with-text-and-icons.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<style>
......
examples/hello-mui/examples/titlebar-with-webview-and-5+.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<script>
......
examples/hello-mui/examples/typography.html
View file @ 3ae75f3a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -11,7 +12,8 @@
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<style>
html, body {
html,
body {
background-color: #efeff4;
}
</style>
......@@ -19,6 +21,7 @@
mui.init();
</script>
</head>
<body>
<style>
......
examples/hello-mui/index.html
View file @ 3ae75f3a
......@@ -33,6 +33,27 @@
document.getElementById('info').addEventListener('tap', function() {
$.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>
</body>
</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