jQuery单页应用无刷新插件
现在很多网站都使用了单页无刷新效果，这里自己也封装了一个类似 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);
