Skip to content
This repository was archived by the owner on Sep 10, 2020. It is now read-only.

Commit 9a90604

Browse files
ztj1993ztj1993
committed
发布：发布 0.0.1 版本
1 parent 5215fca commit 9a90604

File tree

9 files changed

+304
-0
lines changed

9 files changed

+304
-0
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/dist
2+
.idea

‎README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
## 欢迎使用 jQuery AjaxLoadPage 插件
2+
3+
`jQuery.AjaxLoadPage` 是一款主要解决 Ajax 加载同类型页面的插件，插件支持多个节点绑定，支持替换多个节点。
4+
5+
### 示例文件
6+
[基本示例](https://ztj1993.github.io/jQuery-AjaxLoadPage/demos/index.html)
7+
8+
### 使用说明
9+
`jQuery.AjaxLoadPage` 具体的使用示例可以参考 demos 目录的演示文件。
10+
11+
**首先需要引入文件：**
12+
```
13+
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
14+
<script src="../src/jquery.ajaxloadpage.js"></script>
15+
```
16+
17+
**认识选项：**
18+
19+
| 选项名称 | 类型 | 默认值 | 说明 |
20+
| -------- | ---- | ------ | ---- |
21+
| bindNodes | String | null | 绑定的节点，主要为 A 或者 FORM |
22+
| replaceNodes | Json Object | {} | 替换的节点，键为当前页节点，值为请求页节点 |
23+
| trigger | String | "click submit" | 对 bindNodes 进行事件绑定 |
24+
| before | Callback | None | Ajax 请求前 |
25+
| finished | Callback | None | Ajax 请求完成 |
26+
| error | Callback | None | Ajax 请求错误 |
27+
28+
**插件调用示例**
29+
```
30+
$("body").AjaxLoadPage({
31+
bindNodes: "div.nav1 a, div.nav2 a",
32+
replaceNodes: {
33+
"div.nav2": "div.nav2",
34+
"div.content": "div.content"
35+
},
36+
trigger: "click submit",
37+
before: function () {
38+
console.log('ajax before');
39+
},
40+
finished: function () {
41+
console.log('ajax finished');
42+
},
43+
error: function () {
44+
console.log('ajax error');
45+
}
46+
});
47+
```

‎ajaxloadpage.jquery.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "ajaxloadpage",
3+
"title": "jQuery AjaxLoadPage",
4+
"version": "0.0.1",
5+
"author": {
6+
"name": "ZhangTianJie",
7+
"email": "ztj1993@gmail.com",
8+
"url": "http://www.zhangtianjie.com/"
9+
},
10+
"description": "This is a ajax loading page plugin that supports local refresh.",
11+
"keywords": [
12+
"jquery",
13+
"jquery-plugin",
14+
"jquery-ajax",
15+
"loadpage",
16+
"ajaxloadpage"
17+
],
18+
"homepage": "https://ztj1993.github.io/jQuery-AjaxLoadPage/",
19+
"docs": "https://ztj1993.github.io/jQuery-AjaxLoadPage/",
20+
"bugs": "https://github.com/ztj1993/jQuery-AjaxLoadPage/issues",
21+
"licenses": [
22+
{
23+
"type": "MIT",
24+
"url": "https://github.com/ztj1993/jQuery-AjaxLoadPage/blob/master/LICENSE"
25+
}
26+
],
27+
"main": "src/jquery.ajaxloadpage.js",
28+
"repository": {
29+
"type": "git",
30+
"url": "https://github.com/ztj1993/jQuery-AjaxLoadPage.git"
31+
},
32+
"dependencies": {
33+
"jquery": ">=1.8.3"
34+
}
35+
}

