Skip to content

Commit 3199453

Browse files
zhangxinxuzhangxinxu
committed
Merge pull request #41 from zhangxinxu/develop
Develop
2 parents 866aced + 2aeaed4 commit 3199453

16 files changed

+668
-21
lines changed

‎docs/Mobilebone.classAnimation.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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文档-Mobilebone.classAnimation</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>Mobilebone.classAnimation</h2>
16+
<p>v2.1.1新增。表示CSS3动画对应类名。默认值是<code>"slide"</code>. 可以设置的其他值如<code>"flip"</code>, <code>"fade"</code>等。</p>
17+
<h3>值类型</h3>
18+
<p>字符串。</p>
19+
<h3>其他说明</h3>
20+
<p>优先使用匿名属性<code>Mobilebone.form</code>的值指定对应动画类名，主要是为了兼容旧版本。</p>
21+
</div>
22+
</div>
23+
24+
<script src="../src/mobilebone.js"></script>
25+
<script>
26+
Mobilebone.captureLink = false;
27+
window.navKey = "classAnimation";
28+
</script>
29+
<script src="nav.js"></script>
30+
<script src="docs.js"></script>
31+
</body>
32+
</html>

‎docs/data-form.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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-form</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-form</h2>
16+
<p>用在<code>page</code>元素上，表示当前页面过渡的动画类型。值为对应的类名，例如<code>"fade"</code>, <code>"flip"</code>等。</p>
17+
<p>具体使用可参见项目<code>test/transition/index.html</code>.</p>
18+
</div>
19+
</div>
20+
21+
<script src="../src/mobilebone.js"></script>
22+
<script>
23+
Mobilebone.captureLink = false;
24+
window.navKey = "data-form";
25+
</script>
26+
<script src="nav.js"></script>
27+
<script src="docs.js"></script>
28+
</body>
29+
</html>

