Skip to content

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

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

parent cf45373d
Hide 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 @@
</style>
</head>
<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>
<h1 class="mui-title">关于</h1>
</header>
</header> -->
<div class="mui-content">
<div class="mui-content-padded">
<h4 style="margin-top:10px;">mui</h4>
......
examples/hello-mui/examples/listpicker.html
View file @ 004c5e33
......@@ -24,17 +24,6 @@
padding: 20px 10px;
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 {
font-size: 16px;
padding: 8px;
......@@ -43,16 +32,6 @@
/*用户列表示例*/
.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{
......@@ -95,35 +74,7 @@
/**级联示例样式**/
.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 {
width: 50%;
height: 100%;
......@@ -219,9 +170,9 @@
currentPanel = userPickerPanel;
userPickerPanel.style.webkitTransform = 'translateY(0px)';
};
// function hideUserPanel() {
// userPickerPanel.style.webkitTransform = 'translateY(280px)';
// mask.style.display = 'none';
// function hideUserPanel() {
// userPickerPanel.style.webkitTransform = 'translateY(280px)';
// mask.style.display = 'none';
// }
//关闭弹出的选择面板
function _hidePickerPanel () {
......@@ -280,8 +231,8 @@
// mask.style.display = 'none';
// };
//TODO chb
// mask.addEventListener('tap', function() {
// hideCityPanel();
// mask.addEventListener('tap', function() {
// hideCityPanel();
// }, false);
showCityPickerBtn.addEventListener('tap', showCityPanel, false);
cityCancelBtn.addEventListener('tap', hidePickerPanel, false);
......
examples/hello-mui/examples/tab-with-viewpagerindicator.html
View file @ 004c5e33
......@@ -25,10 +25,10 @@
margin-top: 50px;
}
</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>
<h1 class="mui-title">可拖动式选项卡</h1>
</header>
</header> -->
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
......
examples/hello-mui/examples/template.html
View file @ 004c5e33
......@@ -80,17 +80,17 @@
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 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")
......@@ -99,8 +99,6 @@
window.addEventListener("updateHeader", function(e) {
var title = e.detail.title;
var showMenu = e.detail.showMenu;
var href = e.detail.target;
var aniShow = e.detail.aniShow;
titleElem.innerHTML = title;
titleElem.className = "mui-title mui-fadein";
var display = showMenu ? "" : "none";
......@@ -111,19 +109,6 @@
}
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) {
......
examples/hello-mui/index-menu.html
View file @ 004c5e33
......@@ -90,7 +90,7 @@
var id = this.getAttribute("href");
var type = this.getAttribute("open-type");
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 = {
popGesture: "close"
};
......@@ -106,12 +106,20 @@
}
});
}else{
var href = this.href;
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 @@
var subWebview = null,
template = null;
document.getElementById('info').addEventListener('tap', function() {
var aniShow = mui.os.ios?"slide-in-right":"zoom-fade-out";
mui.openWindow({
id: 'about',
url: 'examples/info.html',
styles: {
popGesture: "close"
},
show: {
aniShow: aniShow,
duration:200
},
waiting: {
autoShow: false
}
});
if (subWebview == null) {
//获取共用父窗体
template = plus.webview.getWebviewById("default-main");
}
if(template){
subWebview = template.children()[0];
subWebview.loadURL('examples/info.html');
//修改共用父模板的标题
mui.fire(template, 'updateHeader', {
title: '关于',
showMenu: false
});
template.show('slide-in-right', 150);
}
});
//首页返回键处理
......
examples/hello-mui/list.html
View file @ 004c5e33
......@@ -356,7 +356,7 @@
}
}
//Android平台暂时使用slide-in-right动画
//aniShow = "slide-in-right"
aniShow = "slide-in-right"
}
//初始化，并预加载webview模式的选项卡
mui.init({
......@@ -400,7 +400,7 @@
subWebview.addEventListener('loaded', function() {
setTimeout(function() {
subWebview.show();
}, 10);
}, 50);
});
subWebview.hide();
headerWebview.append(subWebview);
......@@ -454,7 +454,7 @@
}
});
} 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({
id: id,
url: this.href,
......@@ -477,14 +477,28 @@
var showMenu = ~href.indexOf('popovers.html') ? true : false;
//获得共用父模板
var headerWebview = template.header;
//获得共用子webview
var contentWebview = template.content;
var title = this.innerText.trim();
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(headerWebview, 'updateHeader', {
title: title,
showMenu: showMenu,
target:href,
aniShow: aniShow
showMenu: showMenu
});
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