Skip to content

Commit 493bac9

Browse files
author
zhangxinxu
committed
make plugin of ppt more powerful and useable
make plugin of ppt more powerful and useable
1 parent e4ecef5 commit 493bac9

File tree

3 files changed

+38
-14
lines changed

3 files changed

+38
-14
lines changed

‎plugins/ppt/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
</head>
1010

1111
<body>
12-
<div id="page1" class="page out">
12+
<div class="page out">
1313
<div class="content section-header">
1414
<h1>mobilebone.js</h1>
1515
<h2>mobile移动web APP单页切换骨架</h2>
1616
</div>
1717
</div>
18-
<div id="page2" class="page out">
18+
<div class="page out">
1919
<div class="content only-header">
2020
<h1>为何需要？</h1>
2121
<ol>
@@ -25,7 +25,7 @@ <h1>为何需要？</h1>
2525
</ol>
2626
</div>
2727
</div>
28-
<div id="page3" class="page out">
28+
<div class="page out">
2929
<div class="content only-header">
3030
<h1>如何使用？</h1>
3131
<pre>&lt;link rel="stylesheet" href="mobilebone.css"></pre>

‎plugins/ppt/mobilebone.ppt.js

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,31 @@ if (window.Mobilebone && Mobilebone.support) {
55
index_page = 0,
66
hash = location.hash.replace("#&", "");
77

8-
if (hash != "" && hash != "#") [].slice.call(pages).forEach(function(page, index) {
9-
if (page.id == hash) {
8+
[].slice.call(pages).forEach(function(page, index) {
9+
if (!page.id) page.id = "page" + (index+1);
10+
11+
if (hash != "" && hash != "#" && page.id == hash) {
1012
index_page = index;
1113
}
1214
});
1315

1416
var prev = function() {
15-
if (index_page > 0) {
17+
if (index_page > 0 && Mobilebone.transition(pages[index_page-1], pages[index_page], true) !== false) {
1618
index_page--;
17-
Mobilebone.transition(pages[index_page], pages[index_page + 1], true);
1819
}
1920
}, next = function() {
20-
if (index_page < length_page - 1) {
21+
if (index_page < length_page - 1 && Mobilebone.transition(pages[index_page + 1], pages[index_page]) !== false) {
2122
index_page++;
22-
Mobilebone.transition(pages[index_page], pages[index_page - 1]);
2323
}
2424
};
2525

26-
document.addEventListener("click", function(event) {
26+
/*document.addEventListener("click", function(event) {
2727
var target = event.target;
2828
if (target.tagName.toLowerCase() == "a" || target.getParentElementByTag("a")) return;
2929
next();
30-
});
30+
});*/
3131

3232
document.addEventListener("keyup", function(event) {
33-
console.log(event.keyCode);
3433
switch (event.keyCode) {
3534
case 38: case 37: {
3635
prev();
@@ -57,5 +56,29 @@ if (window.Mobilebone && Mobilebone.support) {
5756
prev();
5857
}
5958
});
59+
60+
61+
Mobilebone.preventdefault = function(pagein, pageout) {
62+
if (pageout == null) return;
63+
var isBack = Mobilebone.isBack(pagein, pageout);
64+
if (isBack == true) {
65+
var elein = pageout.querySelector(".in");
66+
if (elein) {
67+
elein.style.display = "block";
68+
elein.classList.remove("in");
69+
elein.classList.add("out");
70+
return true;
71+
}
72+
} else {
73+
var eleout = pageout.querySelector(".out");
74+
75+
if (eleout) {
76+
eleout.classList.remove("out");
77+
eleout.classList.add("in");
78+
return true;
79+
}
80+
}
81+
};
82+
6083
})(window, document);
6184
}

‎plugins/ppt/ppt.css

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
.content { width: 1024px; height: 768px; max-height: 100%; max-width: 100%; line-height: 1.5; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; box-sizing: border-box; padding-left: 50px; padding-right: 50px; font-size: 20px; font-family: 'microsoft yahei'; box-shadow: 0 0 10px rgba(0,0,0,.25); overflow: hidden; }
1+
.content { width: 1024px; height: 768px; max-height: 100%; max-width: 100%; line-height: 1.5; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; box-sizing: border-box; padding-left: 50px; padding-right: 50px; font-size: 24px; font-family: 'microsoft yahei'; box-shadow: 0 0 10px rgba(0,0,0,.25); overflow: hidden; }
2+
.content .out { display: none; }
23
.section-header { text-align: center; }
34
.section-header > h1 { position: absolute; top: 50%; left: 0; right: 0; margin: -72px 0 0; font-size: 48px; }
45
.section-header > h2 { position: absolute; top: 50%; left: 0; right: 0; margin: 42px 0 0; font-size: 28px; color: #666; }
56

67
.only-header > h1 { font-size: 36px; margin: 1em 0; }
7-
.only-header > pre { background-color: #eee; font-family: "Lucida Console", Monaco, monospace; padding: .5em; white-space: pre-wrap; word-wrap: break-word; }
8+
.only-header pre { background-color: #eee; font-family: "Lucida Console", Monaco, monospace; padding: .5em; white-space: pre-wrap; word-wrap: break-word; }

0 commit comments

Comments
 (0)