‎docs/data-preventDefault.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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-preventDefault</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-preventDefault (v2.2.0+)</h2>
16+
<p>用来阻止（或介入）Mobilebone的一些默认行为，这些行为包括，页面过场；点击链接过场或请求；点击表单提交。</p>
17+
<h3>使用</h3>
18+
<p>例如，页面上有如下HTML：</p>
19+
<pre>&lt;a href="form.html">点击加载一个表单&lt;/a></pre>
20+
<p>如果没有其他设置，Mobilebone会自动请求<code>form.html</code>这个页面并过场载入。但是，往往，我们可能需要先判断用户是否已经登录了，此时，就需要<code>data-preventdefault</code>(不区分大小写)的介入。如：</p>
21+
<pre>&lt;a href="form.html" data-preventdefault="isLoginout">点击加载一个表单&lt;/a></pre>
22+
<p>于是，我们就可以在<code>isLogin</code>这个方法中做阻断判断了：</p>
23+
<pre>var isLoginout = function(target) {
24+
<span style="color:green;">// 支持一个参数target, 指的就是对应的a元素
25+
// 如果没有登录，返回true</span>
26+
if (isLogin == false) return true;
27+
};</pre>
28+
<p>从上面代码可以看到，当<code>data-preventdefault</code>中介函数返回值为<code>true</code>的时候，就会中断Mobilebone的默认行为，你就可以做一些你想做的其他事情，例如，先弹出个登录弹框。</p>
29+
<h3>使用</h3>
30+
<p><code>data-preventdefault</code>中介函数还有一个很重要的应用就是表单验证。默认情况下，表单点击提交按钮，就会走原生验证，然后Ajax过场。但是，实际开发，验证是交给自己，而不是浏览器，于是，在提交之前，我们有必要验证下，此时，就得靠<code>data-preventdefault</code>.</p>
31+
<p>写在<code>form</code>标签上，如下：</p>
32+
<pre>&lt;form method="get" action="search.html" data-preventDefault="validate_false" novalidate>&lt;/form></pre>
33+
<p>由于<code>data-preventdefault</code>中介函数返回<code>true</code>时候才中断，因此，对应的函数关键字应该是“验证不通过”的意思，例如这里的<code>validate_false</code>.</p>
34+
<pre>var validate_false = function(form) {
35+
<span style="color:green;">// 支持一个参数form, 指的就是表单元素
36+
// 如果文本框没有值</span>
37+
if (input.value.trim() == "") {
38+
<span style="color:green;">// 显示错误提示
39+
// xxxx.show();
40+
// 中断Mobilebone行为</span>
41+
return true;
42+
}
43+
};</pre>
44+
<h3>使用</h3>
45+
<p><code>page</code>页面元素上也可以使用此中介阻断API，其绑定以及函数参数与<code>callback</code>/<code>fallback</code>完全一致。</p>
46+
<p>例如，我们Ajax请求页面的是一个弹框页面，此时，当前页面是不能离开舞台的，就可以使用<code>data-preventdefault</code>中断。这个以后有机会再放置实例。</p>
47+
<p>或者实现页面跳转效果等。</p>
48+
</div>
49+
</div>
50+
51+
<script src="../src/mobilebone.js"></script>
52+
<script>
53+
Mobilebone.captureLink = false;
54+
window.navKey = "data-preventDefault";
55+
</script>
56+
<script src="nav.js"></script>
57+
<script src="docs.js"></script>
58+
</body>
59+
</html>

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ <h2>mobilebone.js下载</h2>
2121
<script src="../src/mobilebone.js"></script>
2222
<script src="docs.js"></script>
2323
<script>
24-
Mobilebone.form = "slideup";
24+
Mobilebone.classAnimation = "slideup";
2525
Mobilebone.callback = function() {
2626
var navA = document.querySelectorAll("aside a");
2727
[].slice.call(navA).forEach(function(nav) {

‎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.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-params", "data-callbackKeys", "data-mask", "data-rel", "data-ajax", "data-ajaxKeys"].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"].forEach(function(innerhtml) {
88
if (matchs == true) {
99
active = '';
1010
} else if (key && (key == innerhtml || new RegExp(key).test(innerhtml))) {

‎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.1.0",
3+
"version": "2.2.2",
44
"description": "Bone main for mobile web APP with a sigle page mode.",
55
"main": "src/mobilebone.js",
66
"directories": {

‎src/mobilebone.js

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

4545
/**
4646
* Whether catch attribute of href from element with tag 'a'
@@ -86,7 +86,13 @@
8686
* @type boolean
8787
**/
8888
Mobilebone.mergeCallback = true;
89-
89+
90+
/**
91+
* className of animation
92+
*
93+
* @type string
94+
**/
95+
Mobilebone.classAnimation = "slide";
9096
/**
9197
* for mark page element
9298
*
@@ -146,7 +152,7 @@
146152
root: this.rootTransition,
147153
// the form of transition, the value (eg. 'slide') will be a className to add or remove.
148154
// of course, u can set to other valeu, for example, 'fade' or 'flip'. However, u shou add corresponding CSS3 code.
149-
form: this.form || 'slide',
155+
form: this.form || this.classAnimation,
150156
// 'animationstart/animationend/...' are callbacks params
151157
// Note: those all global callbacks!
152158
onpagefirstinto: this.onpagefirstinto,
@@ -169,7 +175,7 @@
169175
_params.root = Mobilebone.getFunction(_params.root);
170176
}
171177

172-
["onpagefirstinto", "callback", "fallback", "animationstart", "animationend"].forEach(function(key) {
178+
["onpagefirstinto", "callback", "fallback", "animationstart", "animationend", "preventdefault"].forEach(function(key) {
173179
if (Mobilebone.mergeCallback == true && typeof defaults[key] == "function") {
174180
// merge global callback
175181
var local_function_key = element.getAttribute("data-" + key) || _dataparams[key];
@@ -199,18 +205,38 @@
199205
var params_out = params(pageOut), params_in = params(pageInto);
200206

201207
if (pageOut != null && pageOut.classList) {
202-
// do transition
203-
pageOut.classList.add("out");
204-
pageOut.classList.add(params_out.form);
205-
pageOut.classList.remove("in");
206-
// if reverse direction
207-
pageOut.classList[back? "add": "remove"]("reverse");
208-
// do fallback every time
209-
var fallback = params_out.fallback;
210-
if (typeof fallback == "string") fallback = params_out.root[fallback];
211-
if (typeof fallback == "function") fallback.call(params_out.root, pageInto, pageOut, options.response);
208+
// weather prevent transition
209+
var preventOut = params_out.preventdefault, isPreventOut = false;
210+
if (typeof preventOut == "string") preventOut = params_out.root[preventOut];
211+
if (typeof preventOut == "function") isPreventOut = preventOut.call(params_out.root, pageInto, pageOut, options);
212212
}
213-
if (pageInto != null && pageInto.classList) {
213+
if (pageInto != null && pageInto.classList) {
214+
// weather prevent transition
215+
var preventInto = params_in.preventdefault, isPreventInto = false;
216+
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+
}
223+
}
224+
225+
if (pageOut != null && pageOut.classList) {
226+
// do transition if there are no 'prevent'
227+
if (isPreventOut != true) {
228+
pageOut.classList.add("out");
229+
pageOut.classList.add(params_out.form);
230+
pageOut.classList.remove("in");
231+
// if reverse direction
232+
pageOut.classList[back? "add": "remove"]("reverse");
233+
// do fallback every time
234+
var fallback = params_out.fallback;
235+
if (typeof fallback == "string") fallback = params_out.root[fallback];
236+
if (typeof fallback == "function") fallback.call(params_out.root, pageInto, pageOut, options);
237+
}
238+
}
239+
if (pageInto != null && pageInto.classList) {
214240
// for title change
215241
var title = params_in.title,
216242
header = document.querySelector("h1"),
@@ -666,6 +692,16 @@
666692
if (ajax == "false" || (this.captureForm == false && ajax != "true")) return;
667693

668694
form.addEventListener("submit", function(event) {
695+
// prevent detect
696+
var attrPrevent = this.getAttribute("data-preventdefault");
697+
// get 'preventDefault' function
698+
var funPrevent = Mobilebone.getFunction(attrPrevent);
699+
if (typeof funPrevent == "function" && funPrevent(this) == true) {
700+
// if the return value of prevent function is true, prevent everything~
701+
event.preventDefault();
702+
return false;
703+
}
704+
669705
Mobilebone.ajax(this);
670706
event.preventDefault();
671707
});
@@ -792,6 +828,17 @@
792828

793829
if (self_page == null || !target) return;
794830

831+
// prevent detect
832+
var attrPrevent = target.getAttribute("data-preventdefault")
833+
|| _queryToObject(target.getAttribute("data-params") || "").preventdefault;
834+
// get 'preventDefault' function
835+
var funPrevent = Mobilebone.getFunction(attrPrevent);
836+
if (typeof funPrevent == "function" && funPrevent(target) == true) {
837+
// if the return value of prevent function is true, prevent everything~
838+
event.preventDefault();
839+
return false;
840+
}
841+
795842
// if mask element exist and displaying, prevent double trigger
796843
var ele_mask = target.getElementsByClassName(Mobilebone.classMask)[0];
797844
if (ele_mask && ele_mask.style.visibility != "hidden") {

‎test/form-submit/form.html

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

3030
<script src="../../src/mobilebone.js"></script>
3131
</body>
32-
</html>
32+
</html>

‎test/form-submit/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<style>
1111
input { font-size: 100%; }
1212
input[name] {
13-
height: 40px; width: 100%; padding: 10px; box-sizing: border-box;font-size: 100%;
13+
height: 40px; width: 100%; padding: 10px; box-sizing: border-box; font-size: 100%;
1414
}
1515
.search { height: 40px; padding: 10px; box-sizing: border-box; }
1616
.submit { height: 40px; font-size: 16px; padding: 0 25px; }
@@ -22,7 +22,7 @@
2222
<ul>
2323
<li class="pl10">
2424
<form method="get" action="search.html">
25-
<input type="search" class="search mr10"><input type="submit" class="submit" value="搜索">
25+
<input type="search" class="search mr10" required><input type="submit" class="submit" value="搜索">
2626
</form>
2727
</li>
2828
</ul>

‎test/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ <h3>&nbsp;下面链接都是直接刷新跳转</h3>
1616
<li><a href="ajax-html/index.html">ajax请求HTML</a></li>
1717
<li><a href="ajax-json/index.html">ajax请求JSON并构建页面</a></li>
1818
<li><a href="form-submit/index.html">表单提交<sup style="color:#cd0000;">New</sup></a></li>
19+
<li><a href="prevent-default/index.html">Mobilebone默认行为的阻止与中断<sup style="color:#cd0000;">New</sup></a></li>
1920
<li><a href="callback/index.html">回调方法测试</a></li>
2021
<li><a href="transition/index.html">其他类型的切换动画演示</a></li>
2122
<li><a href="fixed-header-footer/index.html">固定的头部和底部</a></li>

‎test/prevent-default/form.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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>表单页面</title>
7+
<link rel="stylesheet" href="../../src/mobilebone.css">
8+
<link rel="stylesheet" href="../test.css">
9+
<link rel="stylesheet" href="zxx.lib.css">
10+
</head>
11+
12+
<body>
13+
<div id="searchResult" class="page out" data-role="window" data-preventdefault="otherPageIfGithub">
14+
<form method="post" action="submit.php" class="pl10 pr10">
15+
<div class="mt20">
16+
<label>用户名：</label>
17+
<div class="mt5"><input name="username" required></div>
18+
</div>
19+
<div class="mt20">
20+
<label>手机号：</label>
21+
<div class="mt5"><input name="tel" type="tel" required></div>
22+
</div>
23+
<div class="mt20">
24+
<input type="submit" class="submit" value="提交">
25+
</div>
26+
</form>
27+
</div>
28+
29+
<script src="../../src/mobilebone.js"></script>
30+
</body>
31+
</html>
32+

0 commit comments

Comments
 (0)