Skip to content

Commit f04b34c

Browse files
author
zhangxinxu
committed
v2.0.0
1. add form ajax submit 2. 'popstate' ajax get 3. update docs
1 parent fb44f8a commit f04b34c

File tree

10 files changed

+137
-11
lines changed

10 files changed

+137
-11
lines changed

‎docs/Mobilebone.ajax.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ <h2>Mobilebone.ajax(trigger_or_options)</h2>
1616
<p>ajax请求页面数据并动态载入。很重要，应该会比较多用到的API，大家需要留意。</p>
1717
<h3>参数</h3>
1818
<ul>
19-
<li><code>trigger_or_options</code> <code>&lt;a&gt;</code>元素或者Ajax请求参数对象。必须参数。</li>
19+
<li><strong>trigger_or_options</strong> <code>&lt;a&gt;</code>元素或者Ajax请求参数对象。必须参数。</li>
2020
</ul>
2121
<h3>返回值</h3>
2222
<p>-。</p>
2323
<h3>使用示例</h3>
24-
<pre>Mobilebone.ajax(document.querySelector(“a”));
24+
<pre>Mobilebone.ajax(document.querySelector("a"));
2525
Mobilebone.ajax({
26-
url: ‘xxx.html’,
26+
url: 'xxx.html',
2727
success: function() {}
2828
});</pre>
2929
</div>

‎docs/Mobilebone.captureForm.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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.captureForm</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.captureForm</h2>
16+
<p>是否捕获页面上的<code>&lt;form&gt;</code>表单，执行Ajax请求并把返回结果装载成新页面无刷新载入。此为全局设置，影响整个页面。默认为<code>true</code>.</p>
17+
<h3>值类型</h3>
18+
<p>布尔值。设置为<code>true</code>或<code>false</code>.</p>
19+
<h3>使用</h3>
20+
<pre>Mobilebone.captureForm = false;</pre>
21+
<h3>效果</h3>
22+
<p>如果按照上面的设置，页面上所有的<code>&lt;form&gt;</code>表单提交会走原生<code>submit</code>提交，除非有<code>data-ajax="true"</code>重置。</p>
23+
<h3>其他说明</h3>
24+
<ul>
25+
<li>此为全局设置，会影响整个页面<code>&lt;form&gt;</code>表单<code>submit</code>行为。但是可以设置<code>data-ajax</code>的值为<code>true</code>还是<code>false</code>做局部重置。</li>
26+
</ul>
27+
</div>
28+
</div>
29+
30+
<script src="../src/mobilebone.js"></script>
31+
<script>
32+
Mobilebone.captureForm = false;
33+
window.navKey = "captureForm";
34+
</script>
35+
<script src="nav.js"></script>
36+
<script src="docs.js"></script>
37+
</body>
38+
</html>

‎docs/Mobilebone.submit.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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.submit</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.submit(formElement)</h2>
16+
<p>让表单元素告别原生<code>submit</code>提交，走Mobilebone的<code>ajax</code>提交方法，并根据返回结果执行对应的过场效果。</p>
17+
<h3>参数</h3>
18+
<ul>
19+
<li><strong>formElement</strong> <code>&lt;form&gt;</code>表单元素。必须参数。</li>
20+
</ul>
21+
<h3>返回值</h3>
22+
<p>-</p>
23+
<h3>使用示例</h3>
24+
<pre>Mobilebone.submit(document.querySelector("form"));</pre>
25+
</div>
26+
</div>
27+
28+
<script src="../src/mobilebone.js"></script>
29+
<script>
30+
Mobilebone.captureLink = false;
31+
window.navKey = "submit";
32+
</script>
33+
<script src="nav.js"></script>
34+
<script src="docs.js"></script>
35+
</body>
36+
</html>

