//-----------------------------HTML代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上一页下一页插件</title>
<style>
/* css 准备工作 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,span,blockquote,th,td,footer,article,aside,header,section,nav,figure,figcaption,hgroup
{font-family: "微软雅黑","Segoe UI",Helvetica, Arial, sans-serif ;margin:0; padding:0; font-size:13px; text-shadow: none; box-sizing: border-box;color:#333}
table{border-collapse:collapse; border-spacing:0;width: 100%;}
fieldset,img{ border:0;}
address,caption,cite,code,dfn,em,strong,th,var{ font-style:normal;font-weight:normal;}
ol,ul,li,dl,dt,dd{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{ border:0; font-variant:normal;}
sup{vertical-align:text-top;}
sub{ vertical-align:text-bottom;}
input,textarea,select{ font-size:13px;font-weight:inherit;}
legend{color:#333; }
a{text-decoration: none;color:#666;}
a:hover{text-decoration: none;color:#666;}
td{word-break: break-all;}
/* css 准备工作 end */
</style>
<script src="jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="ypagegps.css">
<script src="ypagegps.js"></script>
<script >
$(function(){
//ypage($('#ypagegps01'),currentPage,pageCount);
//currentPage:当前页数；
//pageCount:总页数;
ypage($('#ypagegps01'),1,10);
})
//--上一页/下一页/页面跳转
$(document).on('click','#ypagegps01>.ypagegpsin>b',function(){
var objc=$('#ypagegps01')
var searchtext='';//搜索内容,可为空
var current='';//需要加载页数
var allpage=Number($(objc).find('.ypagegpsin>.num:last').text());//当前总页数
if($(this).hasClass('jump')){
current=Number($(objc).find('input').val());
var num=/^[0-9]*[1-9][0-9]*$/;//正整数
if(!num.test(current)){
alert('请输入大于等于1的正整数');
return;
}
if(current>allpage){
alert('请输入1-'+allpage+'的正整数');
return;
}
}else if($(this).hasClass('num')){//点击页码
current=Number($(this).text());
}else if($(this).hasClass('pre')){
var num=Number($(this).siblings('.num.selected').text());
current=Number(num-1);
}else if($(this).hasClass('next')){
var num=Number($(this).siblings('.num.selected').text());
current=Number(num+1);
}
ypage($(objc),current,20,searchtext);
})
//回车键 enter
$(document).on("keydown", document, function (e) {
var ev = document.all ? window.event : e;
if(ev.keyCode==13) {
//页面跳转
if($('#ypagegps01 input').is(':focus')){
$("#ypagegps01 b.jump").click();
}
}
})
</script>
</head>
<body>
<!--page页码-->
<div id="ypagegps01" class="ypagegps"></div>
</body>
//-----------------------引用的css样式代码ypagegps.css"
.ypagegps{
text-align: center;
line-height: 30px;
text-align: center;
}
.ypagegpsin{
display: inline-block;
overflow: hidden;
}
.ypagegpsin>b , .ypagegpsin>span{
float: left;
width: 34px;
height: 32px;
border: 1px solid #bbb;
margin: 0 3px;
border-radius: 2px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: normal;
color: #999;
background: #fff;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.ypagegpsin>b{
cursor: pointer;
}
.ypagegpsin>b.num{
width: 34px;
}
.ypagegpsin>b.pre , .ypagegpsin>b.next{
width: 60px;
}
.ypagegpsin>b.jump{
width: 50px;
border-left: none;
}
.ypagegpsin>input{
float: left;
width: 50px;
height: 32px;
text-align: center;
margin-right: -3px;
margin-left: 15px;
border: 1px solid #bbb;
color:#999;
}
.ypagegpsin>b.num.selected{
background: #5d5d5d;
color: #fff;
}
.ypagegpsin>b:hover{
background: #5d5d5d;
color: #fff;
}
//----------------引用的js代码ypagegps.js
function ypage(obj,currunt,all){
var pagelis='';
$(obj).empty();
$(obj).append('<div class="ypagegpsin"><input type="text"><b class="jump">跳转</b></div>');
var ypagegpsin=$(obj).children('.ypagegpsin');
if(all<=7){
for(i=0;i<all;i++){
pagelis+='<b class="num">'+(i+1)+'</b>';
}
ypagegpsin.prepend(pagelis);
}else{
pagelis+='<b class="num">1</b>';
if(currunt<=4){
for(i=0;i<5;i++){
pagelis+='<b class="num">'+(i+2)+'</b>';
}
pagelis+='<span>…</span>';
pagelis+='<b class="num">'+all+'</b>';
ypagegpsin.prepend(pagelis);
}else if(currunt>=(all-3)){
pagelis+='<span>…</span>';
for(i=0;i<5;i++){
pagelis+='<b class="num">'+((all-3)+(i-2))+'</b>';
}
pagelis+='<b class="num">'+all+'</b>';
ypagegpsin.prepend(pagelis);
}else{
pagelis+='<span>…</span>';
for(i=0;i<5;i++){
pagelis+='<b class="num">'+(currunt+(i-2))+'</b>';
}
pagelis+='<span>…</span>';
pagelis+='<b class="num">'+all+'</b>';
ypagegpsin.prepend(pagelis);
}
}
for(i=0;i<$(ypagegpsin).children('b').length;i++){
var num=$(ypagegpsin).children('b').eq(i).text();
if(num==currunt){
$(ypagegpsin).children('b').eq(i).addClass('selected')
}
}
if(currunt!=1){
ypagegpsin.prepend('<b class="pre">上一页</b>');
}
if(currunt!=all){
ypagegpsin.children('input').before('<b class="next">下一页</b>');
}
ypagegpsin.children('input').val(currunt)
}
3288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
