快捷導航

javascript實現(xiàn)導航欄分頁效果

更新時間：2019年06月27日 17:11:56 作者：''''''''馬賽克''''''''

這篇文章主要為大家詳細介紹了javascript實現(xiàn)導航欄分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)導航欄分頁效果的具體代碼，供大家參考，具體內(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ù)為擴展插件父級及參數(shù)
function init(dom, args) {
 // 如果當前顯示頁數(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ù)當前頁數(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ào)用fillHtml填入?yún)?shù) 修改當前的顯示值
function bindEvent(obj, args) {
 //點擊頁碼
 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方法擴展插件 將插件擴展到j(luò)query的原型上 擴展實例插件
$.fn.createPage = function (options) {
 // 拼接參數(shù) 即如果調(diào)用插件未傳入?yún)?shù)選用默認參數(shù) 
 // 如果傳入?yún)?shù) 利用傳入?yún)?shù)覆蓋默認參數(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,// 默認選中頁數(shù)
 // 點擊選中頁數(shù)后 回調(diào)
 backFn: function (p) {
 }
})

4、效果圖