Skip to content

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

将hello mui中的页面切换动画变为pop-in

parent ce605c4f
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 152 deletions
dist/js/mui.js
View file @ cf45373d
......@@ -2084,13 +2084,19 @@ var mui = (function(document, undefined) {
}
}
};
var __back = function() {
$.back();
};
var __menu = function() {
$.menu();
};
//默认监听
$.plusReady(function() {
if ($.options.keyEventBind.backbutton) {
plus.key.addEventListener('backbutton', $.back, false);
plus.key.addEventListener('backbutton', __back, false);
}
if ($.options.keyEventBind.menubutton) {
plus.key.addEventListener('menubutton', $.menu, false);
plus.key.addEventListener('menubutton', __menu, false);
}
});
//处理按键监听事件
......@@ -2101,10 +2107,10 @@ var mui = (function(document, undefined) {
$.plusReady(function() {
//如果不为true，则移除默认监听
if (!$.options.keyEventBind.backbutton) {
plus.key.removeEventListener('backbutton', $.back);
plus.key.removeEventListener('backbutton', __back);
}
if (!$.options.keyEventBind.menubutton) {
plus.key.removeEventListener('menubutton', $.menu);
plus.key.removeEventListener('menubutton', __menu);
}
});
}
......
dist/js/mui.min.js
View file @ cf45373d
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/info.html
View file @ cf45373d
......@@ -11,7 +11,7 @@
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
<style>
p {
text-indent: 22px;
......
examples/hello-mui/examples/offcanvas-drag-left.html
View file @ cf45373d
......@@ -162,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";
}
}
......@@ -197,15 +197,17 @@
break;
}
offCanvasWrapper.offCanvas().refresh();
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
}
});
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.html
View file @ cf45373d
......@@ -102,7 +102,7 @@
<header class="mui-bar mui-bar-nav">
<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
<h1 class="mui-title">右滑导航</h1>
<h1 class="mui-title">div模式右滑菜单</h1>
</header>
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
......@@ -194,6 +194,8 @@
break;
}
offCanvasWrapper.offCanvas().refresh();
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
}
});
......
examples/hello-mui/examples/template_pullrefresh.html → examples/hello-mui/examples/pullrefresh_main.html
View file @ cf45373d
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
......@@ -9,53 +8,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
.mui-fadein {
/*-webkit-animation: fadein 0.1s;
animation: fadein 0.1s;*/
opacity: 1;
}
.mui-fadeout {
opacity: 0;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
</head>
<body>
......@@ -71,26 +23,18 @@
mui.init({
gestureConfig:{
doubletap:true
}
},
subpages:[{
url:'pullrefresh_sub.html',
id:'pullrefresh_sub.html',
styles:{
top: '45px',
bottom: '0px',
}
}]
});
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";
});
document.querySelector('header').addEventListener('doubletap',function () {
if(contentWebview==null){
contentWebview = plus.webview.currentWebview().children()[0];
......
examples/hello-mui/examples/pullrefresh.html → examples/hello-mui/examples/pullrefresh_sub.html
View file @ cf45373d
......@@ -9,12 +9,6 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
</style>
</head>
<body>
......
examples/hello-mui/examples/setting.html
View file @ cf45373d
......@@ -498,13 +498,12 @@
if(mui.os.ios){
location.href = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?id=682211190&pageNumber=0&sortOrdering=2&type=&mt=8';
}else if(mui.os.android){
plus.runtime.openURL( "market://details?id=io.dcloud.HelloMUI", function(e){
plus.runtime.openURL( "market://details?id=io.dcloud.HelloMUI", function(e){
mui.alert("360手机助手和应用宝，你一个都没装，暂时无法评分，感谢支持");
plus.runtime.openURL( "market://details?id=io.dcloud.HelloMUI", function(e){
mui.alert("360手机助手和应用宝，你一个都没装，暂时无法评分，感谢支持");
}, "com.qihoo.appstore" );
}, "com.tencent.android.qqdownloader" );
}, "com.qihoo.appstore" );
}
}
});
//客服电话
......
examples/hello-mui/examples/tab-webview-subpage-contact.html
View file @ cf45373d
......@@ -61,11 +61,11 @@
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">叶文浩</h4>
<h4 class="oa-contact-name">叶文洁</h4>
<span class="oa-contact-position mui-h6">董事长</span>
</div>
<p class="oa-contact-email mui-h6">
yewenhao@sina.com
yewenjie@sina.com
</p>
</div>
</div>
......
examples/hello-mui/examples/tabbar.html
View file @ cf45373d
......@@ -118,11 +118,11 @@
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">叶文浩</h4>
<h4 class="oa-contact-name">叶文洁</h4>
<span class="oa-contact-position mui-h6">董事长</span>
</div>
<p class="oa-contact-email mui-h6">
yewenhao@sina.com
yewenjie@sina.com
</p>
</div>
</div>
......
examples/hello-mui/examples/template.html
View file @ cf45373d
......@@ -99,6 +99,8 @@
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";
......@@ -108,6 +110,20 @@
mui.options.keyEventBind.menubutton = false;
}
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 @ cf45373d
......@@ -44,7 +44,7 @@
<div class="title" style="margin-bottom: 25px;">mui典型控件</div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="color: #ddd;">
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pullrefresh.html">
<a class="mui-navigate-right" open-type="common" href="examples/pullrefresh_main.html">
下拉刷新
</a>
</li>
......@@ -72,12 +72,14 @@
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
var aniShow = "slide-in-right";
//关于backbutton和menubutton两个按键的说明，在iOS平台不存在，故需隐藏
if(!mui.os.android){
var span = document.getElementById("android-only")
if(span){
span.style.display = "none";
}
aniShow = "pop-in";
}
var subWebview=null,template=null,index=null;
mui.plusReady(function () {
......@@ -88,7 +90,7 @@
var id = this.getAttribute("href");
var type = this.getAttribute("open-type");
var href = this.href;
if(type=="common"){
if(type=="common"||mui.os.ios){
var webview_style = {
popGesture: "close"
};
......@@ -97,7 +99,7 @@
url: href,
styles: webview_style,
show: {
aniShow: 'pop-in'
aniShow: aniShow
},
waiting: {
autoShow: false
......@@ -105,41 +107,11 @@
});
}else{
var title = this.innerText;
if(~href.indexOf('pullrefresh')){
var template = plus.webview.getWebviewById("pullrefresh-main");
subWebview = template.children()[0];
mui.fire(template,'updateHeader',{title:title,showMenu:false});
subWebview.show();
template.show('slide-in-right', 150);
}else{
if(mui.os.ios){
mui.openWindow({
id: id,
url: href,
styles: webview_style,
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
}else{
template = plus.webview.getWebviewById("default-main");
//获得共用子webview
subWebview = template.children()[0];
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(template,'updateHeader',{title:title,showMenu:false});
if (subWebview.getURL() != href) {
subWebview.loadURL(href);
} else {
subWebview.show();
}
template.show('slide-in-right', 150);
}
if(!template){
template = plus.webview.getWebviewById("default-main");
}
//通知模板修改标题，并显示隐藏右上角图标；
mui.fire(template,'updateHeader',{title:title,showMenu:false,target:href,aniShow:aniShow});
}
});
......
examples/hello-mui/index.html
View file @ cf45373d
......@@ -138,52 +138,21 @@
var subWebview = null,
template = null;
document.getElementById('info').addEventListener('tap', function() {
if(mui.os.ios){
mui.openWindow({
id: 'about',
url: 'examples/info.html',
styles: {
popGesture: "close"
},
show: {
aniShow: 'slide-in-right'
},
waiting: {
autoShow: false
}
});
}else{
if (subWebview == null) {
//获取共用父窗体
template = plus.webview.getWebviewById("default-main");
}
if(template){
subWebview = template.children()[0];
var reload = true;
if (subWebview.getURL() != 'examples/info.html') {
subWebview.loadURL("examples/info.html");
} else {
reload = false;
}
(!reload) && subWebview.show();
// subWebview.loadURL('examples/info.html');
if(reload){
//修改共用父模板的标题
mui.fire(template, 'updateHeader', {
title: '关于',
showMenu: false
});
}else{
console.log("show direct");
subWebview.show("none");
}
template.show('zoom-fade-out', 150);
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
}
}
});
});
//首页返回键处理
......
examples/hello-mui/js/mui.js
View file @ cf45373d
......@@ -2084,13 +2084,19 @@ var mui = (function(document, undefined) {
}
}
};
var __back = function() {
$.back();
};
var __menu = function() {
$.menu();
};
//默认监听
$.plusReady(function() {
if ($.options.keyEventBind.backbutton) {
plus.key.addEventListener('backbutton', $.back, false);
plus.key.addEventListener('backbutton', __back, false);
}
if ($.options.keyEventBind.menubutton) {
plus.key.addEventListener('menubutton', $.menu, false);
plus.key.addEventListener('menubutton', __menu, false);
}
});
//处理按键监听事件
......@@ -2101,10 +2107,10 @@ var mui = (function(document, undefined) {
$.plusReady(function() {
//如果不为true，则移除默认监听
if (!$.options.keyEventBind.backbutton) {
plus.key.removeEventListener('backbutton', $.back);
plus.key.removeEventListener('backbutton', __back);
}
if (!$.options.keyEventBind.menubutton) {
plus.key.removeEventListener('menubutton', $.menu);
plus.key.removeEventListener('menubutton', __menu);
}
});
}
......
examples/hello-mui/js/mui.min.js
View file @ cf45373d
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/list.html
View file @ cf45373d
......@@ -250,7 +250,7 @@
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/pullrefresh.html">
<a class="mui-navigate-right" open-type="common" href="examples/pullrefresh_main.html">
pull to refresh（下拉刷新和上拉加载更多）
</a>
</li>
......@@ -356,17 +356,22 @@
}
}
//Android平台暂时使用slide-in-right动画
// aniShow = "slide-in-right"
//aniShow = "slide-in-right"
}
//初始化，并预加载webview模式的选项卡
mui.init({
preloadPages: [{
url: 'examples/tab-webview-main.html',
id: 'examples/tab-webview-main.html'
url: 'examples/tab-webview-main.html'
},
{
url:"examples/pullrefresh_main.html",
styles:{
popGesture:'hide'
}
}]
});
var templates = {};
var getTemplate = function(name, header, content, loading) {
var getTemplate = function(name, header, content) {
var template = templates[name];
if (!template) {
//预加载共用父模板；
......@@ -395,7 +400,7 @@
subWebview.addEventListener('loaded', function() {
setTimeout(function() {
subWebview.show();
}, 50);
}, 10);
});
subWebview.hide();
headerWebview.append(subWebview);
......@@ -409,13 +414,11 @@
name: name,
header: headerWebview,
content: subWebview,
loaded: loading
};
}
return template;
};
var initTemplates = function() {
getTemplate('pullrefresh', 'examples/template_pullrefresh.html', 'examples/pullrefresh.html', true);
getTemplate('default', 'examples/template.html');
};
mui.plusReady(function() {
......@@ -451,7 +454,7 @@
}
});
} else if (id && ~id.indexOf('.html')) {
if (!~id.indexOf('popovers.html') && !~href.indexOf('pullrefresh.html') && mui.os.ios) {
if (!~id.indexOf('popovers.html') && mui.os.ios) {
mui.openWindow({
id: id,
url: this.href,
......@@ -466,42 +469,31 @@
}
});
} else {
//TODO by chb 当初这么设计，是为了一个App中有多个模板，目前仅有一个模板的情况下，实际上无需这么复杂
//使用父子模板方案打开的页面
//获得共用模板组
var template = ~href.indexOf('pullrefresh.html') ? getTemplate('pullrefresh') : getTemplate('default');
var template = getTemplate('default');
//判断是否显示右上角menu图标；
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
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('slide-in-right', 150);
}
}
});
var index = null; //主页面
function openMenu() {
!index && (index = mui.currentWebview.parent());
mui.fire(index, "menu:open");
}
//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
!index && (index = mui.currentWebview.parent());
mui.fire(index, "menu:open");
}
//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
window.addEventListener('dragstart', function(e) {
mui.gestures.touch.lockDirection = true; //锁定方向
mui.gestures.touch.startDirection = e.detail.direction;
......
js/mui.back.5+.js
View file @ cf45373d
......@@ -80,13 +80,19 @@
}
}
};
var __back = function() {
$.back();
};
var __menu = function() {
$.menu();
};
//默认监听
$.plusReady(function() {
if ($.options.keyEventBind.backbutton) {
plus.key.addEventListener('backbutton', $.back, false);
plus.key.addEventListener('backbutton', __back, false);
}
if ($.options.keyEventBind.menubutton) {
plus.key.addEventListener('menubutton', $.menu, false);
plus.key.addEventListener('menubutton', __menu, false);
}
});
//处理按键监听事件
......@@ -97,10 +103,10 @@
$.plusReady(function() {
//如果不为true，则移除默认监听
if (!$.options.keyEventBind.backbutton) {
plus.key.removeEventListener('backbutton', $.back);
plus.key.removeEventListener('backbutton', __back);
}
if (!$.options.keyEventBind.menubutton) {
plus.key.removeEventListener('menubutton', $.menu);
plus.key.removeEventListener('menubutton', __menu);
}
});
}
......
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