在年初的時(shí)候給一個(gè)用戶做網(wǎng)站用到了一個(gè)輸入頁碼跳轉(zhuǎn)的功能，用戶如果需要跳轉(zhuǎn)到那一頁只需在輸入框中輸入相應(yīng)的頁面點(diǎn)擊確定就可以跳轉(zhuǎn)到指定頁面，這個(gè)功能非常棒吧，下面就看看如何使用 php 和 jquery 來實(shí)現(xiàn)這個(gè)功能。當(dāng)然我之前自己寫的那個(gè)是用 JS 實(shí)現(xiàn)的功能也比較簡(jiǎn)單，今天在看到這個(gè) jquery 版的寫的很不錯(cuò)，在這里分享給大家。

導(dǎo)航代碼

下面的頁碼輸出函數(shù)顯示出來的效果見上圖：

function chenxing_pagenavi() {

global $wp_query, $wp_rewrite;

$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;

$pagination = array(

'base' => esc_url_raw( str_replace( 999999999, '%#%', get_pagenum_link( 999999999, false ) ) ),

'format' => ",

'total' => $wp_query->max_num_pages,

'current' => $current,

'show_all' => false,

'type' => 'plain',

'end_size'=>'1',

'mid_size'=>'3',

'prev_text' => '上一頁',

'next_text' => '下一頁'

);

$total_pages = $wp_query->max_num_pages;

if( !emptyempty($wp_query->query_vars['s']) )

$pagination['add_args'] = array('s'=>get_query_var('s'));

echo '

';

echo '

第'.$current.'/'.$total_pages.'頁,共'.$wp_query->found_posts.'個(gè)結(jié)果';

if($total_pages>1){

echo '

跳轉(zhuǎn)至：第

頁

確認(rèn)

';

}

echo '

';

if ( $current !=1 ) {

echo '首頁';

}

echo paginate_links($pagination);

if ( $current < $total_pages ) {

echo '尾頁';

}

echo '

';

echo '

';

}

大家可以根據(jù)自己的需要修改上面的代碼來改變輸出的格式，在需要顯示的位置加上<?php chenxing_pagenavi(); ?>進(jìn)行調(diào)用，再以 css 修飾前臺(tái)的布局就 OK 了，下面我們還要實(shí)現(xiàn)跳轉(zhuǎn)的功能。

jQuery 代碼

既然是輸入頁碼跳轉(zhuǎn)，那肯定要用到 js。下面的 js 代碼來自阿樹博客，請(qǐng)將 js 代碼加入到 js 文件中即可，當(dāng)然需要 jquery 支持。思路很簡(jiǎn)單，就是在點(diǎn)擊“跳轉(zhuǎn)”按鈕的時(shí)候，獲取輸入的頁碼，再獲取任意一個(gè)頁碼鏈接，將頁碼數(shù)字替換掉即可。本教程的頁碼鏈接類型為：http://www.qq301/******/page/4 這種，如果你的不是這種，請(qǐng)修改下面 js 里面的頁碼替換部分。

jQuery(document).ready( function($){

//.page_nav a.go_btn為確認(rèn)按鈕，點(diǎn)擊執(zhí)行

$('.page_nav a.go_btn').on('click',function(event){

event.preventDefault(); //取消默認(rèn)動(dòng)作

page_input = $('#page_input'); //獲取輸入框的值

page_max = page_input.attr('max'); //獲取輸入框中的max屬性的值，就是最大頁碼

if(page_input.val()=="){

alert('請(qǐng)輸入頁碼');

return false;

}

if((page_input.val()<1) || (page_input.val()>page_max)){

alert('請(qǐng)輸入1至' + page_max + '之間的數(shù)字');

return false;

}

page_links = $('.page-nav a').eq(1).attr('href'); //從頁碼列表中獲取任意一個(gè)鏈接,此處獲取第一個(gè)鏈接

go_link = page_links.replace(/\/page\/([0-9]{1,})/g, '/page/'+page_input.val()); //將頁碼數(shù)字替換

location.href = go_link; //跳轉(zhuǎn)

});

$.fn.onlyNum = function onlyNum() {

$(this).keypress(function (event) {

var eventObj = event || e;

var keyCode = eventObj.keyCode || eventObj.which;

if ((keyCode >= 48 && keyCode <= 57))

return true;

else

return false;

}).focus(function () {

//禁用輸入法

this.style.imeMode = 'disabled';

}).bind("paste", function () {

//獲取剪切板的內(nèi)容

var clipboard = window.clipboardData.getData("Text");

if (/^\d+$/.test(clipboard))

return true;

else

return false;

});

};

//#page_input為頁碼輸入框

$('#page_input').onlyNum();

});

這段 jQuery 已經(jīng)集成了對(duì)應(yīng)的分頁跳轉(zhuǎn)功能以及讓輸入框只能輸入數(shù)字的限制，這樣用戶體驗(yàn)應(yīng)該會(huì)比較棒。

總結(jié)

以上是生活随笔為你收集整理的html输入页码跳转,WordPress分页导航添加输入页码跳转功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。