單篇文章JS類比分頁

標籤：style   blog   http   color   使用   strong   資料   io   

廢話部分

        前兩天做了一個前台分頁外掛程式，支援ajax讀取資料繫結前台 和 url帶頁碼參數跳轉兩種方式。於是稍加改動，做了一個單篇文章js類比分頁的代碼，為什麼說是類比分頁呢？因為在伺服器響應HTML請求的時候，就已經把全文回傳給用戶端了，只是我們通過js的方式，把全文隱藏，每次翻頁至顯示出我們需要的那一部分，而不是真正的按需要去發出HTML請求。所以，在做這個外掛程式的時候去掉了ajax請求的功能及其附帶參數，去掉了pageSize參數（恒等於1）。這裡就不討論具體的技術細節了和上一篇的分頁計算原理大致相同，有興趣的同學可以移步：http://www.cnblogs.com/webconfig/p/3864350.html，這裡不再贅述。

 

再來看張完整的

 

基本思路

當頁面中的本文文章部分的下面載入JS，通過指定好的ID，把本文內容儲存在 分頁對象（全域變數） 的一個屬性中，首次載入當前頁為1，Load() 方法中只有一個 分頁對象的參數，以後每次翻頁 Load() 方法中多加一個當前頁參數，然後JS 取值 計算 填充容器。

 

調用方法

引入樣式和Jquery和分頁外掛程式

1 <script src="jquery-1.11.1.min.js"></script>2 <script src="ruguoTextPager_1.0.js"></script>3 <link rel="stylesheet" type="text/css" href="ruguoPager.css">

 

HTML結構  con中為本文內容，在需要分頁的地方插入我自訂的分頁符“ {ruguo:pager} ”，至於如果文中真的要出現這個字串的話，請轉義。

1 <div class="con" id="con">2 <p>段落1</p>{ruguo:pager}3 <p>段落1</p>4 <p>段落1</p>{ruguo:pager}5 <p>段落1</p>6 </div>7 <div class="ruguoPager_red" id="pager"></div>

JS 初始化  執行個體化對象 pager，給對象需要自訂的屬性賦值，不賦值的等於預設值，最後調用方法，對象作為實參傳進去即可。

 1 <script> 2 var pager = new ruguoPager(); 3 pager.objName="pager"; 4 pager.pagerID="pager"; 5 pager.txtID="con"; 6 pager.toPoint="con" 7 pager.showPageCount=3; 8 pager.currPage=1; 9 ruguoPagerLoad(pager);10 </script>

 

參數列表（參數名  預設值  含義  可選值  是否必須）

sig="{ruguo:pager}",   //分頁符 stringobjName="",   //對象名  stringpagerID="",  //分頁容器ID  string  必須txtID="",  //本文容器ID  string  必須currPage=1,  //當前頁  intitemCount=0,  //總分段（頁）數    無需定義，曆史遺留問題showPageCount="3";  //頁面顯示數量  inttoPoint="",  //點擊返回錨點名稱  stringcontents="",  //本文內容，一般情況下無需定義 isShowFirstPage="always",  //是否顯示首頁  always,auto,noneisShowPreviousPage="always",   //是否顯示上一頁  always,auto,noneisShowNextPage="always",  //是否顯示下一頁  always,auto,noneisShowLastPage="always",  //是否顯示尾頁  always,auto,noneisShowPages="always",  //是否顯示頁碼  always,auto_0,auto_1,noneisShowAll="always",   //是否顯示全文  always,auto,noneisShowGo="always"  //是否顯示跳轉  always,auto,none

 

 總結

通過編寫這段代碼學到了一些新東西，總結如下：

1，在JS中，replace一次只能替換第一個，若想替換所有需要用Regex或者用迴圈。

2，在JS中，split() 方法不僅適用於字元分割，同樣適用於字串。

3，在JS中，判斷一個變數是否是數字類型，可以使用isNaN()，傳回值為true代表不是數字。

4，本人才疏學淺，寫代碼純屬業餘興趣愛好，還望跟各位大神多多學習，存在的問題或者是更好的解決方案，還請不吝賜教，協助我完善外掛程式，網上成熟的外掛程式有很多，本人獻醜不敢說分享勞動成果工，只能說在學習中遇到的問題拿來給暫時還沒有遇到的人，少走一些彎路，同時滿足一下自己小小的成就感，僅此而已。

 

代碼與文章都是博主辛苦一點一點碼出來的，請尊重博主辛勤勞動，歡迎轉載，轉載請註明出處，更多交流請關注 D調碼農的筆記簿 http://www.cnblogs.com/webconfig

 

相關文檔下載

：http://files.cnblogs.com/webconfig/ruguoTextPager.rar