‎demos/index.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>jQuery AjaxLoadPage Demos Index Page</title>
7+
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
8+
<script src="../src/jquery.ajaxloadpage.min.js"></script>
9+
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
10+
<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
11+
<style>
12+
body {
13+
padding: 30px 15px;
14+
}
15+
16+
.ajaxloadpage-content {
17+
text-align: center;
18+
margin-top: 50px;
19+
font-size: 22px;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<ul class="nav justify-content-center ajaxloadpage-indexnav">
25+
<li class="nav-item">
26+
<a class="nav-link disabled" href="#">导航一</a>
27+
</li>
28+
<li class="nav-item">
29+
<a class="nav-link" href="index.html">Index</a>
30+
</li>
31+
</ul>
32+
<ul class="nav nav-pills justify-content-center ajaxloadpage-nav">
33+
<li class="nav-item">
34+
<a class="nav-link disabled" href="#">导航二</a>
35+
</li>
36+
<li class="nav-item">
37+
<a class="nav-link active" href="index.html">Index</a>
38+
</li>
39+
<li class="nav-item">
40+
<a class="nav-link" href="test1.html">Test1</a>
41+
</li>
42+
<li class="nav-item">
43+
<a class="nav-link" href="test2.html">Test2</a>
44+
</li>
45+
</ul>
46+
<div class="ajaxloadpage-content">
47+
这是 Index Page 的内容！
48+
</div>
49+
<script>
50+
$("body").AjaxLoadPage({
51+
bindNodes: ".ajaxloadpage-nav a, .ajaxloadpage-indexnav a",
52+
replaceNodes: {
53+
".ajaxloadpage-nav": ".ajaxloadpage-nav",
54+
".ajaxloadpage-content": ".ajaxloadpage-content"
55+
},
56+
trigger: "click submit",
57+
before: function () {
58+
console.log('ajax before');
59+
},
60+
finished: function () {
61+
console.log('ajax finished');
62+
},
63+
error: function () {
64+
console.log('ajax error');
65+
}
66+
});
67+
</script>
68+
</body>
69+
</html>

‎demos/test1.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>jQuery AjaxLoadPage Demos Test1 Page</title>
7+
</head>
8+
<body>
9+
<ul class="nav justify-content-center ajaxloadpage-indexnav">
10+
<li class="nav-item">
11+
<a class="nav-link disabled" href="#">导航一</a>
12+
</li>
13+
<li class="nav-item">
14+
<a class="nav-link" href="index.html">Index</a>
15+
</li>
16+
</ul>
17+
<ul class="nav nav-pills justify-content-center ajaxloadpage-nav">
18+
<li class="nav-item">
19+
<a class="nav-link disabled" href="#">导航二</a>
20+
</li>
21+
<li class="nav-item">
22+
<a class="nav-link" href="index.html">Index</a>
23+
</li>
24+
<li class="nav-item">
25+
<a class="nav-link active" href="test1.html">Test1</a>
26+
</li>
27+
<li class="nav-item">
28+
<a class="nav-link" href="test2.html">Test2</a>
29+
</li>
30+
</ul>
31+
<div class="ajaxloadpage-content">
32+
这是 Test1 Page 的内容！
33+
</div>
34+
</body>
35+
</html>

‎demos/test2.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<title>jQuery AjaxLoadPage Demos Test2 Page</title>
7+
</head>
8+
<body>
9+
<ul class="nav justify-content-center ajaxloadpage-indexnav">
10+
<li class="nav-item">
11+
<a class="nav-link disabled" href="#">导航一</a>
12+
</li>
13+
<li class="nav-item">
14+
<a class="nav-link" href="index.html">Index</a>
15+
</li>
16+
</ul>
17+
<ul class="nav nav-pills justify-content-center ajaxloadpage-nav">
18+
<li class="nav-item">
19+
<a class="nav-link disabled" href="#">导航二</a>
20+
</li>
21+
<li class="nav-item">
22+
<a class="nav-link" href="index.html">Index</a>
23+
</li>
24+
<li class="nav-item">
25+
<a class="nav-link" href="test1.html">Test1</a>
26+
</li>
27+
<li class="nav-item">
28+
<a class="nav-link active" href="test2.html">Test2</a>
29+
</li>
30+
</ul>
31+
<div class="ajaxloadpage-content">
32+
这是 Test2 Page 的内容！
33+
</div>
34+
</body>
35+
</html>

‎dist/index.html‎

Whitespace-only changes.

‎src/jquery.ajaxloadpage.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
!function ($) {
2+
"use strict";
3+
//变量定义与赋值
4+
var oldUrl = location.href, newUrl, urlData;
5+
//主体方法
6+
var AjaxLoadPage = function (element, options) {
7+
var _this = this;
8+
//默认赋值
9+
_this.options = $.extend({}, AjaxLoadPage.DEFAULTS, options);
10+
//处理打开事件
11+
$(element).on(_this.options.trigger, _this.options.bindNodes, function () {
12+
if (this.tagName === "A") {
13+
newUrl = $(this).attr("href");
14+
urlData = {};
15+
} else if (this.tagName === "FORM") {
16+
newUrl = $(this).attr("action");
17+
urlData = $(this).serialize();
18+
} else {
19+
return false;
20+
}
21+
_this.LoadPage(newUrl, urlData, _this.options);
22+
event.preventDefault();
23+
});
24+
};
25+
//加载页面方法
26+
AjaxLoadPage.prototype.LoadPage = function (url, data) {
27+
var _this = this;
28+
_this.options.before.call();
29+
//Ajax 加载数据
30+
$("<div/>").load(url, data, function (response, status, xhr) {
31+
if (status === "success") {
32+
//替换数据
33+
var parseHTML = $.parseHTML(response);
34+
var jqHTML = $("<div>").append($(parseHTML));
35+
$.each(_this.options.replaceNodes, function (oldNode, newNode) {
36+
$(oldNode).replaceWith(jqHTML.find(newNode));
37+
});
38+
//替换页面状态
39+
history.pushState(null, document.title, oldUrl);
40+
var result, title;
41+
if ((result = response.match(/<title>([\s\S]+)<\/title>/i)) !== null) {
42+
title = result[1];
43+
} else {
44+
title = document.title;
45+
}
46+
document.title = title;
47+
//调用完成方法
48+
_this.options.finished.call();
49+
} else if (status === "error") {
50+
_this.options.error.call(xhr.status);
51+
}
52+
});
53+
};
54+
//默认参数
55+
AjaxLoadPage.DEFAULTS = {
56+
bindNodes: "",
57+
replaceNodes: {},
58+
trigger: "click submit",
59+
before: function () {
60+
},
61+
finished: function () {
62+
},
63+
error: function () {
64+
}
65+
};
66+
var old = $.fn.AjaxLoadPage;
67+
$.fn.AjaxLoadPage = function (option) {
68+
return this.each(function () {
69+
var $this = $(this);
70+
var data = $this.data('AjaxLoadPage');
71+
var options = (typeof option === 'object') && option;
72+
if (!data) $this.data('AjaxLoadPage', (data = new AjaxLoadPage(this, options)));
73+
})
74+
};
75+
$.fn.AjaxLoadPage.Constructor = AjaxLoadPage;
76+
$.fn.AjaxLoadPage.noConflict = function () {
77+
$.fn.AjaxLoadPage = old;
78+
return this;
79+
};
80+
}(jQuery);

‎uglifyjs.bat‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
uglifyjs.cmd src/jquery.ajaxloadpage.js -o dist/jquery.ajaxloadpage.min.js -c -m

0 commit comments

Comments
 (0)