現在很多網站都使用了單頁無刷新效果，這里自己也封裝了一個類似 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);