html输入页码跳转,WordPress分页导航添加输入页码跳转功能
在年初的时候给一个用户做网站用到了一个输入页码跳转的功能,用户如果需要跳转到那一页只需在输入框中输入相应的页面点击确定就可以跳转到指定页面,这个功能非常棒吧,下面就看看如何使用 php 和 jquery 来实现这个功能。当然我之前自己写的那个是用 JS 实现的功能也比较简单,今天在看到这个 jquery 版的写的很不错,在这里分享给大家。
导航代码
下面的页码输出函数显示出来的效果见上图:
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 '
';
if($total_pages>1){
echo '
跳转至:第
页
确认
';
}
echo '
if ( $current !=1 ) {
echo '首页';
}
echo paginate_links($pagination);
if ( $current < $total_pages ) {
echo '尾页';
}
echo '
';
echo '
';
}
大家可以根据自己的需要修改上面的代码来改变输出的格式,在需要显示的位置加上<?php chenxing_pagenavi(); ?>进行调用,再以 css 修饰前台的布局就 OK 了,下面我们还要实现跳转的功能。
jQuery 代码
既然是输入页码跳转,那肯定要用到 js。下面的 js 代码来自阿树博客,请将 js 代码加入到 js 文件中即可,当然需要 jquery 支持。思路很简单,就是在点击“跳转”按钮的时候,获取输入的页码,再获取任意一个页码链接,将页码数字替换掉即可。本教程的页码链接类型为:http://www.qq301/******/page/4 这种,如果你的不是这种,请修改下面 js 里面的页码替换部分。
jQuery(document).ready( function($){
//.page_nav a.go_btn为确认按钮,点击执行
$('.page_nav a.go_btn').on('click',function(event){
event.preventDefault(); //取消默认动作
page_input = $('#page_input'); //获取输入框的值
page_max = page_input.attr('max'); //获取输入框中的max属性的值,就是最大页码
if(page_input.val()=="){
alert('请输入页码');
return false;
}
if((page_input.val()<1) || (page_input.val()>page_max)){
alert('请输入1至' + page_max + '之间的数字');
return false;
}
page_links = $('.page-nav a').eq(1).attr('href'); //从页码列表中获取任意一个链接,此处获取第一个链接
go_link = page_links.replace(/\/page\/([0-9]{1,})/g, '/page/'+page_input.val()); //将页码数字替换
location.href = go_link; //跳转
});
$.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 () {
//获取剪切板的内容
var clipboard = window.clipboardData.getData("Text");
if (/^\d+$/.test(clipboard))
return true;
else
return false;
});
};
//#page_input为页码输入框
$('#page_input').onlyNum();
});
这段 jQuery 已经集成了对应的分页跳转功能以及让输入框只能输入数字的限制,这样用户体验应该会比较棒。
html输入页码跳转,WordPress分页导航添加输入页码跳转功能相关推荐
- 《前端》慕课--分页导航(带页码的分页导航)
分页导航(带页码的分页导航),玩转Bootstrap(基础)教程-慕课网 https://www.imooc.com/code/3185 在Bootstrap框架中使用的是ul>li>a ...
- Bootstrap学习笔记——导航条、分页导航
1 导航条 导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...
- Bootstrap系列 -- 44. 分页导航
带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式.平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在B ...
- Bootstrap导航条、分页导航
[导航条navbar] 在bootstrap中导航与导航条在外观方面差不多,但在实际应用时,导航条却要复杂的多. 导航条制作方法: 第一步:首先在制作导航的列表(<ul class=" ...
- Bootstrap(五) 导航条、分页导航
本文转自:http://www.imooc.com/learn/141 导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Boo ...
- html输入页码跳转,如何为WordPress添加输入页码跳转功能?
最近看到有些网站没有输入页码跳转的功能,使用起来不是很方便,我就想用户如果需要跳转到那一页只需在输入框中输入相应的页面点击确定就可以跳转到指定页面,那么如何为WordPress添加输入页码跳转功能?接 ...
- php分页怎么实行跳转,php分页函数,支持页码下拉选择跳转
//分页 if(!function_exists("pageDivide")){ #$total信息总数 #$shownu显示数量,默认20 #$url本页链接 function ...
- 分页输入框跳转 java_displaytag 分页-添加页码输入框跳转至指定页
环境前提:工程引用displaytag-1.2.jar 使用displaytag自动生成的分页 修改分页步骤 1.修改配置文件displaytag.properties 原配置文件:displayta ...
- JS实现动态页码及分页导航
目录 前言 内容 小结 前言 最近的项目需要添加一个分页导航的功能,没有用网上封装好的文件.通过JS自己简单实现了效果.下面和大家分享一下. 内容 下图为首次加载后的效果,默认显示5页, 当点击下一页 ...
最新文章
- html偷拍代码,一段植入木马的html代码
- Confluence 实现公司wiki【转】
- 阿里前CEO卫哲的万字长文:被马云骂醒,看透B2B 10大核心问题!
- 解决vista/win7安装windows live messenger 2011找不到wlidcli.dll及错误800488eb .
- 通过Dapr实现一个简单的基于.net的微服务电商系统(二)——通讯框架讲解
- LeetCode : Word Pattern
- LightOJ 1353 - Paths in a Tree DFS
- 在macOS Sierra 10.12.3下用VMware Fusion安装Ubuntu 16.04.2
- 使用自定义端口连接SQL Server 的方法
- RxJava 的基本使用
- 会话描述协议-SDP
- 极客时间-算法训练营 3.2
- 微软上架激活工具,自己破解自己?
- 关于weight decay
- ALSA驱动框架简介
- skip gram模型的实现
- jira是干什么_JIRA的使用介绍(一)- 概念篇
- 动态规划-不相邻数字之和的最大值
- 用户分析(AARRR)
- I2C中关于ACK和NACK的几点东西
热门文章
- c语言(15 5)是多少,试题五(共 15分) 阅读以下关于 C语言及 C代码的叙述,回答问题 1至..._考试资料网...
- Zookeeper学习提纲:助你一臂之力
- python画一颗小心心
- 水墨风格化matlab,调色进阶篇:如何调出浓水墨风格?
- 宋体六号字是matlab中多大,word中六号宋体对应的是22号字吗?本人运用的软件中只显示字号(10-45),要求六号宋体...
- 数据迁移的高招!两台笔记本电脑怎么互传文件
- swf 文件 打包 exe 方法
- Andr oid 多窗 口编程
- 计算机音乐monster,【MJJ】【MJ音乐汇总系列】Monster 怪物
- 25 Creative Ways to Promote Your App for Free