Skip to content

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

hello mui动画修改为slide-in-right

parent cf45373d
Show whitespace changes
Inline Side-by-side
Showing with 67 additions and 110 deletions
examples/hello-mui/examples/info.html
View file @ 004c5e33
...@@ -26,10 +26,10 @@ ...@@ -26,10 +26,10 @@
</style> </style>
</head> </head>
<body> <body>
<header class="mui-bar mui-bar-nav"> <!-- <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">关于</h1> <h1 class="mui-title">关于</h1>
</header> </header> -->
<div class="mui-content"> <div class="mui-content">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h4 style="margin-top:10px;">mui</h4> <h4 style="margin-top:10px;">mui</h4>
......
examples/hello-mui/examples/listpicker.html
View file @ 004c5e33
...@@ -24,17 +24,6 @@ ...@@ -24,17 +24,6 @@
padding: 20px 10px; padding: 20px 10px;
font-size: 16px; font-size: 16px;
} }
/*.ui-mask {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999998;
background-color: rgba(0, 0, 0, 0.15);
display: none;
-webkit-transition: .3s;
}*/
.mui-btn { .mui-btn {
font-size: 16px; font-size: 16px;
padding: 8px; padding: 8px;
...@@ -43,16 +32,6 @@ ...@@ -43,16 +32,6 @@
/*用户列表示例*/ /*用户列表示例*/
.user-panel { .user-panel {
/*position: fixed;
left: 0px;
width: 100%;
z-index: 999999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
bottom: 0px;
-webkit-transform: translateY(280px);*/
} }
.mui-picker-panel{ .mui-picker-panel{
...@@ -95,35 +74,7 @@ ...@@ -95,35 +74,7 @@
/**级联示例样式**/ /**级联示例样式**/
.city-panel { .city-panel {
/*position: fixed;
left: 0px;
width: 100%;
z-index: 999999;
background-color: #eee;
border-top: solid 1px #ccc;
box-shadow: 0px -5px 7px 0px rgba(0, 0, 0, 0.1);
-webkit-transition: .3s;
bottom: 0px;
-webkit-transform: translateY(280px);*/
} }
/*.city-panel .city-panel-header {
padding: 6px;
font-size: 14px;
color: #888;
}
.mui-panel-header button {
font-size: 12px;
padding: 5px 10px;
}
.city-panel-header button:last-child {
float: right;
}
.city-panel .city-panel-body {
position: relative;
width: 100%;
height: 200px;
border-top: solid 1px #ddd;
}*/
.city-panel .mui-listpicker { .city-panel .mui-listpicker {
width: 50%; width: 50%;
height: 100%; height: 100%;
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ 004c5e33
...@@ -25,10 +25,10 @@ ...@@ -25,10 +25,10 @@
margin-top: 50px; margin-top: 50px;
} }
</style> </style>
<header class="mui-bar mui-bar-nav"> <!-- <header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">可拖动式选项卡</h1> <h1 class="mui-title">可拖动式选项卡</h1>
</header> </header> -->
<div class="mui-content"> <div class="mui-content">
<div id="slider" class="mui-slider"> <div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
......
examples/hello-mui/examples/template.html
View file @ 004c5e33
...@@ -99,8 +99,6 @@ ...@@ -99,8 +99,6 @@
window.addEventListener("updateHeader", function(e) { window.addEventListener("updateHeader", function(e) {
var title = e.detail.title; var title = e.detail.title;
var showMenu = e.detail.showMenu; var showMenu = e.detail.showMenu;
var href = e.detail.target;
var aniShow = e.detail.aniShow;
titleElem.innerHTML = title; titleElem.innerHTML = title;
titleElem.className = "mui-title mui-fadein"; titleElem.className = "mui-title mui-fadein";
var display = showMenu ? "" : "none"; var display = showMenu ? "" : "none";
...@@ -111,19 +109,6 @@ ...@@ -111,19 +109,6 @@
} }
menu.style.display = display; menu.style.display = display;
var template = plus.webview.getWebviewById("default-main");
//获得共用子webview
var subWebview = template.children()[0];
var reload = true;
if (subWebview.getURL() != href) {
subWebview.loadURL(href);
} else {
subWebview.show();
}
setTimeout(function () {
template.show(aniShow);
},10);
}); });
document.getElementById("menu").addEventListener('tap', function(e) { document.getElementById("menu").addEventListener('tap', function(e) {
......
examples/hello-mui/index-menu.html
View file @ 004c5e33
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
var id = this.getAttribute("href"); var id = this.getAttribute("href");
var type = this.getAttribute("open-type"); var type = this.getAttribute("open-type");
var href = this.href; var href = this.href;
if(type=="common"||mui.os.ios){ if(type=="common"||(mui.os.ios&&!~id.indexOf('tab-with-viewpagerindicator.html')) ){
var webview_style = { var webview_style = {
popGesture: "close" popGesture: "close"
}; };
...@@ -106,12 +106,20 @@ ...@@ -106,12 +106,20 @@
} }
}); });
}else{ }else{
var href = this.href;
var title = this.innerText; var title = this.innerText;
if(!template){
template = plus.webview.getWebviewById("default-main"); template = plus.webview.getWebviewById("default-main");
} //获得共用子webview
subWebview = template.children()[0];
//通知模板修改标题，并显示隐藏右上角图标； //通知模板修改标题，并显示隐藏右上角图标；
mui.fire(template,'updateHeader',{title:title,showMenu:false,target:href,aniShow:aniShow}); mui.fire(template,'updateHeader',{title:title,showMenu:false});
if (subWebview.getURL() != href) {
subWebview.loadURL(href);
} else {
subWebview.show();
}
template.show('slide-in-right', 150);
} }
}); });
......
examples/hello-mui/index.html
View file @ 004c5e33
...@@ -138,21 +138,20 @@ ...@@ -138,21 +138,20 @@
var subWebview = null, var subWebview = null,
template = null; template = null;
document.getElementById('info').addEventListener('tap', function() { document.getElementById('info').addEventListener('tap', function() {
var aniShow = mui.os.ios?"slide-in-right":"zoom-fade-out"; if (subWebview == null) {
mui.openWindow({ //获取共用父窗体
id: 'about', template = plus.webview.getWebviewById("default-main");
url: 'examples/info.html', }
styles: { if(template){
popGesture: "close" subWebview = template.children()[0];
}, subWebview.loadURL('examples/info.html');
show: { //修改共用父模板的标题
aniShow: aniShow, mui.fire(template, 'updateHeader', {
duration:200 title: '关于',
}, showMenu: false
waiting: {
autoShow: false
}
}); });
template.show('slide-in-right', 150);
}
}); });
//首页返回键处理 //首页返回键处理
......
examples/hello-mui/list.html
View file @ 004c5e33
...@@ -356,7 +356,7 @@ ...@@ -356,7 +356,7 @@
} }
} }
//Android平台暂时使用slide-in-right动画 //Android平台暂时使用slide-in-right动画
//aniShow = "slide-in-right" aniShow = "slide-in-right"
} }
//初始化，并预加载webview模式的选项卡 //初始化，并预加载webview模式的选项卡
mui.init({ mui.init({
...@@ -400,7 +400,7 @@ ...@@ -400,7 +400,7 @@
subWebview.addEventListener('loaded', function() { subWebview.addEventListener('loaded', function() {
setTimeout(function() { setTimeout(function() {
subWebview.show(); subWebview.show();
}, 10); }, 50);
}); });
subWebview.hide(); subWebview.hide();
headerWebview.append(subWebview); headerWebview.append(subWebview);
...@@ -454,7 +454,7 @@ ...@@ -454,7 +454,7 @@
} }
}); });
} else if (id && ~id.indexOf('.html')) { } else if (id && ~id.indexOf('.html')) {
if (!~id.indexOf('popovers.html') && mui.os.ios) { if (!~id.indexOf('popovers.html')&&!~id.indexOf('tab-with-viewpagerindicator.html') && mui.os.ios) {
mui.openWindow({ mui.openWindow({
id: id, id: id,
url: this.href, url: this.href,
...@@ -477,14 +477,28 @@ ...@@ -477,14 +477,28 @@
var showMenu = ~href.indexOf('popovers.html') ? true : false; var showMenu = ~href.indexOf('popovers.html') ? true : false;
//获得共用父模板 //获得共用父模板
var headerWebview = template.header; var headerWebview = template.header;
//获得共用子webview
var contentWebview = template.content;
var title = this.innerText.trim(); var title = this.innerText.trim();
//通知模板修改标题，并显示隐藏右上角图标； //通知模板修改标题，并显示隐藏右上角图标；
mui.fire(headerWebview, 'updateHeader', { mui.fire(headerWebview, 'updateHeader', {
title: title, title: title,
showMenu: showMenu, showMenu: showMenu
target:href,
aniShow: aniShow
}); });
var reload = true;
if (!template.loaded) {
if (contentWebview.getURL() != this.href) {
contentWebview.loadURL(this.href);
} else {
reload = false;
}
} else {
reload = false;
}
(!reload) && contentWebview.show();
headerWebview.show(aniShow, 150);
} }
} }
}); });
......
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