Skip to content

Commit 31d0dc8

Browse files
author
zhangxinxu
committed
Merge branch 'develop'
2 parents 4414b11 + faa1ca4 commit 31d0dc8

26 files changed

+917
-77
lines changed

‎ReadMe.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ Mobilebone会自动捕获页面上的a元素，如果其href值存在猫腻，
5050
插件
5151
----------------
5252
<ol>
53-
<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>
53+
<li><strong>mobilebone.ppt.js</strong>: 可以让web页面表现如幻灯片演示，尺寸自适应。 <a href="http://rawgit.com/zhangxinxu/mobilebone/develop/plugins/ppt/index.html">demo点击这里</a>。</li>
5454
</ol>
5555

5656
优势？
@@ -120,7 +120,7 @@ For more detail, you can [visit here](http://www.zhangxinxu.com/wordpress/?p=438
120120
Plugins
121121
----------------
122122
<ol>
123-
<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>
123+
<li><strong>mobilebone.ppt.js</strong>: make web page to powerpoint presentation. <a href="http://rawgit.com/zhangxinxu/mobilebone/develop/plugins/ppt/index.html">demo here</a>.</li>
124124
</ol>
125125

126126
Advantage?

‎docs/Mobilebone.ajax.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@ <h3>参数</h3>
1919
<li><strong>trigger_or_options</strong> <code>&lt;a&gt;</code>元素或者Ajax请求参数对象。必须参数。</li>
2020
</ul>
2121
<h3>返回值</h3>
22-
<p>-。</p>
22+
<p>-</p>
2323
<h3>使用示例</h3>
2424
<pre>Mobilebone.ajax(document.querySelector("a"));
25+
Mobilebone.ajax(document.querySelector("form"));
2526
Mobilebone.ajax({
2627
url: 'xxx.html',
2728
success: function() {}

‎docs/Mobilebone.classMask.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ <h2>Mobilebone.classMask</h2>
1616
<p><code>mask</code>元素(loading效果遮罩元素)的标志类名。默认值是<code>"mask"</code>. 可以通过CSS设置控制loading的位置、大小以及颜色等。</p>
1717
<h3>值类型</h3>
1818
<p>字符串。</p>
19+
<h3>其他说明</h3>
20+
<p>mobilebone.css默认对类名<code>.mask</code>有相关样式设置，其结构如下：</p>
21+
<pre>&lt;div class="mask">&lt;i class="loading">&lt;/i>&lt;/div></pre>
22+
<p>其中<code>.mask</code>负责半透明（或全透明）遮罩，<code>.loading</code>则是菊花。您可以根据自己项目的实际情况修改菊花效果，例如使用iOS风格的旋转菊花，而不是Mobilebone的点菊花。</p>
1923
</div>
2024
</div>
2125

‎docs/Mobilebone.isBack.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="page out">
1414
<div class="content">
1515
<h2>Mobilebone.isBack(page_in, page_out)</h2>
16-
<p>比较两个page元素在页面中的前后位置。此API没什么机会使用的，内用居多，不必太在意。</p>
16+
<p>比较两个page元素在页面中的前后位置。</p>
1717
<h3>参数</h3>
1818
<ul>
1919
<li><code>page_in</code> 元素。必须参数。进入的元素。</li>

‎docs/Mobilebone.pushStateEnabled.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
<div class="page out">
1414
<div class="content">
1515
<h2>Mobilebone.pushStateEnabled</h2>
16-
<p>是否启用历史记录。此参数我是没有想到需要使用的理由，但是长得还挺帅，于是就放着。果断时间看不顺眼了，去掉。所以此API大家就当没看到。</p>
16+
<p>是否启用历史记录。在实现一些单页应用时候，尤其针对PC端，此参数很有用。</p>
17+
<p>现在流行一种翻屏网页效果，例如QQ浏览器宣传页：<a href="http://browser.qq.com/" target="_blank">http://browser.qq.com</a>, mac qq浏览器宣传页：<a href="http://browser.qq.com/mac/">http://browser.qq.com/mac/</a>.</p>
18+
<p>Mobilebone非常适合驾驭这类web应用，此时，我们需要设置<code>Mobilebone.pushStateEnabled=false</code>, 因为每一屏就是个子页，而非独立页，无需历史记录。否则，用户点返回想退出该页，结果只是回到上一屏，会有问题的。</p>
1719
<h3>值类型</h3>
1820
<p>布尔值。设置为<code>true</code>或<code>false</code>.</p>
1921
</div>

‎docs/Mobilebone.transition.html

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,32 @@ <h3>参数</h3>
1919
<li><code>pageInto</code> DOM元素。表示进入的page元素. 必须参数。</li>
2020
<li><code>pageOut</code> DOM元素。表示要移出的page元素. 可选。没有移出元素使用<code>null</code>.</li>
2121
<li><code>back</code> 布尔值。是否反方向过场。可缺省。</li>
22-
<li><code>options</code> 对象。此参数多内部使用。一般有用的是两个参数接口：<code>id</code>和<code>response</code>. 当<code>back</code>缺省时候，可以占据<code>back</code>位置使用。</li>
22+
<li><code>options</code> 对象。此参数多内部使用。当<code>back</code>缺省时候，可以占据<code>back</code>位置使用。</li>
23+
</ul>
24+
<h3>options参数</h3>
25+
<p>如果对Mobilebone足够熟悉，就可以使用<code>Mobilebone.transition</code>编写插件，实现诸多自定义效果。例如: <code>plugins/ppt</code>目录中的<code>mobilebone.ppt.js</code>插件，此时，你需要对<code>options</code>支持的一些参数有所了解：</p>
26+
<ul>
27+
<li><code>id</code> 进入页面元素的<code>id</code>, 绝大多数情况下，你用不到此参数，Mobilebone有一套<code>id</code>获取机制。除非<code>pageInto</code>本身没有<code>id</code>，需要额外指定。</li>
28+
<li><code>response</code> ajax请求的返回内容，此参数主要目的是暴露给回调函数，于是可以根据返回数据做一些其他事情。</li>
29+
<li><code>target</code> 一般指点击的那个<code>a</code>元素，如果是表单提交，可能会代指<code>form</code>元素。此参数v2.3.0+后更加规范化，在处理复杂应用时，会比较有用。</li>
30+
<li><code>remove</code> 是否移除同<code>id</code>缓存的元素。</li>
31+
<li><code>history</code> 是否在新增一条历史记录。对于一些单页应用，或者内切换，可以设置<code>history: false</code>，与<code>Mobilebone.pushStateEnabled = false</code>作用异曲同工。</li>
32+
<li><code>classPage</code> 当前切换对象识别类名，如果是内部切换，此值会与<code>Mobilebone.classPage</code>值不一样。</li>
2333
</ul>
2434
<h3>返回值</h3>
2535
<p><code>undefined</code></p>
2636
<h3>使用示例</h3>
2737
<pre>Mobilebone.transition(element);
2838
Mobilebone.transition(element1, element2);
2939
Mobilebone.transition(element1, element2, true);
30-
Mobilebone.transition(element1, element2, { id: “only” });
31-
Mobilebone.transition(element1, element2, true, { id: “only” });</pre>
40+
Mobilebone.transition(element1, element2, { id: "only" });
41+
Mobilebone.transition(element1, element2, true, { id: "only" });
42+
Mobilebone.transition(element1, element2, false, {
43+
id: "only",
44+
target: elementA,
45+
remove: false,
46+
history: false
47+
});</pre>
3248
</div>
3349
</div>
3450

‎docs/data-callbackKeys.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,10 @@ <h2>data-callbackKeys</h2>
2121
<li>data-fallback</li>
2222
<li>data-animationstart</li>
2323
<li>data-animationend</li>
24+
<li>data-preventdefault</li>
2425
</ul>
2526
<p>每个回调的作用于使用场景可参见博文说明：<a href="http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/" class="link">点击这里</a>。</p>
27+
<p>其中，<code>data-preventdefault</code>并非<code>page</code>元素专有，<code>a</code>元素，<code>form</code>元素也支持此回调，具体可<a href="data-preventDefault.html" class="link">点击这里</a>。</p>
2628
<h3>其他说明</h3>
2729
<p><code>data-ajaxKeys</code>也是类似的调调。</p>
2830
</div>

‎docs/data-classPage.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
6+
<title>Mobilebone.js API文档-data-classPage</title>
7+
<link rel="stylesheet" href="../src/mobilebone.css">
8+
<link rel="stylesheet" href="docs.css">
9+
</head>
10+
11+
<body>
12+
<aside></aside>
13+
<div class="page out">
14+
<div class="content">
15+
<h2>data-classPage (v2.3.0+)</h2>
16+
<p>内部过场（局部过场）效果的关键类名，性质等同于全局的<code>Mobilebone.classPage</code>.</p>
17+
<h3>使用</h3>
18+
<p>此参数若想要生效，必须和<a href="data-container.html" data-rel="auto" class="link">data-container</a>配合使用。</p>
19+
<p>例如，下面这个选项卡效果：</p>
20+
<style>
21+
.tab_container { width: 256px; height: 256px; background-color: #fff; position: relative; overflow: hidden; }
22+
.tabview { position: absolute; left: 0; top: 116px; right: 0; text-align: center; z-index: 1; }
23+
.tabview a { display: inline-block; padding: 6px 10px; font-size: 14px; text-decoration: none; border-radius: 4px; background-color: #fff; border: 1px solid #bbb; color: #333; font-family: 'microsoft yahei'; }
24+
.tabview .active { background-color: #34538b; border-color: #34538b; color: #fff; }
25+
.tab { position: absolute; width: 100%; height: 100%; white-space: nowrap; text-align: center; }
26+
.tab:after { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
27+
.tab img { vertical-align: middle; }
28+
</style>
29+
<div id="tab_container" class="tab_container">
30+
<div class="tabview">
31+
<a href="#tab1" data-container="tab_container" data-classpage="tab" data-rel="auto" class="active">妹子1</a>
32+
<a href="#tab2" data-container="tab_container" data-classpage="tab" data-rel="auto">妹子2</a>
33+
<a href="#tab3" data-container="tab_container" data-classpage="tab" data-rel="auto">妹子3</a>
34+
</div>
35+
<div id="tab1" class="tab in" data-callback="tabButtonActive">
36+
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
37+
</div>
38+
<div id="tab2" class="tab out" data-callback="tabButtonActive">
39+
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg">
40+
</div>
41+
<div id="tab3" class="tab out" data-callback="tabButtonActive">
42+
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg">
43+
</div>
44+
</div>
45+
<p>其HTML代码结构如下：</p>
46+
<pre>&lt;div id="tab_container" class="tab_container">
47+
&lt;div class="tabview">
48+
&lt;a href="#tab1" data-container="tab_container" <span style="color: #cd0000;">data-classpage="tab"</span> data-rel="auto" class="active">妹子1&lt;/a>
49+
&lt;a href="#tab2" data-container="tab_container" <span style="color: #cd0000;">data-classpage="tab"</span> data-rel="auto">妹子2&lt;/a>
50+
&lt;a href="#tab3" data-container="tab_container" <span style="color: #cd0000;">data-classpage="tab"</span> data-rel="auto">妹子3&lt;/a>
51+
&lt;/div>
52+
&lt;div id="tab1" class="tab in" data-callback="tabButtonActive">
53+
&lt;img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
54+
&lt;/div>
55+
&lt;div id="tab2" class="tab out" data-callback="tabButtonActive">
56+
&lt;img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg">
57+
&lt;/div>
58+
&lt;div id="tab3" class="tab out" data-callback="tabButtonActive">
59+
&lt;img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg">
60+
&lt;/div>
61+
&lt;/div></pre>
62+
<p>我们不需要额外的JS，就可以实现局部过场效果！当然，为了按钮选中态即时切换，我们需要回调简单处理下：</p>
63+
<pre>tabButtonActive = function(pagein) {
64+
var target = document.querySelectorAll(".tabview a")[pagein.id.replace(/\D/g, "") - 1];
65+
var eleAcive = document.querySelector(".tabview .active");
66+
if (eleAcive) eleAcive.classList.remove("active");
67+
if (target) target.classList.add("active");
68+
};</pre>
69+
<p>非<code>page</code>页面的过场效果是不会触发<code>history</code>变化的，其他规则跟主<code>page</code>切换一致，包括各种回调接口的使用等等。</p>
70+
71+
72+
73+
74+
</div>
75+
</div>
76+
77+
<script src="../src/mobilebone.js"></script>
78+
<script>
79+
Mobilebone.captureLink = false;
80+
window.navKey = "data-classPage";
81+
</script>
82+
<script src="nav.js"></script>
83+
<script src="docs.js"></script>
84+
</body>
85+
</html>

‎docs/data-container.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
6+
<title>Mobilebone.js API文档-data-container</title>
7+
<link rel="stylesheet" href="../src/mobilebone.css">
8+
<link rel="stylesheet" href="docs.css">
9+
</head>
10+
11+
<body>
12+
<aside></aside>
13+
<div class="page out">
14+
<div class="content">
15+
<h2>data-container (v2.3.0+)</h2>
16+
<p>指定Ajax加载或者内部过场效果的容器。</p>
17+
<h3>属性值</h3>
18+
<p>为容器元素的<code>id</code>值。</p>
19+
<h3>使用</h3>
20+
<p>例如，页面上有如下HTML：</p>
21+
<pre>&lt;div id="container">&lt;/div>
22+
&lt;a href="ajax-page.html" <span style="color:#cd0000;">data-container="container"</span>&gt;点击ajax加载&lt;/a></pre>
23+
<p>则请求的页面会被<code>append</code>到<code>id</code>为<code>container</code>的这个元素内部，而不是默认的<code>document.body</code>的内部。</p>
24+
<h3>进阶使用</h3>
25+
<p>当<code>data-container</code>和<code>data-classpage</code>同时存在且值有效的时候，可以实现局部过场效果。具体参见API: <a href="data-classPage.html">data-classPage</a>.</p>
26+
</div>
27+
</div>
28+
29+
<script src="../src/mobilebone.js"></script>
30+
<script>
31+
Mobilebone.captureLink = false;
32+
window.navKey = "data-container";
33+
</script>
34+
<script src="nav.js"></script>
35+
<script src="docs.js"></script>
36+
</body>
37+
</html>

‎docs/data-form.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,20 @@
1515
<h2>data-form</h2>
1616
<p>用在<code>page</code>元素上，表示当前页面过渡的动画类型。值为对应的类名，例如<code>"fade"</code>, <code>"flip"</code>等。</p>
1717
<p>具体使用可参见项目<code>test/transition/index.html</code>.</p>
18+
<h3>关于animte.css</h3>
19+
<p>过渡效果测试页面<code>/test/transition/</code>中有个CSS文件，名为<code>animate.css</code>，是个很重要的过场效果插件。不过之前位置过于隐蔽，很多人都没注意。在v2.3.0+版本之后，以<code>mobilebone.animate.css</code>放在的<code>src</code>目录中。目前包含动画类别有：</p>
20+
<ul>
21+
<li>fade</li>
22+
<li>pop</li>
23+
<li>slide(默认有)</li>
24+
<li>slidefade</li>
25+
<li>slidedown</li>
26+
<li>slideup</li>
27+
<li>flip(父级需要类名<code>viewport-flip</code>)</li>
28+
<li>turn(父级需要类名<code>viewport-turn)</code></li>
29+
<li>flow</li>
30+
</ul>
31+
<p>在页面引入<code>mobilebone.animate.css</code>后，只要设置<code>Mobilebone.classAnimation</code>后者<code>data-form</code>为对应的动画关键字，如<code>pop</code>. 页面见的过场效果就会使<code>pop</code>效果，使用非常简单。</p>
1832
</div>
1933
</div>
2034

‎docs/data-rel.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="page out">
1414
<div class="content">
1515
<h2>data-rel</h2>
16-
<p>主要使用伪下面2个值<code>"back"</code>和<code>"auto"</code>。主要作用是决定过场的方向，默认都是正向过场，例如<code>slideup</code>效果，是从下面出来。如果是<code>"back"</code>，就会从上面出现。有时候，我们无法确定过场的方向，例如，本文档页面左侧的各个链接，因为点击顺序任意的，此时就可以使用<code>"auto"</code>，也就是：</p>
16+
<p>主要使用为下面2个值<code>"back"</code>和<code>"auto"</code>。主要作用是决定过场的方向，默认都是正向过场，例如<code>slideup</code>效果，是从下面出来。如果是<code>"back"</code>，就会从上面出现。有时候，我们无法确定过场的方向，例如，本文档页面左侧的各个链接，因为点击顺序任意的，此时就可以使用<code>"auto"</code>，也就是：</p>
1717
<pre>&lt;a href="Mobilebone.support.html" class="nav-a" data-mask <span style="color:#cd0000;">data-rel="auto"</span>>Mobilebone.support&lt;/a></pre>
1818
<p>此时，Mobilebone会根据对应<code>page</code>页面的前后顺序确定其正向过场还是反向。</p>
1919
<h3>其他说明</h3>

‎docs/docs.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ aside > h2 { font-size: 1.2em; }
55
aside a { display: block; padding: 5px 10px; color: #fff; position: relative; }
66
.nav-a:hover { background-color: rgba(255,255,255, .1); }
77
.nav-a[href*=transition], .nav-a[href*=data-title], .nav-a[href*=otherAnonymousAPIs] { margin-top: 20px; }
8-
.nav-a[href*=autoInit], .nav-a[href*=getPage] { text-decoration: line-through; }
9-
.nav-a[href*=pushStateEnabled], .nav-a[href*=getCleanUrl], .nav-a[href*=getFunction] { opacity: .6; }
8+
.nav-a[href*=autoInit], .nav-a[href*=getPage] { text-decoration: line-through; display: none; }
9+
.nav-a[href*=getCleanUrl], .nav-a[href*=getFunction] { opacity: .6; }
1010
.nav-a > .mask { display: inline; width: 26px; height: 26px; top: 0; right: 8px; background-color: transparent; -webkit-transform: scale(.8,.8); -ms-transform: scale(.75,.75); transform: scale(.75,.75); }
1111
.nav-a.active { background-color: rgba(0,0,0,.2); box-shadow: inset 0 -1px rgba(255,255,255, .1), inset 0 1px #000; }
1212

‎docs/docs.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,12 @@
66

77
getVersion = function(pagein) {
88
pagein.querySelector(".version").innerHTML = "v" + Mobilebone.VERSION;
9-
};
9+
};
10+
11+
tabButtonActive = function(pagein) {
12+
var target = document.querySelectorAll(".tabview a")[pagein.id.replace(/\D/g, "") - 1];
13+
var eleAcive = document.querySelector(".tabview .active");
14+
if (eleAcive) eleAcive.classList.remove("active");
15+
if (target) target.classList.add("active");
16+
};
1017
})();

‎docs/nav.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
var key = window.navKey, html = '<nav>', active = '', matchs = false;
66

7-
["Mobilebone.support", "Mobilebone.VERSION", "Mobilebone.autoInit", "Mobilebone.captureLink", "Mobilebone.captureForm", "Mobilebone.rootTransition", "Mobilebone.mergeCallback", "Mobilebone.classAnimation", "Mobilebone.classPage", "Mobilebone.classMask", "Mobilebone.pushStateEnabled", "Mobilebone.transition()", "Mobilebone.getCleanUrl()", "Mobilebone.getPage()", "Mobilebone.createPage()", "Mobilebone.getFunction()", "Mobilebone.ajax()", "Mobilebone.submit()", "Mobilebone.isBack()", "Mobilebone.jsonHandle()", "Mobilebone.init()", "Mobilebone.handleTapEvent()", "otherAnonymousAPIs", "data-title", "data-root", "data-form", "data-params", "data-callbackKeys", "data-mask", "data-rel", "data-ajax", "data-ajaxKeys", "data-preventDefault"].forEach(function(innerhtml) {
7+
["Mobilebone.support", "Mobilebone.VERSION", "Mobilebone.autoInit", "Mobilebone.captureLink", "Mobilebone.captureForm", "Mobilebone.rootTransition", "Mobilebone.mergeCallback", "Mobilebone.classAnimation", "Mobilebone.classPage", "Mobilebone.classMask", "Mobilebone.pushStateEnabled", "Mobilebone.transition()", "Mobilebone.getCleanUrl()", "Mobilebone.getPage()", "Mobilebone.createPage()", "Mobilebone.getFunction()", "Mobilebone.ajax()", "Mobilebone.submit()", "Mobilebone.isBack()", "Mobilebone.jsonHandle()", "Mobilebone.init()", "Mobilebone.handleTapEvent()", "otherAnonymousAPIs", "data-title", "data-root", "data-form", "data-params", "data-callbackKeys", "data-mask", "data-rel", "data-ajax", "data-ajaxKeys", "data-preventDefault", "data-container", "data-classPage"].forEach(function(innerhtml) {
88
if (matchs == true) {
99
active = '';
1010
} else if (key && (key == innerhtml || new RegExp(key).test(innerhtml))) {

0 commit comments

Comments
 (0)