现在很多网站都使用了单页无刷新效果，这里自己也封装了一个类似 PJAX 的jquery插件(支持浏览器前进后退按钮及url地址更改不跳转，同时支持低版本浏览器),方便以后在项目中应用或参考,在测试的时候注意自己的本地路径，这里采用了ajax所以不能直接点击打开，必须得在本地服务器下执行 , 注意打开的时候必须以你的默认地址打开比如：http://localhost/onePage/
效果图:
文件目录：
index.html 为首页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<title>单页插件</title>
<style>
.op{color:orangered;}
li{line-height:20px;}
h1{font-size:1em;}
</style>
</head>
<body>
<div id="onePage">
<h1><a href="http://localhost/onePage/">首页</a></h1>
<ul>
<li><a href="/page1/1.html">1-1</a></li>
<li><a href="/page1/2.html">1-2</a></li>
<li><a href="/page2/1.html">2-1</a></li>
<li><a href="/page2/2.html">2-2</a></li>
</ul>
<div data-content>
默认首页内容...
</div>
</div><!--onePage-->
<script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
<script src="js/jquery.ba-hashchange.js"></script>
<script src="js/onePage.js"></script>
<script>
$(function(){
$('#onePage').onePage({
dUrl : 'http://localhost/onePage/', //这里需要填写你的域名(*必填项)
goHome : function(){
//这里需要自己配置一下首页要执行的内容
console.log('请自行加载首页内容，这里便回到默认状态...');
$('#onePage').find('div[data-content]').html('默认首页内容...') ;
$('#onePage').find('a').removeClass('op');
} ,
callBack : function(data){
//这里是 DOM 操作区域，可以自己定义修改，这里只是 demo
$('#onePage').find('div[data-content]').html( data ) ;
}
});
});
</script>
</body>
</html>
jquery.ba-hashchange.js 为了解决低版本浏览器不支持 onhashchage 事件的 jquery 插件,详情查看官网信息
/*
* jQuery hashchange event - v1.3 - 7/21/2010
* http://benalman.com/projects/jquery-hashchange-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
onePage.js
/***
1、此插件适用于单页模式网站，即无刷新;
2、注意的是插件参数 dUrl 为自己的一级域名，这个是必须得填写的，因为方便于程序的操作*;
3、a 链接为自己的目录文件的html 或者是 json 数据，如果是json 数据的话，那么必须得在插件参数 callBack 中设置 DOM 插入的内容;
4、插件参数 goHome 回调为回到首页的操作;
5、如果需要加入loading 的一些操作，那么你可以找到ajax中 beforeSend 和 success 函数添加你需要的代码;
6、关于 a 链接的 ajax 配置需要与后端沟通，当然此插件可能在项目中有些不足，可以自行修改，添加你想要的功能代码都是可以的;
***/
;(function ($) {
$.fn.onePage = function (opt) {
var def = {
dUrl: 'http://localhost/onePage/', //你的默认域名
goHome: function () {}, //返回按钮操纵的时候网址回到首页要操纵的事件
callBack: function () {} //这里是获取到 ajax 数据之后执行的操作
};
opt = $.extend(def, opt);
this.each(function () {
var THAT = $(this),
NODE = THAT.find('a'),
CON = THAT.find('div[data-content]'),
HREF = window.location.href,
URL = null;
//获取数据和操作获取数据之后 DOM 的内容 , 如果设置的没有相关的页面
var getDate = function (filePath) {
//防止重复请求ajax
if (URL == filePath) return;
THAT.find('a').removeClass('op');
THAT.find('a[href="' + filePath + '"]').addClass('op');
$.ajax({
type: 'GET',
url: '.' + filePath,
beforeSend: function () {
//这里是加载前执行的东西，可以自定义自己想要的loading
console.log('正在加载的loading效果，需要自己定义');
},
//当获取数据成功之后要做的事情
success: function (data) {
//地址栏操作及不重复请求
window.location.href = '#!' + filePath;
URL = filePath;
//回调函数
opt.callBack(data);
},
error: function () {
//当没有这个url的时候执行的操作
CON.html('404');
}
});
}
//当有事件触发的时候 , a便签被触发
NODE.on('click', function () {
var _this = $(this);
//防止重复加载相同内容
if (_this.hasClass('op')) return false;
//获取href值来操作
var th = _this.attr('href');
//如果是首页链接的话，那么就执行首页操作
if (th == opt.dUrl) {
URL = null;
window.location.href = '#!';
} else {
if (th != undefined) {
getDate(th);
}
}
return false;
});
//避免一些误操作得到的url
var TAIL = HREF.split('#!');
if (HREF.indexOf('#!') != -1 && TAIL[1] != '/' && TAIL[1] != '') {
var result = TAIL[1];
getDate(result);
}
//当地址栏发生改变的时候
$(window).hashchange(function () {
//当直接用 url 在地址栏上访问的时候处理
var optionUrl = window.location.href,
result = optionUrl.split('#!')[1];
//当误操作或直接是首页url的时候
if (optionUrl == opt.dUrl || result == '' || result == '/' || result == undefined) {
URL = null;
opt.goHome();
} else {
getDate(result);
}
return false;
})
});
return this;
}
})(jQuery);
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
