單篇文章JS模擬分頁

廢話部分

效果圖再來看張完整的

基本思路

當頁面中的正文文章部分的下面載入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中為正文內容，在需要分頁的地方插入我自定義的分頁符「」，至於如果文中真的要出現這個字串的話，請轉義。

1
<
div 
class
="con"
id="con"
>
2<
p>段落1
p>
3<
p>段落1
p>
4<
p>段落1
p>
5<
p>段落1
p>
6div
>
7<
div 
class
="ruguopager_red"
id="pager"
>
div>

js 初始化例項化物件 pager，給物件需要自定義的屬性賦值，不賦值的等於預設值，最後呼叫方法，物件作為實參傳進去即可。

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

sig="", //

分頁符 string

objname="", //

物件名 string

pagerid="", //

分頁容器id string 必須

txtid="", //

正文容器id string 必須

currpage=1, //

當前頁 int

itemcount=0, //

總分段（頁）數無需定義，歷史遺留問題

showpagecount="3"; //

頁面顯示數量 int

topoint="", //

點選返回錨點名稱 string

contents="", //

正文內容，一般情況下無需定義

isshowfirstpage="always", //

是否顯示首頁 always,auto,none

isshowpreviouspage="always", //

isshownextpage="always", //

isshowlastpage="always", //

是否顯示尾頁 always,auto,none

isshowpages="always", //

是否顯示頁碼 always,auto_0,auto_1,none

isshowall="always", //

是否顯示全文 always,auto,none

isshowgo="always" //

是否顯示跳轉 always,auto,none

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

1，在js中，replace一次只能替換第乙個，若想替換所有需要用正規表示式或者用迴圈。

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

3，在js中，判斷乙個變數是否是數字型別，可以使用isnan()，返回值為true代表不是數字。

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

--------------------------------------分割線--------------------------------------------

【2023年4月24日更新】

增加當頁數為1頁時，自動隱藏分頁。

單篇文章JS模擬分頁

JS CSS之單篇文章內容分頁

小說旗單篇文章採集

長篇文章分頁

單篇文章JS模擬分頁

JS CSS之單篇文章內容分頁

小說旗 單篇文章採集

長篇文章分頁

相關推薦

小說旗單篇文章採集