Skip to content

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

删除hello mui中的app.js，精简工程代码

parent 3512eca7
Hide whitespace changes
Inline Side-by-side
Showing with 556 additions and 548 deletions
examples/hello-mui/examples/accordion.html
View file @ d7337b08
......@@ -124,9 +124,10 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</body>
......
examples/hello-mui/examples/actionsheet-plus.html
View file @ d7337b08
......@@ -77,9 +77,10 @@
<p id="info"></p>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
});
......
examples/hello-mui/examples/actionsheet.html
View file @ d7337b08
......@@ -28,16 +28,16 @@
margin-left: -15px;
padding-right: 10px;
}
#info{
padding: 20px 10px ;
}
.des{
margin: .5em 0;
}
.des>li{
font-size: 14px;
#info {
padding: 20px 10px;
}
.des {
margin: .5em 0;
}
.des>li {
font-size: 14px;
color: #8f8f94;
}
}
</style>
</head>
......@@ -69,9 +69,11 @@
<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>
</p>
<p>本页面为H5模式的actionsheet演示示例，该模式具有如下优点：</p>
<ul class="des"><li>可通过css自由定制展现样式</li></ul>
<p>另一方面，H5模式的actionsheet也具备如下缺点：</p>
<ul class="des">
<li>可通过css自由定制展现样式</li>
</ul>
<p>另一方面，H5模式的actionsheet也具备如下缺点：</p>
<ul class="des">
<li>不支持覆盖顶部状态栏</li>
<li>不支持跨webview的遮罩</li>
......@@ -81,8 +83,6 @@
</div>
</div>
<div id="delete" class="mui-popover mui-popover-action mui-popover-bottom">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
......@@ -131,27 +131,29 @@
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
});
mui('body').on('hidden', '.mui-popover', function(e) {
//console.log('hidden', e.detail.id);//detail为当前popover元素
});
var info = document.getElementById("info");
mui('body').on('tap','.mui-popover-action li>a',function () {
var a = this,parent;
var info = document.getElementById("info");
mui('body').on('tap', '.mui-popover-action li>a', function() {
var a = this,
parent;
//根据点击按钮，反推当前是哪个actionsheet
for(parent=a.parentNode;parent!=document.body;parent=parent.parentNode){
if(parent.classList.contains('mui-popover-action')){
for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
if (parent.classList.contains('mui-popover-action')) {
break;
}
}
//关闭actionsheet
mui('#'+parent.id).popover('toggle');
info.innerHTML = "你刚点击了\""+a.innerHTML+"\"按钮";
mui('#' + parent.id).popover('toggle');
info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
})
</script>
......
examples/hello-mui/examples/ajax.html
View file @ d7337b08
......@@ -70,10 +70,11 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
(function($) {
mui.init();
$.init({
swipeBack:true //启用右滑关闭功能
});
var methodEl = document.getElementById("method");
var dataTypeEl = document.getElementById("dataType");
var respnoseEl = document.getElementById("response");
......
examples/hello-mui/examples/badges.html
View file @ d7337b08
......@@ -54,8 +54,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-badges.html
View file @ d7337b08
......@@ -46,8 +46,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-block.html
View file @ d7337b08
......@@ -48,8 +48,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons-with-icons.html
View file @ d7337b08
......@@ -69,8 +69,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/buttons.html
View file @ d7337b08
......@@ -87,8 +87,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/checkbox.html
View file @ d7337b08
......@@ -64,8 +64,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/dialog.html
View file @ d7337b08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
......@@ -50,11 +49,11 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init({
swipeBack:true //启用右滑关闭功能
});
var info = document.getElementById("info");
document.getElementById("alertBtn").addEventListener('tap',function(){
mui.alert('欢迎使用Hello MUI','Hello MUI',function(){
......
examples/hello-mui/examples/grid-default.html
View file @ d7337b08
......@@ -61,8 +61,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/grid-pagination.html
View file @ d7337b08
......@@ -228,11 +228,8 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
});
mui.init();
mui.ready(function() {
var slider = document.getElementById('Gallery');
var group = slider.querySelector('.mui-slider-group');
......
examples/hello-mui/examples/icons.html
View file @ d7337b08
......@@ -158,11 +158,10 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
</script>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:true //启用右滑关闭功能
});
var active = null,
lastid, span;
mui(".mui-content").on("tap", "a", function() {
......
examples/hello-mui/examples/info.html
View file @ d7337b08
......@@ -59,9 +59,10 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
//处理点击事件，需要打开原生浏览器
mui('body').on('tap', 'a', function(e) {
var href = this.getAttribute('href');
......
examples/hello-mui/examples/input.html
View file @ d7337b08
......@@ -55,9 +55,10 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
//语音识别完成事件
document.getElementById("search").addEventListener('recognized', function(e) {
console.log(e.detail.value);
......
examples/hello-mui/examples/list-triplex-row.html
View file @ d7337b08
......@@ -113,8 +113,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/list-with-input.html
View file @ d7337b08
......@@ -76,8 +76,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/media-list.html
View file @ d7337b08
......@@ -219,8 +219,9 @@
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/nav.html
View file @ d7337b08
......@@ -10,127 +10,126 @@
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
html,
body {
background-color: #efeff4;
}
.mui-bar .mui-pull-left .mui-icon{
.mui-bar .mui-pull-left .mui-icon {
padding-right: 5px;
font-size: 28px;
}
.mui-bar .mui-btn{
.mui-bar .mui-btn {
font-weight: normal;
font-size: 17px;
}
.mui-bar .mui-btn-link{
.mui-bar .mui-btn-link {
top: 1px;
}
</style>
</head>
<body>
<header id="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">
<p style="margin: 35px 15px;">这是nav bar（顶部导航栏）演示页面，
你可以在顶部导航中放置多种控件，点击如下单选框切换导航栏显示内容；</p>
<h5 class="mui-content-padded">左侧显示内容</h5>
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label>不显示</label>
<input name="style" type="radio" value="left-none">
</div>
<div class="mui-input-row mui-radio">
<label>仅图标</label>
<input name="style" type="radio" checked value="left-icon">
</div>
<div class="mui-input-row mui-radio">
<label>图标加文字按钮</label>
<input name="style" type="radio" value="left-btn">
</div>
</form>
<h5 class="mui-content-padded" style="margin-top: 35px;">右侧显示内容</h5>
<form class="mui-input-group" style="margin-bottom: 15px;">
<div class="mui-input-row mui-radio">
<label>不显示</label>
<input name="style" type="radio" checked="" value="right-none">
</div>
<div class="mui-input-row mui-radio">
<label>仅图标</label>
<input name="style" type="radio" value="right-icon">
</div>
<div class="mui-input-row mui-radio">
<label>文字按钮</label>
<input name="style" type="radio" value="right-btn">
</div>
</form>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
mui.init();
var header = document.getElementById("header");
//左侧icon
var lefticon = document.createElement('a');
lefticon.className ='mui-action-back mui-icon mui-icon-left-nav mui-pull-left';
//左侧图标+文字按钮
var leftbtn = document.createElement('button');
leftbtn.className ='mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left';
var span = document.createElement('span');
span.className = 'mui-icon mui-icon-left-nav';
leftbtn.appendChild(span);
var text = document.createTextNode('首页');
leftbtn.appendChild(text);
//右侧icon
var righticon = document.createElement('a');
righticon.className ='mui-icon mui-icon-bars mui-pull-right';
//右侧文字按钮
var rightbtn = document.createElement('button');
rightbtn.className ='mui-btn mui-btn-blue mui-btn-link mui-pull-right';
rightbtn.innerText = '编辑';
//删除原先存在的节点
function remove(selector){
var elem = header.querySelector(selector);
if(elem){
header.removeChild(elem);
}
}
mui('.mui-input-group').on('change','input',function () {
if(this.checked){
switch (this.value){
case 'left-none':
remove('.mui-pull-left')
break;
case 'left-icon':
remove('.mui-pull-left');
header.appendChild(lefticon);
break;
case 'left-btn':
remove('.mui-pull-left');
header.appendChild(leftbtn);
break;
case 'right-none':
remove('.mui-pull-right');
break;
case 'right-icon':
remove('.mui-pull-right')
header.appendChild(righticon);
break;
case 'right-btn':
remove('.mui-pull-right');
header.appendChild(rightbtn);
break;
<header id="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">
<p style="margin: 35px 15px;">这是nav bar（顶部导航栏）演示页面， 你可以在顶部导航中放置多种控件，点击如下单选框切换导航栏显示内容；
</p>
<h5 class="mui-content-padded">左侧显示内容</h5>
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
<label>不显示</label>
<input name="style" type="radio" value="left-none">
</div>
<div class="mui-input-row mui-radio">
<label>仅图标</label>
<input name="style" type="radio" checked value="left-icon">
</div>
<div class="mui-input-row mui-radio">
<label>图标加文字按钮</label>
<input name="style" type="radio" value="left-btn">
</div>
</form>
<h5 class="mui-content-padded" style="margin-top: 35px;">右侧显示内容</h5>
<form class="mui-input-group" style="margin-bottom: 15px;">
<div class="mui-input-row mui-radio">
<label>不显示</label>
<input name="style" type="radio" checked="" value="right-none">
</div>
<div class="mui-input-row mui-radio">
<label>仅图标</label>
<input name="style" type="radio" value="right-icon">
</div>
<div class="mui-input-row mui-radio">
<label>文字按钮</label>
<input name="style" type="radio" value="right-btn">
</div>
</form>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
swipeBack:true //启用右滑关闭功能
});
var header = document.getElementById("header");
//左侧icon
var lefticon = document.createElement('a');
lefticon.className = 'mui-action-back mui-icon mui-icon-left-nav mui-pull-left';
//左侧图标+文字按钮
var leftbtn = document.createElement('button');
leftbtn.className = 'mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left';
var span = document.createElement('span');
span.className = 'mui-icon mui-icon-left-nav';
leftbtn.appendChild(span);
var text = document.createTextNode('首页');
leftbtn.appendChild(text);
//右侧icon
var righticon = document.createElement('a');
righticon.className = 'mui-icon mui-icon-bars mui-pull-right';
//右侧文字按钮
var rightbtn = document.createElement('button');
rightbtn.className = 'mui-btn mui-btn-blue mui-btn-link mui-pull-right';
rightbtn.innerText = '编辑';
//删除原先存在的节点
function remove(selector) {
var elem = header.querySelector(selector);
if (elem) {
header.removeChild(elem);
}
}
});
</script>
mui('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
switch (this.value) {
case 'left-none':
remove('.mui-pull-left')
break;
case 'left-icon':
remove('.mui-pull-left');
header.appendChild(lefticon);
break;
case 'left-btn':
remove('.mui-pull-left');
header.appendChild(leftbtn);
break;
case 'right-none':
remove('.mui-pull-right');
break;
case 'right-icon':
remove('.mui-pull-right')
header.appendChild(righticon);
break;
case 'right-btn':
remove('.mui-pull-right');
header.appendChild(rightbtn);
break;
}
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/oa-grid.html
View file @ d7337b08
......@@ -10,7 +10,6 @@
<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;
......@@ -23,7 +22,9 @@
}
</style>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</head>
......
examples/hello-mui/examples/offcanvas-drag-left-plus-main.html
View file @ d7337b08
......@@ -69,7 +69,6 @@
</form>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
var main,menu, mask = mui.createMask(_closeMenu);
var showMenu = false,
......
examples/hello-mui/examples/offcanvas-drag-left-plus-menu.html
View file @ d7337b08
......@@ -75,11 +75,8 @@
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:false,
});
mui.init();
var main = null;
mui.plusReady(function () {
main = plus.webview.currentWebview().opener();
......
examples/hello-mui/examples/offcanvas-drag-left.html
View file @ d7337b08
......@@ -148,7 +148,6 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
......@@ -163,9 +162,9 @@
//Android暂不支持整体移动动画
if(!mui.os.android){
document.getElementById("move-togger").classList.remove('mui-hidden');
var spans = document.querySelectorAll('.android-only');
for (var i=0,len=spans.length;i<len;i++) {
spans[i].style.display = "none";
var spans = document.querySelectorAll('.android-only');
for (var i=0,len=spans.length;i<len;i++) {
spans[i].style.display = "none";
}
}
......@@ -202,11 +201,11 @@
});
document.getElementById('offCanvasShow').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('show');
});
document.getElementById('offCanvasHide').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('close');
document.getElementById('offCanvasShow').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('show');
});
document.getElementById('offCanvasHide').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('close');
});
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
......
examples/hello-mui/examples/offcanvas-drag-right-plus-main.html
View file @ d7337b08
......@@ -68,222 +68,221 @@
</form>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
var main,menu, mask = mui.createMask(_closeMenu);
var showMenu = false,mode = 'main-move';
if (!mui.os.android) {
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
document.getElementById("move-togger").classList.remove('mui-hidden');
var spans = document.querySelectorAll('.android-only');
for (var i=0,len=spans.length;i<len;i++) {
spans[i].style.display = "none";
}
<script src="../js/mui.min.js"></script>
<script>
var main,menu, mask = mui.createMask(_closeMenu);
var showMenu = false,mode = 'main-move';
if (!mui.os.android) {
//整体滑动暂不支持android手机，因为两个页面的移动动画，无法保证同步性；
document.getElementById("move-togger").classList.remove('mui-hidden');
var spans = document.querySelectorAll('.android-only');
for (var i=0,len=spans.length;i<len;i++) {
spans[i].style.display = "none";
}
}
mui.init({
swipeBack: false,
beforeback: back
});
mui.init({
swipeBack: false,
beforeback: back
});
function back() {
if (showMenu) {
//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
closeMenu();
return false;
} else {
//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
menu.close('none');
return true;
}
function back() {
if (showMenu) {
//菜单处于显示状态，返回键应该先关闭菜单,阻止主窗口执行mui.back逻辑；
closeMenu();
return false;
} else {
//菜单处于隐藏状态，执行返回时，要先close菜单页面，然后继续执行mui.back逻辑关闭主窗口；
menu.close('none');
return true;
}
//plusReady事件后，自动创建menu窗口；
mui.plusReady(function() {
main = plus.webview.currentWebview();
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'offcanvas-drag-right-plus-menu',
url: 'offcanvas-drag-right-plus-menu.html',
styles: {
left: 0,
width: '70%',
zindex: 9997
}
});
});
/**
* 显示菜单菜单
*/
function openMenu() {
if (!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来；
//显示完毕后，根据不同动画效果移动窗体；
menu.show('none', 0, function() {
switch (mode){
case 'main-move':
//主窗体开始侧滑；
main.setStyle({
left: '70%',
transition: {
duration: 150
}
});
break;
case 'menu-move':
menu.setStyle({
left: '0%',
transition: {
duration: 150
}
});
break;
case 'all-move':
main.setStyle({
left: '70%',
transition: {
duration: 150
}
});
menu.setStyle({
left: '0%',
transition: {
duration: 150
}
});
break;
}
});
//显示遮罩
mask.show();
showMenu = true;
}
//plusReady事件后，自动创建menu窗口；
mui.plusReady(function() {
main = plus.webview.currentWebview();
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'offcanvas-drag-right-plus-menu',
url: 'offcanvas-drag-right-plus-menu.html',
styles: {
left: 0,
width: '70%',
zindex: 9997
}
}
/**
* 关闭侧滑菜单
*/
function closeMenu () {
_closeMenu();
//关闭遮罩
mask.close();
}
/**
* 关闭侧滑菜单（业务部分）
*/
function _closeMenu() {
if (showMenu) {
//关闭遮罩；
});
});
/**
* 显示菜单菜单
*/
function openMenu() {
if (!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来；
//显示完毕后，根据不同动画效果移动窗体；
menu.show('none', 0, function() {
switch (mode){
case 'main-move':
//主窗体开始侧滑；
main.setStyle({
left: '0',
left: '70%',
transition: {
duration: 150
}
});
break;
case 'menu-move':
//主窗体开始侧滑；
menu.setStyle({
left: '-70%',
left: '0%',
transition: {
duration: 150
}
});
break;
case 'all-move':
//主窗体开始侧滑；
main.setStyle({
left: '0',
left: '70%',
transition: {
duration: 150
}
});
//menu页面同时移动
menu.setStyle({
left: '-70%',
left: '0%',
transition: {
duration: 150
}
});
break;
}
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
menu.hide();
}, 200);
//改变标志位
showMenu = false;
}
});
//显示遮罩
mask.show();
showMenu = true;
}
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
switch (this.value) {
case 'main-move':
//仅主窗口移动的时候，menu页面的zindex值要低一点；
menu.setStyle({left:'0',zindex:9997});
if(mode=='all-move'){
menu.setStyle({
left: '0%'
});
}
/**
* 关闭侧滑菜单
*/
function closeMenu () {
_closeMenu();
//关闭遮罩
mask.close();
}
/**
* 关闭侧滑菜单（业务部分）
*/
function _closeMenu() {
if (showMenu) {
//关闭遮罩；
switch (mode){
case 'main-move':
//主窗体开始侧滑；
main.setStyle({
left: '0',
transition: {
duration: 150
}
mode = 'main-move';
break;
case 'menu-move':
menu.setStyle({left:'-70%',zindex:9999});
if(mode=='all-move'){
menu.setStyle({
left: '0%'
});
});
break;
case 'menu-move':
//主窗体开始侧滑；
menu.setStyle({
left: '-70%',
transition: {
duration: 150
}
mode = 'menu-move';
break;
case 'all-move':
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
});
break;
case 'all-move':
//主窗体开始侧滑；
main.setStyle({
left: '0',
transition: {
duration: 150
}
});
//menu页面同时移动
menu.setStyle({
left: '-70%',
transition: {
duration: 150
}
});
break;
}
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
menu.hide();
}, 200);
//改变标志位
showMenu = false;
}
}
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
switch (this.value) {
case 'main-move':
//仅主窗口移动的时候，menu页面的zindex值要低一点；
menu.setStyle({left:'0',zindex:9997});
if(mode=='all-move'){
menu.setStyle({
left: '-70%'
left: '0%'
});
mode = 'all-move';
break;
}
}
mode = 'main-move';
break;
case 'menu-move':
menu.setStyle({left:'-70%',zindex:9999});
if(mode=='all-move'){
menu.setStyle({
left: '0%'
});
}
mode = 'menu-move';
break;
case 'all-move':
//切换为整体移动
//首先改变移动标志
slideTogether = true;
//变换menu界面初始化位置，整体移动时，Menu界面left需要在-70%的地方；
menu.setStyle({
left: '-70%'
});
mode = 'all-move';
break;
}
});
}
});
//点击左上角图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);
document.getElementById("show-btn").addEventListener('tap',openMenu);
//在android4.4中的swipe事件，需要preventDefault一下，否则触发不正常
//故，在dragleft，dragright中preventDefault
window.addEventListener('dragright', function(e) {
e.detail.gesture.preventDefault();
});
window.addEventListener('dragleft', function(e) {
e.detail.gesture.preventDefault();
});
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；
window.addEventListener("swiperight", openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft", closeMenu);
//menu页面向左滑动，关闭菜单；
window.addEventListener("menu:swipeleft", closeMenu);
//点击左上角图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);
document.getElementById("show-btn").addEventListener('tap',openMenu);
//在android4.4中的swipe事件，需要preventDefault一下，否则触发不正常
//故，在dragleft，dragright中preventDefault
window.addEventListener('dragright', function(e) {
e.detail.gesture.preventDefault();
});
window.addEventListener('dragleft', function(e) {
e.detail.gesture.preventDefault();
});
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作；
window.addEventListener("swiperight", openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft", closeMenu);
//menu页面向左滑动，关闭菜单；
window.addEventListener("menu:swipeleft", closeMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function() {
if (showMenu) {
closeMenu();
} else {
openMenu();
}
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function() {
if (showMenu) {
closeMenu();
} else {
openMenu();
}
</script>
}
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/offcanvas-drag-right-plus-menu.html
View file @ d7337b08
......@@ -86,16 +86,12 @@
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack:false
});
mui.init();
//获得侧滑主窗口webview对象
var main = null;
mui.plusReady(function () {
main = plus.webview.currentWebview().opener();
})
function closeMenu () {
mui.fire(main,"menu:swipeleft");
......
examples/hello-mui/examples/offcanvas-drag-right.html
View file @ d7337b08
......@@ -147,11 +147,8 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
});
mui.init();
//侧滑容器父节点
var offCanvasWrapper = mui('#offCanvasWrapper');
//主界面容器
......
examples/hello-mui/examples/pagination.html
View file @ d7337b08
......@@ -189,11 +189,10 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
mui.init();
</script>
<script>
mui.init({
swipeBack:true //启用右滑关闭功能
});
(function($) {
$('.mui-pagination').on('tap', 'a', function() {
var li = this.parentNode;
......
examples/hello-mui/examples/popovers.html
View file @ d7337b08
......@@ -156,9 +156,10 @@
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
mui('.mui-scroll-wrapper').scroll();
mui('body').on('shown', '.mui-popover', function(e) {
//console.log('shown', e.detail.id);//detail为当前popover元素
......
examples/hello-mui/examples/pullrefresh.html
View file @ d7337b08
......@@ -28,10 +28,8 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
pullRefresh: {
container: '#pullrefresh',
down: {
......
examples/hello-mui/examples/radio.html
View file @ d7337b08
......@@ -67,8 +67,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/range.html
View file @ d7337b08
......@@ -69,9 +69,10 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
//监听input事件，获取range的value值，也可以直接element.value获取该range的值
var rangeList = document.querySelectorAll('input[type="range"]');
for(var i=0,len=rangeList.length;i<len;i++){
......
examples/hello-mui/examples/slider-default.html
View file @ d7337b08
......@@ -10,94 +10,98 @@
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,body {
html,
body {
background-color: #efeff4;
}
header.mui-bar{
header.mui-bar {
display: none;
}
.mui-bar-nav~.mui-content{
.mui-bar-nav~.mui-content {
padding: 0;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图片轮播</h1>
</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 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>
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<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 mui-slider-item-duplicate">
<a href="#">
<img src="../images/shuijiao.jpg">
</a>
</div>
</div>
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<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-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="../images/yuantiao.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<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>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
slider.slider({
interval: 5000
});
} else {
slider.slider({
interval: 0
});
}
mui.init({
swipeBack:true //启用右滑关闭功能
});
var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
slider.slider({
interval: 5000
});
} else {
slider.slider({
interval: 0
});
}
});
</script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-table-default.html
View file @ d7337b08
......@@ -60,8 +60,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-table-pagination.html
View file @ d7337b08
......@@ -76,10 +76,7 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack : false
});
mui.init();
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/slider-with-title.html
View file @ d7337b08
......@@ -87,9 +87,10 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
var slider = mui("#slider");
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
......
examples/hello-mui/examples/switches.html
View file @ d7337b08
......@@ -81,9 +81,10 @@
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
mui('.mui-content .mui-switch').each(function() { //循环所有toggle
//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
this.parentNode.querySelector('span').innerText = '状态：' + (this.classList.contains('mui-active') ? 'true' : 'false');
......
examples/hello-mui/examples/tab-webview-main.html
View file @ d7337b08
......@@ -39,7 +39,6 @@
</a>
</nav>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" charset="utf-8">
//mui初始化
mui.init();
......
examples/hello-mui/examples/tab-webview-subpage-about.html
View file @ d7337b08
......@@ -30,8 +30,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-chat.html
View file @ d7337b08
......@@ -75,10 +75,8 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init({
swipeBack: false,
pullRefresh: {
container: '#pullrefresh',
down: {
......
examples/hello-mui/examples/tab-webview-subpage-contact.html
View file @ d7337b08
......@@ -147,8 +147,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tab-webview-subpage-setting.html
View file @ d7337b08
......@@ -65,9 +65,10 @@
</style>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
document.getElementById("about").addEventListener('tap',function () {
//获得主页面的webview
var main = plus.webview.currentWebview().parent();
......
examples/hello-mui/examples/tab-with-segmented-control.html
View file @ d7337b08
......@@ -178,9 +178,10 @@
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
(function($) {
$('#scroll').scroll({
indicators: true //是否显示滚动条
......
examples/hello-mui/examples/tabbar-labels-only.html
View file @ d7337b08
......@@ -44,8 +44,9 @@
</nav>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar-with-submenus.html
View file @ d7337b08
......@@ -66,11 +66,12 @@
</li>
</ul>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tabbar.html
View file @ d7337b08
......@@ -244,8 +244,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-badges.html
View file @ d7337b08
......@@ -63,8 +63,24 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
window.addEventListener('toggle', function(event) {
if (event.target.id === 'M_Toggle') {
var isActive = event.detail.isActive;
var table = document.querySelector('.mui-table-view');
var card = document.querySelector('.mui-card');
if (isActive) {
card.appendChild(table);
card.style.display = '';
} else {
var content = document.querySelector('.mui-content');
content.insertBefore(table, card);
card.style.display = 'none';
}
}
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-collapses.html
View file @ d7337b08
......@@ -68,8 +68,24 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
window.addEventListener('toggle', function(event) {
if (event.target.id === 'M_Toggle') {
var isActive = event.detail.isActive;
var table = document.querySelector('.mui-table-view');
var card = document.querySelector('.mui-card');
if (isActive) {
card.appendChild(table);
card.style.display = '';
} else {
var content = document.querySelector('.mui-content');
content.insertBefore(table, card);
card.style.display = 'none';
}
}
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/tableviews-with-swipe.html
View file @ d7337b08
......@@ -135,12 +135,8 @@
</ul>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
//禁止右滑关闭
mui.init({
swipeBack: false
});
mui.init();
(function($) {
//$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单
//$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象
......
examples/hello-mui/examples/tableviews.html
View file @ d7337b08
......@@ -79,8 +79,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/examples/template.html
View file @ d7337b08
......@@ -73,7 +73,6 @@
<div class="mui-loader">加载中...</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
//启用双击监听
mui.init({
......@@ -81,6 +80,19 @@
doubletap:true
}
});
var contentWebview = null;
mui.back = function() {
var current = plus.webview.currentWebview();
current.hide('auto');
setTimeout(function() {
document.getElementById("title").className = 'mui-title mui-fadeout';
if(contentWebview==null){
contentWebview = current.children()[0];
}
contentWebview.hide("none");
}, 200);
}
var titleElem = document.getElementById("title")
var menu = document.getElementById("menu")
......@@ -97,7 +109,7 @@
}
menu.style.display = display;
});
var contentWebview = null;
document.getElementById("menu").addEventListener('tap', function(e) {
e.stopPropagation();
if(contentWebview==null){
......
examples/hello-mui/examples/template_pullrefresh.html
View file @ d7337b08
......@@ -66,7 +66,6 @@
<div class="mui-content"></div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
//启用双击监听
mui.init({
......@@ -74,13 +73,24 @@
doubletap:true
}
});
var contentWebview = null;
mui.back = function() {
var current = plus.webview.currentWebview();
current.hide('auto');
setTimeout(function() {
document.getElementById("title").className = 'mui-title mui-fadeout';
if(contentWebview==null){
contentWebview = current.children()[0];
}
contentWebview.hide("none");
}, 200);
}
var titleElem = document.getElementById("title");
window.addEventListener("updateHeader", function(e) {
var title = '下拉刷新和上拉加载更多';
titleElem.innerHTML = title;
titleElem.className = "mui-title mui-fadein";
});
var contentWebview = null;
document.querySelector('header').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
......
examples/hello-mui/examples/typography.html
View file @ d7337b08
......@@ -44,8 +44,9 @@
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
<script>
mui.init();
mui.init({
swipeBack:true //启用右滑关闭功能
});
</script>
</html>
\ No newline at end of file
examples/hello-mui/js/app.js deleted 100644 → 0
View file @ 3512eca7
(function($) {
//全局配置(通常所有页面引用该配置，特殊页面使用mui.init({})来覆盖全局配置)
$.initGlobal({
swipeBack: true
});
var back = $.back;
$.back = function() {
var current = plus.webview.currentWebview();
if (current.mType === 'main') { //模板主页面
current.hide('auto');
setTimeout(function() {
document.getElementById("title").className = 'mui-title mui-fadeout';
current.children()[0].hide("none");
}, 200);
} else if (current.mType === 'sub') {
if ($.targets._popover) {
$($.targets._popover).popover('hide');
} else {
current.parent().evalJS('mui&&mui.back();');
}
} else {
back();
}
}
})(mui);
/**
* toggle
*/
window.addEventListener('toggle', function(event) {
if (event.target.id === 'M_Toggle') {
var isActive = event.detail.isActive;
var table = document.querySelector('.mui-table-view');
var card = document.querySelector('.mui-card');
if (isActive) {
card.appendChild(table);
card.style.display = '';
} else {
var content = document.querySelector('.mui-content');
content.insertBefore(table, card);
card.style.display = 'none';
}
}
});
\ No newline at end of file
examples/hello-mui/list.html
View file @ d7337b08
......@@ -8,8 +8,6 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<style type="text/css">
#list {
/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
......@@ -328,6 +326,7 @@
</li>
</ul>
</div>
<script src="js/mui.min.js"></script>
<script>
//只有ios支持的功能需要在Android平台隐藏；
if (mui.os.android) {
......@@ -340,13 +339,7 @@
}
mui.init({
preloadLimit: 5, //同时并存的预加载窗口数量
swipeBack: false,
keyEventBind: {
backbutton: false
}
});
mui.init();
var templates = {};
var getTemplate = function(name, header, content, loading) {
var template = templates[name];
......
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