Skip to content

Commit f5e5361

Browse files
zhangxinxuzhangxinxu
committed
Merge pull request #52 from zhangxinxu/develop
Develop
2 parents d444e8e + dbea183 commit f5e5361

File tree

7 files changed

+221
-36
lines changed

7 files changed

+221
-36
lines changed

‎ReadMe.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ use <code>npm</code>:
99

1010
Examples and Tests and Documents
1111
------------------
12-
<ul>
12+
<ol>
1313
<li>Example1: http://iancj.github.io/qq/</li>
1414
<li>Example2: http://baozoumanhua.com/mobile_makers/</li>
15-
</ul>
15+
</ol>
1616

1717
<ul>
1818
<li>Test page: <a href="http://rawgit.com/zhangxinxu/mobilebone/develop/test/index.html">test/index.html</a></li>
@@ -50,6 +50,12 @@ Of course, you can control the direction of switching, or use a ajax get, or as
5050

5151
For more detail, you can [visit here](http://www.zhangxinxu.com/wordpress/?p=4381).
5252

53+
Plugins
54+
----------------
55+
<ol>
56+
<li><strong>mobilebone.ppt.js</strong>: make web page to powerpoint presentation. <a href="http://rawgit.com/zhangxinxu/mobilebone/develop/plugins/ppt/index.html">docs/index.html</a>demo here</a>.</li>
57+
</ol>
58+
5359
Advantage?
5460
--------------
5561
what mobilebone.js do just one thing - switching. So, it's small, flexible, and no any UI restriction. In a word, it's fit for variety of designs and scenes.
@@ -108,6 +114,12 @@ Mobilebone会自动捕获页面上的a元素，如果其href值存在猫腻，
108114

109115
更多信息请[参考这里](http://www.zhangxinxu.com/wordpress/?p=4381).
110116

117+
插件
118+
----------------
119+
<ol>
120+
<li><strong>mobilebone.ppt.js</strong>: 可以让web页面表现如幻灯片演示，尺寸自适应。 <a href="http://rawgit.com/zhangxinxu/mobilebone/develop/plugins/ppt/index.html">docs/index.html</a>demo点击这里</a>。</li>
121+
</ol>
122+
111123
优势？
112124
------------------
113125
mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后3~4K, 而且很灵活，几乎没有任何UI的限制，适用于各个项目各个场景。

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mobilebone",
3-
"version": "2.2.2",
3+
"version": "2.2.1",
44
"description": "Bone main for mobile web APP with a sigle page mode.",
55
"main": "src/mobilebone.js",
66
"directories": {

‎plugins/ppt/index.html

Lines changed: 100 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,132 @@
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>
12-
<div id="page1" class="page out">
44+
<div class="page out">
1345
<div class="content section-header">
1446
<h1>mobilebone.js</h1>
1547
<h2>mobile移动web APP单页切换骨架</h2>
1648
</div>
1749
</div>
18-
<div id="page2" class="page out">
50+
<div class="page out">
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>
28-
<div id="page3" class="page out">
60+
<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>
3769
</div>
3870
</div>
39-
<div id="page4" class="page out">
71+
<div class="page out">
4072
<div class="content only-header">
4173
<h1>优势？</h1>
4274
<p>mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后3~4K, 而且很灵活，几乎没有任何UI的限制，适用于各个项目各个场景。</p>
4375
</div>
4476
</div>
45-
<div id="page5" class="page out">
77+
78+
<div class="page out">
79+
<div class="content only-header">
80+
<h1>mobilebone.js深入</h1>
81+
<h4>基本触发机制</h4>
82+
<p>与jQuery Mobile类似的机制，引入mobilebone.js, 即对页面所有a标签做了委托。根据<code>href</code>值做智能判断直接过场，Ajax请求过场，还是无作为(javascript:*或外链)。<code>data-ajax="false"</code>会还原链接为传统跳转。</p>
83+
<p>默认是<code>click</code>绑定，但如果你引用类似Zepto的<code>touch</code>模块，则mobilebone走<code>touch</code>事件。</p>
84+
<p><code>Mobilebone.captureLink = false</code>全局设置，会让页面所有链接普通化，除非有<code>data-ajax=true</code>.</p>
85+
<p>对页面所有<code>form</code>的<code>submit</code>也做了委托，默认所有的表单都是<code>ajax</code>提交，并根据返回内容实现过场效果。规则与<code>a</code>元素<code>ajax</code>提交类似。</p>
86+
</div>
87+
</div>
88+
89+
<div class="page out">
90+
<div class="content only-header">
91+
<h1>mobilebone.js深入</h1>
92+
<h4>过场原理</h4>
93+
<p>与jQuery Mobile一样的机制，in/out/reverse类名切换触发：</p>
94+
<pre class="f20">"page slide in" / "page slide out" → "page slide out" / "page slide in"</pre>
95+
<p class="fade out">其中<code>slide</code>是动画的类型，默认值。你可以自定义，或者使用<code>animate.css</code>(jQuery Mobile中CSS分离), 含更多过场效果。</p>
96+
<div class="fade out">
97+
<h4>路由管理机制</h4>
98+
<p>使用HTML5 <code>history</code> API. 使用url <code>hash</code>记录, 格式同样借鉴J&amp;M, <code>#&amp;</code>, 后面跟随每个页面对应的标志量（页面id或ajax地址）。</p>
99+
<p>每当页面刷新、前进或后退(<code>popstate</code>), Mobilebone会根据<code>hash</code>对应标志量直接显示或重新请求对应页面。</p>
100+
</div>
101+
</div>
102+
</div>
103+
104+
<div class="page out">
105+
<div class="content only-header">
106+
<h1>mobilebone.js深入</h1>
107+
<h4>页面缓存机制</h4>
108+
<p>默认即存在的page默认都缓存；ajax请求页面默认缓存，<code>data-reload="true"</code>时候请求页面不会缓存。</p>
109+
<div class="fade out">
110+
<h4>页面事件管理</h4>
111+
<p>可全局或单独页面设置各类回调事件，目前有：<code>callback</code>, <code>fallback</code>, <code>onpagefirstinto</code>, <code>animationstart</code>, <code>animationend</code>, <code>preventdefault</code>.</p>
112+
<p>全局定义如：Mobilebone.callback = function() {};</p>
113+
<p>局部定义<code>data-callback="function_key"</code>. 可以使用<code>data-root</code>指定暴露的全局对象，例如：<code>data-root="$"</code></p>
114+
<p><code>Mobilebone.mergeCallback</code>可以控制全局和局部回调是覆盖还是合并(默认)。</p>
115+
</div>
116+
</div>
117+
</div>
118+
119+
<div class="page out">
120+
<div class="content only-header">
121+
<h1>mobilebone.js深入</h1>
122+
<h4 class="mb-3">Ajax参数以及事件管理</h4>
123+
<p>与jQuery, Zepto <code>$.ajax()</code>一致，例如<code>data-success</code>, <code>data-error</code>, <code>data-timeout</code>等，也可以使用<code>data-params</code>以查询字符串形式设置多个参数。</p>
124+
<p class="fade out"><code>form</code>表单也是如此。</p>
125+
<p class="fade out">如果<code>datatype</code>为<code>"json"</code>，Mobilebone会拿<code>Mobilebone.jsonHandle(response)</code>的返回值作为新页面载入。如果是默认字符串类型，则直接载入<code>response</code>(有处理，获取<code>title</code>, <code>page</code>元素等).</p>
126+
<div class="fade out">
127+
<h4 class="mb-3">其他细节</h4>
128+
<p>有<code>title</code>管理机制，方向管理机制<code>data-rel="abck/auto"</code>，菊花可定制（整页或某元素内），或者模块化加载等。</p>
129+
<pre class="mt-3">var Mobilebone = require('mobilebone');
130+
Mobilebone.init();</pre>
131+
</div>
132+
</div>
133+
</div>
134+
<div class="page out">
46135
<div class="content section-header">
47136
<h1>Q&amp;A</h1>
48137
<h2>by zhangxinxu 2014-10</h2>

‎plugins/ppt/mobilebone.ppt.js

Lines changed: 85 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,65 @@
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("#&", "");
12+
13+
// add pageid if don't exist
14+
// and get the index of those pages
15+
[].slice.call(pages).forEach(function(page, index) {
16+
if (!page.id) page.id = "page" + (index+1);
717

8-
if (hash != "" && hash != "#") [].slice.call(pages).forEach(function(page, index) {
9-
if (page.id == hash) {
18+
if (hash != "" && hash != "#" && page.id == hash) {
1019
index_page = index;
1120
}
1221
});
1322

23+
// get prev slide-page
1424
var prev = function() {
15-
if (index_page > 0) {
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
1628
index_page--;
17-
Mobilebone.transition(pages[index_page], pages[index_page + 1], true);
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+
}
1838
}
19-
}, next = function() {
20-
if (index_page < length_page - 1) {
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) {
2144
index_page++;
22-
Mobilebone.transition(pages[index_page], pages[index_page - 1]);
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

26-
document.addEventListener("click", function(event) {
56+
/*document.addEventListener("click", function(event) {
2757
var target = event.target;
2858
if (target.tagName.toLowerCase() == "a" || target.getParentElementByTag("a")) return;
2959
next();
30-
});
60+
});*/
3161

3262
document.addEventListener("keyup", function(event) {
33-
console.log(event.keyCode);
3463
switch (event.keyCode) {
3564
case 38: case 37: {
3665
prev();
@@ -57,5 +86,50 @@ if (window.Mobilebone && Mobilebone.support) {
5786
prev();
5887
}
5988
});
89+
90+
91+
Mobilebone.preventdefault = function(pagein, pageout) {
92+
if (pageout == null) return;
93+
94+
var isBack = Mobilebone.isBack(pagein, pageout);
95+
96+
if (isBack == true) {
97+
var eleins = pageout.querySelectorAll(".in");
98+
if (elein = eleins[eleins.length - 1]) {
99+
elein.style.display = elein.getAttribute("data-display") || "block";
100+
elein.classList.remove("in");
101+
elein.classList.add("out");
102+
return true;
103+
}
104+
} else {
105+
var eleout = pageout.querySelector(".out");
106+
107+
if (eleout) {
108+
eleout.classList.remove("out");
109+
eleout.classList.add("in");
110+
return true;
111+
}
112+
}
113+
};
114+
115+
// 确定缩放比例
116+
var funGetScale = function() {
117+
var width = window.innerWidth, height = window.innerHeight;
118+
var scaleWidth = width / 1024,
119+
scaleHeight = height / 768;
120+
return Math.min(scaleWidth, scaleHeight).toFixed(2);
121+
};
122+
123+
var scale = funGetScale();
124+
125+
var style = document.createElement("style");
126+
style.innerHTML = '.content{-webkit-transform:scale('+ scale +');transform:scale('+ scale +');}';
127+
document.querySelector("head").appendChild(style);
128+
129+
window.addEventListener("resize", function() {
130+
scale = funGetScale();
131+
style.innerHTML = '.content{-webkit-transform:scale('+ scale +');transform:scale('+ scale +');}';
132+
});
133+
60134
})(window, document);
61135
}

‎plugins/ppt/ppt.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
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; 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'; 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, .only-header code { background-color: #eee; font-family: "Lucida Console", Monaco, monospace; padding: .5em; white-space: pre-wrap; word-wrap: break-word; }
9+
.only-header code { padding: .2em .4em; margin: 0 .1em; }

‎src/mobilebone.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
*
4141
* @type string
4242
**/
43-
Mobilebone.VERSION = '2.2.0';
43+
Mobilebone.VERSION = '2.2.1';
4444

4545
/**
4646
* Whether catch attribute of href from element with tag 'a'
@@ -158,6 +158,7 @@
158158
onpagefirstinto: this.onpagefirstinto,
159159
animationstart: this.animationstart,
160160
animationend: this.animationend,
161+
preventdefault: this.preventdefault,
161162
fallback: this.fallback,
162163
callback: this.callback
163164
}, params = function(element) {
@@ -208,18 +209,23 @@
208209
// weather prevent transition
209210
var preventOut = params_out.preventdefault, isPreventOut = false;
210211
if (typeof preventOut == "string") preventOut = params_out.root[preventOut];
211-
if (typeof preventOut == "function") isPreventOut = preventOut.call(params_out.root, pageInto, pageOut, options);
212212
}
213213
if (pageInto != null && pageInto.classList) {
214214
// weather prevent transition
215215
var preventInto = params_in.preventdefault, isPreventInto = false;
216216
if (typeof preventInto == "string") preventInto = params_in.root[preventInto];
217-
if (typeof preventInto == "function") isPreventInto = preventInto.call(params_in.root, pageInto, pageOut, options);
218-
// if pageinto stopped, stop all
219-
if (isPreventInto == true) {
220-
// only run here and nothing more
221-
return this;
222-
}
217+
218+
}
219+
if (typeof preventOut == "function") isPreventOut = preventOut.call(params_out.root, pageInto, pageOut, options);
220+
221+
// if functions of 'preventdefault' are same for pageIn and pageout, just excute once.
222+
if (isPreventOut == true && preventOut === preventInto) return false;
223+
224+
if (typeof preventInto == "function") isPreventInto = preventInto.call(params_in.root, pageInto, pageOut, options);
225+
// if pageinto stopped, stop all
226+
if (isPreventInto == true) {
227+
// only run here and nothing more
228+
return false;
223229
}
224230

225231
if (pageOut != null && pageOut.classList) {

‎test/backbone/index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@
3333
return '<div id="'+ key +'Page" class="page out" data-title="'+ json.title +'" data-onpagefirstinto="render"><p>正在加载中...</p></div>';
3434
};
3535

36-
var render = function(page_in, page_out, json) {
36+
var render = function(page_in, page_out, options) {
37+
options = options || {};
38+
var json = options.response;
3739
if(typeof json != "object") return;
3840
var key = json.key, pageid = json.key + "Page";
3941
var FindModel = Backbone.Model.extend({

0 commit comments

Comments
 (0)