Skip to content

Commit 1b54f8d

Browse files
author
zhangxinxu
committed
Let the plugin is more practical
Let the plugin is more practical
1 parent 3323c64 commit 1b54f8d

File tree

2 files changed

+78
-14
lines changed

2 files changed

+78
-14
lines changed

‎plugins/ppt/index.html

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,38 @@
66
<title>屁屁踢在线幻灯片插件演示</title>
77
<link rel="stylesheet" href="../../src/mobilebone.css">
88
<link rel="stylesheet" href="ppt.css">
9+
<style>
10+
@-webkit-keyframes fadein {
11+
from { opacity: 0; }
12+
to { opacity: 1; }
13+
}
14+
@keyframes fadein {
15+
from { opacity: 0; }
16+
to { opacity: 1; }
17+
}
18+
@-webkit-keyframes fadeout {
19+
from { opacity: 1; }
20+
to { opacity: 0; }
21+
}
22+
@keyframes fadeout {
23+
from { opacity: 1; }
24+
to { opacity: 0; }
25+
}
26+
.fade.out {
27+
opacity: 0;
28+
-webkit-animation-duration: 125ms;
29+
-webkit-animation-name: fadeout;
30+
animation-duration: 125ms;
31+
animation-name: fadeout;
32+
}
33+
.fade.in {
34+
opacity: 1;
35+
-webkit-animation-duration: 225ms;
36+
-webkit-animation-name: fadein;
37+
animation-duration: 225ms;
38+
animation-name: fadein;
39+
}
40+
</style>
941
</head>
1042

1143
<body>
@@ -19,18 +51,18 @@ <h2>mobile移动web APP单页切换骨架</h2>
1951
<div class="content only-header">
2052
<h1>为何需要？</h1>
2153
<ol>
22-
<li>Phonegap等类似跨移动开发平台，其静态页面都是index.html, 单页面，因此，需要跟原生一样的过场体验。</li>
23-
<li>Hybird app开发，原生APP内嵌web APP, 为了两者体验一致，不至于交互太唐突，也需要无刷新过场效果。</li>
24-
<li>就算是纯粹的移动web APP, 使用无刷新模式也不失为一种不错的选型策略。</li>
54+
<li class="fade out">Phonegap等类似跨移动开发平台，其静态页面都是index.html, 单页面，因此，需要跟原生一样的过场体验。</li>
55+
<li class="fade out">Hybird app开发，原生APP内嵌web APP, 为了两者体验一致，不至于交互太唐突，也需要无刷新过场效果。</li>
56+
<li class="fade out">就算是纯粹的移动web APP, 使用无刷新模式也不失为一种不错的选型策略。</li>
2557
</ol>
2658
</div>
2759
</div>
2860
<div class="page out">
2961
<div class="content only-header">
3062
<h1>如何使用？</h1>
31-
<pre>&lt;link rel="stylesheet" href="mobilebone.css"></pre>
32-
<pre>&lt;script src="mobilebone.js">&lt;/script></pre>
33-
<pre>body
63+
<pre class="fade out">&lt;link rel="stylesheet" href="mobilebone.css"></pre>
64+
<pre class="fade out">&lt;script src="mobilebone.js">&lt;/script></pre>
65+
<pre class="fade out">body
3466
page
3567
page
3668
page</pre>

‎plugins/ppt/mobilebone.ppt.js

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1+
/*
2+
* by zhangxinxu(.com) 2014-10-29
3+
* https://github.com/zhangxinxu/mobilebone
4+
* plugin for slide show
5+
*/
16
if (window.Mobilebone && Mobilebone.support) {
27
(function(window, document, undefined) {
38
var pages = document.querySelectorAll("." + Mobilebone.classPage),
49
length_page = pages.length;
510
index_page = 0,
611
hash = location.hash.replace("#&", "");
7-
12+
13+
// add pageid if don't exist
14+
// and get the index of those pages
815
[].slice.call(pages).forEach(function(page, index) {
916
if (!page.id) page.id = "page" + (index+1);
1017

@@ -13,14 +20,37 @@ if (window.Mobilebone && Mobilebone.support) {
1320
}
1421
});
1522

23+
// get prev slide-page
1624
var prev = function() {
17-
if (index_page > 0 && Mobilebone.transition(pages[index_page-1], pages[index_page], true) !== false) {
25+
var pageout = pages[index_page] || null, pagein = pages[index_page-1] || null;
26+
if (index_page > 0 && Mobilebone.transition(pagein, pageout, true) !== false) {
27+
// if there are no preventDefault, add page index
1828
index_page--;
29+
} else if (index_page == 0) {
30+
// first page, can't trigger inner animation by 'Mobilebone.preventdefault'
31+
// so we need excute code as below
32+
var eleins = pageout.querySelectorAll(".in");
33+
if (elein = eleins[eleins.length - 1]) {
34+
elein.style.display = elein.getAttribute("data-display") || "block";
35+
elein.classList.remove("in");
36+
elein.classList.add("out");
37+
}
1938
}
20-
}, next = function() {
21-
if (index_page < length_page - 1 && Mobilebone.transition(pages[index_page + 1], pages[index_page]) !== false) {
39+
}
40+
// get next slide-page
41+
, next = function() {
42+
var pageout = pages[index_page] || null, pagein = pages[index_page+1] || null;
43+
if (index_page < length_page - 1 && Mobilebone.transition(pagein, pageout) !== false) {
2244
index_page++;
23-
}
45+
} else if (index_page == length_page - 1) {
46+
// last page, can't trigger inner animation by 'Mobilebone.preventdefault'
47+
// so we need excute code as below
48+
var eleout = pageout.querySelector(".out");
49+
if (eleout) {
50+
eleout.classList.remove("out");
51+
eleout.classList.add("in");
52+
}
53+
}
2454
};
2555

2656
/*document.addEventListener("click", function(event) {
@@ -60,11 +90,13 @@ if (window.Mobilebone && Mobilebone.support) {
6090

6191
Mobilebone.preventdefault = function(pagein, pageout) {
6292
if (pageout == null) return;
93+
6394
var isBack = Mobilebone.isBack(pagein, pageout);
95+
6496
if (isBack == true) {
65-
var elein = pageout.querySelector(".in");
66-
if (elein) {
67-
elein.style.display = "block";
97+
var eleins = pageout.querySelectorAll(".in");
98+
if (elein = eleins[eleins.length - 1]) {
99+
elein.style.display = elein.getAttribute("data-display") || "block";
68100
elein.classList.remove("in");
69101
elein.classList.add("out");
70102
return true;

0 commit comments

Comments
 (0)