使用JQuery實(shí)現(xiàn)的分頁(yè)插件分享
一個(gè)簡(jiǎn)單的jQuery分頁(yè)插件,兼容AMD規(guī)范和requireJS.
/** * jQuery分頁(yè)插件 * */ ;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ], factory); } else { // 全局模式 factory(jQuery); } }(function ($) { //定義MyPagePlugin的構(gòu)造函數(shù) MyPagePlugin = function(ele, option) { // this.viewHtml="<nav><ul class='pagination'><li><a id='firstPageli'>«</a></li><li><a id='prevPageli'>‹</a></li><li class='active'><a>第<span id='curPageNoSpan'></span>頁(yè),共<span id='allPageCountSpan'></span>頁(yè)</a></li><li><a id='nextPageli'>›</a></li><li><a id='lastPageli'>»</a></li></ul></nav>"; this.viewHtml= "<div class='pageplugin'><a class='first firstPageli'>«</a><a class='previous prevPageli'>‹</a><a class='present'>第<span class='curPageNoSpan'></span>頁(yè),共<span class='allPageCountSpan'></span>頁(yè)</a><a class='next nextPageli'>›</a><a class='last lastPageli'>»</a></div>" this.$element = ele; /**參數(shù):page:當(dāng)前頁(yè),pageCount:總共頁(yè)數(shù),onPaged回調(diào)函數(shù),回調(diào)函數(shù)會(huì)傳入頁(yè)數(shù)*/ this.defaults = { page:1, pageCount:1, onPaged:function(pageNo){} }; this.options = $.extend({}, this.defaults, option); } //定義MyPagePlugin的方法 MyPagePlugin.prototype = { initPlugin:function(){ this.$element.empty(); this.$element.append(this.viewHtml); this.options.onPaged(this.options.page);//初始化 this.$element.find(".curPageNoSpan").text(this.options.page); this.$element.find(".curPageNoSpan").data("options",this.options); this.$element.find(".allPageCountSpan").text(this.options.pageCount); this.$element.find(".firstPageli").on("click",function(e){ var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(); curNo=parseInt(curNo); if(curNo==1){ return false; }else{ $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(1); $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(1); } return false; }); this.$element.find(".prevPageli").on("click",function(e){ var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(); curNo=parseInt(curNo); if(curNo==1){ return false; }else{ $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo-1); $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo-1); } return false; }); this.$element.find(".nextPageli").on("click",function(e){ var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(); curNo=parseInt(curNo); var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text(); pageCount=parseInt(pageCount); if(curNo==pageCount){ return false; }else{ $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo+1); $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo+1); } return false; }); this.$element.find(".lastPageli").on("click",function(e){ var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(); curNo=parseInt(curNo); var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text(); pageCount=parseInt(pageCount); if(curNo==pageCount){ return false; }else{ $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(pageCount); $(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(pageCount); } return false; }); } } $.fn.pagePlugin = function (option) { var pagePlugin=new MyPagePlugin(this,option); pagePlugin.initPlugin(); }; }));
CSS
.pageplugin { display: inline-block; border: 1px solid #CDCDCD; border-radius: 3px; } .pageplugin a { cursor: pointer; display: block; float: left; width: 20px; height: 20px; outline: none; border-right: 1px solid #CDCDCD; border-left: 1px solid #CDCDCD; color: #767676; vertical-align: middle; text-align: center; text-decoration: none; font-weight: bold; font-size: 16px; font-family: Times, 'Times New Roman', Georgia, Palatino; background-color: #f7f7f7; /* ATTN: need a better font stack background-color: #f7f7f7; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey)); background-image: -webkit-linear-gradient(#f3f3f3, lightgrey); background-image: linear-gradient(#f3f3f3, lightgrey); */} .pageplugin a:hover, .pageplugin a:focus, .pageplugin a:active { color:#0099CC; background-color: #cecece; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #cecece)); background-image: -webkit-linear-gradient(#e4e4e4, #cecece); background-image: linear-gradient(#e4e4e4, #cecece); } .pageplugin a.disabled, .pageplugin a.disabled:hover, .pageplugin a.disabled:focus, .pageplugin a.disabled:active { background-color: #f3f3f3; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey)); background-image: -webkit-linear-gradient(#f3f3f3, lightgrey); background-image: linear-gradient(#f3f3f3, lightgrey); color: #A8A8A8; cursor: default; } .pageplugin a:first-child { border: none; border-radius: 2px 0 0 2px; } .pageplugin a:last-child { border: none; border-radius: 0 2px 2px 0; } .pageplugin .present { float: left; margin: 0; padding: 0; width: 120px; height: 20px; outline: none; border: none; vertical-align: middle; text-align: center; }
jquery分頁(yè)插件cypager
cypager是網(wǎng)友分享到JquerySchool網(wǎng)站上的一款作品,非常實(shí)用,經(jīng)過(guò)測(cè)試,插件兼容 IE8+,Chrome,Firefox 瀏覽器,核心文件僅 5KB。。。
調(diào)用方式
由于是 jquery插件,所以在引人 cypager.min.js 之前,要引人 jquery.min.js 本人使用的是 1.7.2 版本的,低版本的沒(méi)試過(guò)。
引入css : <link rel="stylesheet" href="css/cypager.min.css" />
引人js : <script type="text/javascript" src="js/cypager.min.js"/>
$(function(){ $("#pagerArea").cypager({pg_size:10,pg_nav_count:8,pg_total_count:194,pg_call_fun:function(count){ alert("跳轉(zhuǎn)至頁(yè)面:"+count+""); }}); });
參數(shù)說(shuō)明
pgerId //插件的ID 默認(rèn) : cy_pager
pg_size //每頁(yè)顯示記錄數(shù) 默認(rèn):10條
pg_cur_count //當(dāng)前頁(yè)數(shù)(如果需要默認(rèn)顯示指定頁(yè)面,則設(shè)置)
pg_total_count //總記錄數(shù)
pg_nav_count //顯示多少個(gè)導(dǎo)航數(shù) 默認(rèn):7個(gè)
pg_prev_name //上一頁(yè)按鈕名稱(默認(rèn):PREV)
pg_next_name //下一頁(yè)按鈕名稱 (默認(rèn):NEXT)
pg_call_fun(page_count) //回調(diào)函數(shù),點(diǎn)擊按鈕執(zhí)行
高效JQUERY分頁(yè)插件源代碼JQUERY.PAGER.JS
本文將給大家分享一個(gè)非常不錯(cuò)的分頁(yè)插件、jQuery.pager.js、該插件的優(yōu)點(diǎn)是可以內(nèi)容索引、使用了jQuery、也同時(shí)調(diào)用了jquery.pager.js文件、分頁(yè)都是基于Ajax的、當(dāng)然、如果你不打算使用Ajax來(lái)實(shí)現(xiàn)分頁(yè)的話、那么你最好不要使用本插件、若使用的話反而很麻煩、本插件主要是為使用Ajax技術(shù)交互的網(wǎng)站所準(zhǔn)備、可以很方便的嵌入到網(wǎng)站系統(tǒng)中、實(shí)現(xiàn)Ajax分頁(yè)功能、如果大家覺(jué)得這個(gè)效果不是很好看的話、可以自己重寫分頁(yè)按鈕的樣式哈
HTML代碼很簡(jiǎn)單、只要準(zhǔn)備一個(gè)用于分頁(yè)代碼的DIV就可以了
<div class="tcdPageCode"></div>
通過(guò)jQuery的方式調(diào)用即可
$(".tcdPageCode").createPage({ pageCount:6, current:1, backFn:function(p){ console.log(p); } });
- jQuery Pagination Ajax分頁(yè)插件(分頁(yè)切換時(shí)無(wú)刷新與延遲)中文翻譯版
- jquery分頁(yè)插件jquery.pagination.js使用方法解析
- Jquery 分頁(yè)插件之Jquery Pagination
- 最實(shí)用的jQuery分頁(yè)插件
- 分享一個(gè)自己動(dòng)手寫的jQuery分頁(yè)插件
- Ajax分頁(yè)插件Pagination從前臺(tái)jQuery到后端java總結(jié)
- jQuery ajax分頁(yè)插件實(shí)例代碼
- 基于bootstrap3和jquery的分頁(yè)插件
- jQuery插件分享之分頁(yè)插件jqPagination
- jquery ajax分頁(yè)插件的簡(jiǎn)單實(shí)現(xiàn)
- jquery+css3打造一款ajax分頁(yè)插件(自寫)
- jQuery實(shí)現(xiàn)的分頁(yè)插件完整示例
相關(guān)文章
防止jQuery ajax Load使用緩存的方法小結(jié)
本篇文章主要是對(duì)防止jQuery ajax Load使用緩存的方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02使用CSS樣式position:fixed水平滾動(dòng)的方法
這篇文章主要介紹了使用CSS樣式position:fixed水平滾動(dòng)的方法,需要的朋友可以參考下2014-02-02基于JQuery實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
這篇文章主要為大家詳細(xì)介紹了基于JQuery實(shí)現(xiàn)圖片輪播效果,利用Jquery制作焦點(diǎn)圖左右輪播特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02jQuery 中$(this).index與$.each的使用指南
這篇文章主要介紹了jQuery 中$(this).index與$.each的使用方法,以及使用環(huán)境,有需要的小伙伴自己參考下吧2014-11-11關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧
本篇文章介紹了,關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧。需要的朋友參考下2013-04-04使用JQuery實(shí)現(xiàn)智能表單驗(yàn)證功能
表單驗(yàn)證功能在項(xiàng)目中經(jīng)常會(huì)用得到,接下來(lái)給大家介紹使用jquery實(shí)現(xiàn)智能表單驗(yàn)證功能實(shí)例代碼,對(duì)jquery實(shí)現(xiàn)表單驗(yàn)證功能相關(guān)資料感興趣的朋友一起學(xué)習(xí)吧2016-03-03jquery zTree異步加載簡(jiǎn)單實(shí)例分享
Ztree是一個(gè)使用jQuery實(shí)現(xiàn)的JSP頁(yè)面的各種功能樹(shù),本文介紹一個(gè)異步獲取數(shù)據(jù)到下拉樹(shù)的實(shí)現(xiàn)方式,感興趣的朋友可以了解下,或許對(duì)你學(xué)習(xí)ztree有所幫助2013-02-02