您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)javascript實現(xiàn)導(dǎo)航欄分頁效果的方法的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
1、結(jié)構(gòu)搭建HTML代碼
<div class="page"></div>
2、頁面修飾的css樣式代碼
.page{ width:500px;margin:100px auto;color: #ccc; }.page a{ display: inline-block;color: #428bca;height: 25px; line-height: 25px;padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle; }.page a:hover{ border: 1px solid #428bca; }.page .current{ display: inline-block;height: 25px;line-height: 25px; padding: 0 10px;margin: 0 2px;color: #fff; background-color: #428bca;border: 1px solid #428bca; border-radius: 4px;vertical-align: middle; }.page .disabled{ display: inline-block;height: 25px;line-height: 25px; padding: 0 10px;margin: 0 2px;color: #bfbfbf; background: #f2f2f2;border: 1px solid #bfbfbf; border-radius: 4px;vertical-align: middle; }
3、js代碼
// 入口函數(shù) 接收參數(shù)為擴(kuò)展插件父級及參數(shù) function init(dom, args) { // 如果當(dāng)前顯示頁數(shù)小于總頁數(shù) if (args.current <= args.pageCount) { // 填充html頁面內(nèi)容 fillHtml(dom, args); // 綁定事件 bindEvent(dom, args); } else { alert('請輸入正確頁數(shù)') } } function fillHtml(dom, args) { // 清空dom元素 dom.empty(); //上一頁 if (args.current > 1) { dom.append('<a href = "#" class="prevPage">上一頁</a>'); } else { dom.remove('.prevPage'); dom.append('<span class="disabled">上一頁</span>'); } //中間頁數(shù) if (args.current != 1 && args.current >= 4 && args.pageCount != 4) { dom.append('<a href = "#" class="tcdNumber">' + 1 + '</a>'); } if (args.current - 2 > 2 && args.current <= args.pageCount && args.pageCount > 5) { dom.append('<span>...</span>'); } // 中間頁數(shù)利用循環(huán)生成 var start = args.current - 2; var end = args.current + 2; for (; start <= end; start++) { if (start <= args.pageCount && start >= 1) { if (start != args.current) { dom.append('<a href = "#" class="tcdNumber">' + start + '</a>'); } else { dom.append('<span class="current">' + start + '</span>'); } } } // 判斷臨界值插入省略號 if (args.current + 2 < args.pageCount - 1 && args.pageCount > 5) { dom.append('<span>...</span>') } // 將中間數(shù)值插入html內(nèi)容中 if (args.current != args.pageCount && args.current < args.pageCount - 2 && args.pageCount != 4) { dom.append('<a href="#" rel="external nofollow" class="tcdNumber">' + args.pageCount + '</a>'); } //下一頁 根據(jù)當(dāng)前頁數(shù)確定按鈕顯示狀態(tài) if (args.current < args.pageCount) { dom.append('<a href = "#" class="nextPage">下一頁</a>'); } else { dom.remove('.nextPage'); dom.append('<span class="disabled">下一頁</span>'); } } // 點(diǎn)擊事件 點(diǎn)擊每一頁相當(dāng)于重新調(diào)用fillHtml填入?yún)?shù) 修改當(dāng)前的顯示值 function bindEvent(obj, args) { //點(diǎn)擊頁碼 obj.on('click', '.tcdNumber', function () { var current = parseInt($(this).text()); changePage(obj, args, current); }) //上一頁 // a.prevPage 規(guī)定只能添加到指定的子元素上的事件處理程序 obj.on('click', '.prevPage', function () { var current = parseInt(obj.children('.current').text()); changePage(obj, args, current - 1); }) //下一頁 obj.on('click', '.nextPage', function () { var current = parseInt(obj.children('.current').text()); changePage(obj, args, current + 1); }) } // 改變html內(nèi)容 function changePage(dom, args, page) { fillHtml(dom, { 'current': page, 'pageCount': args.pageCount }); if (typeof (args.backFn == "function")) { args.backFn(page); } } // 利用jquery中的extend方法擴(kuò)展插件 將插件擴(kuò)展到j(luò)query的原型上 擴(kuò)展實例插件 $.fn.createPage = function (options) { // 拼接參數(shù) 即如果調(diào)用插件未傳入?yún)?shù)選用默認(rèn)參數(shù) // 如果傳入?yún)?shù) 利用傳入?yún)?shù)覆蓋默認(rèn)參數(shù) var args = $.extend({ pageCount: 5, current: 2, backFn: function () { } }, options); init(this, args)// 調(diào)用入口函數(shù) } // 調(diào)用插件 傳入?yún)?shù) $('.page').createPage({ pageCount: 13,// 總頁數(shù) current: 3,// 默認(rèn)選中頁數(shù) // 點(diǎn)擊選中頁數(shù)后 回調(diào) backFn: function (p) { } })
4、效果圖
感謝各位的閱讀!關(guān)于“javascript實現(xiàn)導(dǎo)航欄分頁效果的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。