简单的JQuery分页代码
1. [代码][JavaScript]代码
001 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > |
002 |
<html xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" lang= "en" > |
003 |
<head> |
004 |
<title>jQuery分页</title> |
005 |
<style type= "text/css" rel= "stylesheet" > |
006 |
.page{ |
007 |
display:none; |
008 |
} |
009 |
#pagnation a{ |
010 |
padding-right:5px; |
011 |
} |
012 |
.current { |
013 |
color:blue; |
014 |
} |
015 |
#pagnation{ |
016 |
margin-top:20px; |
017 |
} |
018 |
.numlink, #prev,#next |
019 |
{ |
020 |
background-color: #F5F5F5; |
021 |
border: 1px solid #EBEBEB; |
022 |
color: #0072BC; |
023 |
font-weight: normal; |
024 |
margin-left: 10px; |
025 |
padding: 2px 7px; |
026 |
text-decoration: none; |
027 |
width: 22px;; |
028 |
} |
029 |
.current |
030 |
{ |
031 |
background-color: #DDEEFF; |
032 |
border: 1px solid #BBDDFF; |
033 |
color: #0072BC; |
034 |
cursor: default ; |
035 |
margin-left: 10px; |
036 |
padding: 2px 7px; |
037 |
text-decoration: none; |
038 |
} |
039 |
</style> |
040 |
</head> |
041 |
|
042 |
<body> |
043 |
<div id= "content" > |
044 |
<div class= "page" > |
045 |
这里是第一段内容 |
046 |
</div> |
047 |
<div class= "page" > |
048 |
这里是第二段内容 |
049 |
</div> |
050 |
<div class= "page" > |
051 |
第三段内容</div> |
052 |
<div class= "page" > |
053 |
第四段内容 |
054 |
</div> |
055 |
<div id= "pagnation" > |
056 |
</div> |
057 |
</div> |
058 |
<script type= "text/javascript" src= "http://www.codefans.net/ajaxjs/jquery1.3.2.js" ></script> |
059 |
<script type= "text/javascript" > |
060 |
var _Pages = $( '.page' ); |
061 |
var _Nav = $( '#pagnation' ); |
062 |
function createLinks(){ |
063 |
_Nav.append( '<a href="#" id="prev">Prev</a>' ); |
064 |
for ( var i=0;i<$( '.page' ).length;i++){ |
065 |
_Nav.append( '<a href="#" class="numlink">' +(i+1)+ '</a>' ); |
066 |
} |
067 |
_Nav.append( '<a href="#" id="next">Next</a>' ); |
068 |
} |
069 |
function process(now,_Prev,_Next){ |
070 |
$( '.page:eq(' +now+ ')' ).css( 'display' , 'block' ); |
071 |
$( '.numlink:eq(' +now+ ')' ).addClass( 'current' ); |
072 |
var total = parseInt($( '.page' ).length - 1); |
073 |
if (now == 0){ |
074 |
_Prev.hide(); |
075 |
_Next.show(); |
076 |
} |
077 |
else if (now == total){ |
078 |
_Prev.show(); |
079 |
_Next.hide(); |
080 |
} |
081 |
else { |
082 |
_Prev.show(); |
083 |
_Next.show(); |
084 |
} |
085 |
} |
086 |
function hideAll(){ |
087 |
_Pages.css( 'display' , 'none' ); |
088 |
$( '.numlink' ).removeClass( 'current' ); |
089 |
} |
090 |
$(document).ready( function (){ |
091 |
//set the first one display none |
092 |
$( '.page:eq(0)' ).css( 'display' , 'block' ); |
093 |
createLinks(); |
094 |
$( '.numlink:eq(0)' ).addClass( 'current' ); |
095 |
var _Next = $( '#next' ); |
096 |
var _Prev = $( '#prev' ); |
097 |
var _Link = $( '.numlink' ); |
098 |
_Prev.hide(); |
099 |
var now = parseInt($( '.numlink' ).index($( '.current' ))); |
100 |
_Next.click( function (){ |
101 |
hideAll(); |
102 |
process(now+1,_Prev,_Next); |
103 |
now = parseInt($( '.numlink' ).index($( '.current' ))); |
104 |
}); |
105 |
_Prev.click( function (){ |
106 |
hideAll(); |
107 |
process(now-1,_Prev,_Next); |
108 |
now = parseInt($( '.numlink' ).index($( '.current' ))); |
109 |
}) |
110 |
_Link.click( function (){ |
111 |
var that = $( this ); |
112 |
hideAll(); |
113 |
var which = that.index() - 1; |
114 |
process(which,_Prev,_Next); |
115 |
now = parseInt($( '.numlink' ).index($( '.current' ))); |
116 |
}) |
117 |
}) |
118 |
</script> |
119 |
</body> |
120 |
</html> |
121 |
</iframe></noscript></object></layer></span></div></table> |
122 |
</body> |
123 |
</html> |
简单的JQuery分页代码的更多相关文章
- PHP分页初探 一个最简单的PHP分页代码的简单实现
PHP分页代码在各种程序开发中都是必须要用到的,在网站开发中更是必选的一项. 要想写出分页代码,首先你要理解SQL查询语句:select * from goods limit 2,7.PHP分页代码核 ...
- PHP分页初探 一个最简单的PHP分页代码实现
PHP分页代码在各种程序开发中都是必须要用到的,在网站开发中更是必选的一项. 要想写出分页代码,首先你要理解SQL查询语句:select * from goods limit 2,7.PHP分页代码核 ...
- 自己写的简单的jQuery分页控件
因为是内部项目,需要分页控件,网上找了一大堆,给领导一看,都说不行,原因很简单,太复杂,领导就想要个简单点的,类似百度的分页,可是自己也没写过Jquery控件,硬着头皮找了些资料,写了这个分页控件,目 ...
- 回到顶部最简单的JQuery实现代码
CSS代码,使用了fixed让对象固定于浏览器窗口: top{position:fixed;bottom:0;right:10px;} jQuery代码,注意正常使用的几个条件:$('#top').c ...
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
- 简单的beego分页功能代码
一个简单的beego分页小插件(源代码在最下面): 支持条件查询 支持参数保留 支持自定义css样式 支持表/视图 支持参数自定义 默认为pno 支持定义生成链接的个数 使用方式: 1)action中 ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- jquery 分页控件2
jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...
随机推荐
- 用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
- unity3D中协程和线程混合
这是我google unity3D一个问题偶然发现的在stackflow上非常有趣的帖子: 大意是 要在unity3D上从server下载一个zip,并解压到持久化地址.并将其载入到内存中.以下展示了 ...
- Fast portable non-blocking network programming with Libevent--转
Learning Libevent Chapter 0: About this document Chapter 1: A tiny introduction to asynchronous IO. ...
- ArcGIS Desktop 与 Excel(转)
来自:http://blog.csdn.net/kikitamoon/article/details/19043161 微软 OFFICE 产品中,Excel是很强大,并且平民化的表格制作工具.Arc ...
- C语言的变量的作用域和生存期
一.c程序存储空间布局 C程序一直由下列部分组成: 1)正文段——CPU执行的机器指令部分:一个程序只有一个副本:只读,防止程序由于意外事故而修改自身指令: 2)初始化数据段(数据段)——在 ...
- android的平台架构及特性
Android平台采用了整合的策略思想,包括底层Linux操作系统.中间层的中间件和上层的Java应用程序.下面我把Android的特性及其架构体系结构总结一下. 一.Android的平台特性 And ...
- 类型转换(CCstring int string char UTF-8互转)
在做数据转换时,最好包含以下头文件 #include <iostream> #include <cmath> #include <string> #include ...
- 【C语言】02-基本数据类型
跟其他语言一样,C语言中用变量来存储计算过程使用的值,任何变量都必须先定义类型再使用.为什么一定要先定义呢?因为变量的类型决定了变量占用的存储空间,所以定义变量类型,就是为了给该变量分配适当的存储空间 ...
- alert
先别着急测试,来猜测一下下面一行代码执行的结果 alert(alert(1234567)); 此刻,我自己还不是不太理解 我的分析是这样: alert() 是window下面的一个方法 alert(1 ...
- Python(2.7.6) 迭代器
除了对列表.集合和字典等进行迭代,还能对其他对象进行迭代:实现 __iter__ 方法的对象.例如, 文件对象就是可迭代的: >>> dir(file) ['__class__', ...