封裝好的javascript前端分頁(yè)插件pagination
摘要：
最近在開(kāi)發(fā)項(xiàng)目中又用到了前端分頁(yè)，以前也做過(guò)，為了方便以后使用所以將他封裝成第三方插件，不依賴任何庫(kù)。網(wǎng)上已經(jīng)有很多插件，問(wèn)什么還要自己造輪子？
自己寫的擴(kuò)展性高
不依賴任何庫(kù)
作為一次技術(shù)沉淀
先看下效果圖
安裝方法
首先在頁(yè)面中要載入css及js
<link rel="stylesheet" href="dist/pagination.css">
<script src="dist/pagination.js"></script>
使用示例
pagination({
cur: 1, // 當(dāng)前頁(yè)數(shù)
total: 6, // 總共多少頁(yè)
len: 5, // 分頁(yè)顯示多少
targetId: 'pagination', // 分頁(yè)元素綁定
callback: function() {
// 回調(diào)函數(shù)
}
})
參數(shù)介紹
cur
當(dāng)前頁(yè)數(shù)，每次調(diào)用傳遞當(dāng)前分頁(yè)
total
總共多少頁(yè)，根據(jù)總數(shù)和每頁(yè)顯示數(shù)量可以獲取
len
分頁(yè)欄上顯示的數(shù)量
targetId
分頁(yè)元素綁定的
callback
頁(yè)面渲染完成之后執(zhí)行的函數(shù)，比如事件綁定等。
tips
demo是用的靜態(tài)數(shù)據(jù)，如果調(diào)用服務(wù)端的數(shù)據(jù)，只需將index.js文件中的for循環(huán)改成Ajax請(qǐng)求就可以了。
下載 http://xiazai.jb51.net/201601/yuanma/pagination-master(jb51.net).zip
相關(guān)文章
今天閑來(lái)無(wú)事用js寫了個(gè)數(shù)學(xué)繪圖包，還不算完整，不過(guò)總出現(xiàn)了雛形。2009-04-04
JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能
本篇文章主要是對(duì)JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)拖動(dòng)選擇功能的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
JavaScript ES6中export、import與export default的用法和區(qū)別
這篇文章主要給大家介紹了JavaScript ES6中export、import與export default的用法和區(qū)別，文中介紹的非常詳細(xì)，相信對(duì)大家學(xué)習(xí)ES6會(huì)有一定的幫助，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-03-03
這篇文章主要介紹了webpack中的模式(mode)使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
js replace替換字符串同時(shí)替換多個(gè)方法
這篇文章主要介紹了js replace替換字符串同時(shí)替換多個(gè)方法 的相關(guān)資料,需要的朋友可以參考下2018-11-11
小程序瀑布流組件實(shí)現(xiàn)翻頁(yè)與圖片懶加載
這篇文章主要介紹了小程序瀑布流組件實(shí)現(xiàn)翻頁(yè)與圖片懶加載，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
基于JavaScript實(shí)現(xiàn)大文件上傳后端代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)大文件上傳后端代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
移動(dòng)端翻頁(yè)插件dropload.js（支持Zepto和jQuery）
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端翻頁(yè)插件dropload.js，支持Zepto和jQuery，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
js實(shí)現(xiàn)無(wú)縫循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無(wú)縫循環(huán)滾動(dòng)的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了編程語(yǔ)言JavaScript簡(jiǎn)介,本文講解了JavaScript是什么、JavaScript特點(diǎn)、JavaScript和Java的區(qū)別等內(nèi)容,需要的朋友可以參考下2014-10-10