‎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.rootTransition", "Mobilebone.mergeCallback", "Mobilebone.classPage", "Mobilebone.classMask", "Mobilebone.pushStateEnabled", "Mobilebone.transition()", "Mobilebone.getCleanUrl()", "Mobilebone.getPage()", "Mobilebone.createPage()", "Mobilebone.getFunction()", "Mobilebone.ajax()", "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.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) {
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": "1.1.8",
3+
"version": "1.2.0",
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: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
*
4141
* @type string
4242
**/
43-
Mobilebone.VERSION = '1.1.8';
43+
Mobilebone.VERSION = '1.2.0';
4444

4545
/**
4646
* Whether catch attribute of href from element with tag 'a'
@@ -442,10 +442,20 @@
442442
create = null;
443443

444444
// do transition
445-
this.transition(create_page, current_page, {
445+
var optionsTransition = {
446446
response: response || dom_or_html,
447447
id: this.getCleanUrl(element_or_options) || create_page.id || ("unique" + Date.now())
448-
});
448+
};
449+
// 'if' statement below added on v2.0.0
450+
if (typeof options == "object") {
451+
if (typeof options.history != "undefined") {
452+
optionsTransition.history = options.history;
453+
}
454+
if (typeof options.remove != "undefined") {
455+
optionsTransition.remove = options.remove;
456+
}
457+
}
458+
this.transition(create_page, current_page, optionsTransition);
449459
};
450460

451461
/**
@@ -589,6 +599,11 @@
589599
params.error.call(params, xhr, xhr.status);
590600
}
591601
} else if (params.dataType == "unknown") {
602+
// ajax send by url
603+
// no history hush
604+
// no element remove
605+
params.history = false;
606+
params.remove = false;
592607
try {
593608
// as json
594609
response = JSON.parse(xhr.response);
@@ -862,6 +877,7 @@
862877
popup();
863878
return element;
864879
};
880+
865881
/**
866882
* privatemethod: convert query string to key-value object
867883
**/
@@ -892,11 +908,17 @@
892908
**/
893909
window.addEventListener("popstate", function() {
894910
var hash = location.hash.replace("#&", "").replace("#", "");
911+
if (hash == "") return;
895912

896913
var page_in = store[hash];
897914

898915
if (!page_in) {
899916
if(isSimple.test(hash) == false) {
917+
// as a url
918+
Mobilebone.ajax({
919+
url: hash,
920+
dataType: "unknown"
921+
});
900922
return;
901923
}
902924
page_in = document.querySelector("#" + hash)
@@ -905,7 +927,6 @@
905927
var page_out = document.querySelector(".in." + Mobilebone.classPage);
906928

907929
if ((page_in && page_in == page_out) || Mobilebone.pushStateEnabled == false) return;
908-
909930

910931
// hash ↔ id
911932
if (page_in) {

‎test/ajax-html/b.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html>
2+
<head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4+
<title>b页面</title>
5+
</head>
6+
7+
<body>
8+
<div class="page out">
9+
<ul>
10+
<li><a href="c.html">此为b页面，点击加载c页面</a></li>
11+
</ul>
12+
</div>
13+
</body>
14+
</html>

‎test/ajax-html/c.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html>
2+
<head>
3+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
4+
<title>c页面</title>
5+
</head>
6+
7+
<body>
8+
<div class="page out">
9+
<ul>
10+
<li><a href="#pageHome" data-rel="back">c页面，直接刷新，浏览器返回</a></li>
11+
</ul>
12+
</div>
13+
</body>
14+
</html>

‎test/ajax-html/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121
<ul>
2222
<li><a href="ajax-without-page.html" data-title="纯a标签元素返回页面">点击加载-返回不含page, 自动创建page</a></li>
2323
</ul>
24+
<ul>
25+
<li><a href="b.html">连续加载测试-加载b页面</a></li>
26+
</ul>
2427
<ul>
2528
<li><a href="../index.html" data-ajax="false">&laquo; 返回测试引导首页</a></li>
2629
</ul>

‎test/form-submit/submit.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
echo '<div class="p10">
1010
<p>提交的用户名是：'. $username .'</p>
1111
<p>提交的手机号是：'. $tel .'</p>
12-
<ul><li><a href="index.html" data-ajax="false">刷新至初始态</a></li></ul>
13-
</div>';
12+
</div>
13+
<ul><li><a href="index.html" data-ajax="false">刷新至初始态</a></li></ul>';
1414
?>

0 commit comments

Comments
 (0)