`
chengjie177
  • 浏览: 26487 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
文章分类
社区版块
存档分类
最新评论

漂亮的分页导航(JQuery插件)

阅读更多
/**
	 * 分页导航
	 * CSS:
		#pageNav{
			height:30px;
		}
		#pageNav span{
			float: right;
			margin: 0 30px 0 0;
		}
		#pageNav span a{
			display: inline-block;
			margin: 7px 3px 0;
			padding: 3px 7px;
			line-height: 1.231;
			text-decoration: none;
			background-color: #e7f4fd;
			border: 1px solid #D6D6D6;
			vertical-align: middle;
			overflow: hidden;
		}
		#pageNav span strong{
			margin: 8px 3px 0;
			padding: 3px 7px;
			line-height: 1.231;
			text-decoration: none;
			vertical-align: middle;
			overflow: hidden;
		}
		#pageNav span a:hover{
			background-color: #73b2da;
			border-color: #3090bc;
			color: #ffffff;
			text-decoration: none;
		}
		
	 *HTML:
	 <div id="pageNav">
		<input name="page" type="hidden" value="${pages}" />
		<input name="pageNo" type="hidden" value="${pageNo}" />
		<span>
		</span>
	 </div>
	 *JS:
	 $(function(){
		var pageNum = $("input[name=page]").val();
		var pageNo = $("input[name=pageNo]").val();
		$("#pageNav span").page({
			pageNum:pageNum,
			pageNo:pageNo,
			url:"selectInfo.do",
			param:"p"
		});
	 })
	 */
	$.fn.page = function(options) {
		var defaults = {
			pageNum:"pageNum",//页数
			pageNo:"pageNo",//当前页
			url:"url",//action
			param:"param"//传递到url的参数
		}
		var options = $.extend(defaults, options);
		this.each(function(){
			if(options.pageNo==1) {
				var html = "";
			} else {
				var html = "<a href='" + options.url + "?" + options.param + "=" + (+options.pageNo-1) + "'>&lt;&lt;上一页</a>";
			}
			var lastNO = +options.pageNo - 4;
			var nextNO = +options.pageNo + 4;
			switch(true) {
				case lastNO<=0&&nextNO<options.pageNum :
					for (var i=1; i<=+nextNO-1; i++) {
						if(i==options.pageNo) {
							html += "<strong>"+ i +"</strong>";
						} else{
							html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
							"<a href='selectInfo.do?p="+ i +"'>" + i + "</a>";
						}
					}
					html +="...<a href='" + options.url + "?" + options.param + "=" + options.pageNum + "'>" + options.pageNum + "</a>";
					break;
				case lastNO<=0&&nextNO>=options.pageNum :
					for(var i=1; i<=options.pageNum; i++){
						if(i==options.pageNo) {
							html += "<strong>"+ i +"</strong>";
						} else{
							html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
						}
					}
					break;
				case lastNO>0&&nextNO>=options.pageNum :
					html +="<a href='" + options.url + "?" + options.param + "=" + 1 + "'>" + 1 + "</a>...";
					for (var i=+lastNO+2; i<options.pageNo; i++) {
						html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
					}
					html += "<strong>" + options.pageNo + "</strong>";
					for (var i=+options.pageNo+1; i<=options.pageNum; i++) {
						html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
					}
					break;
				case lastNO>0&&nextNO<options.pageNum : 
					html +="<a href='" + options.url + "?" + options.param + "=" + 1 + "'>" + 1 + "</a>...";
					for (var i=+lastNO+2; i<options.pageNo; i++) {
						html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
					}
					html += "<strong>" + options.pageNo + "</strong>";
						for (var i=+options.pageNo+1; i<+nextNO-1; i++){
							html +="<a href='" + options.url + "?" + options.param + "=" + i + "'>" + i + "</a>";
						}
					html +="...<a href='" + options.url + "?" + options.param + "=" + options.pageNum + "'>" + options.pageNum + "</a>";
					break;
			}
			if(options.pageNo==options.pageNum) {
				html += "";
			} else {
				html +="<a href='" + options.url + "?" + options.param + "=" + (+options.pageNo+1) + "'>下一页&gt;&gt;</a>";
			}
			$(this).empty().append(html);
		});
	};
  • 大小: 1.7 KB
分享到:
评论

相关推荐

    漂亮实用的jQuery分页样式插件代码

    本资源提供了一款“漂亮实用的jQuery分页样式插件代码”,适用于那些希望为网站添加美观、易用的分页功能的开发者。这款插件采用红色主题,具有无刷新的分页效果,并且集成了搜索功能,增强了用户体验。 首先,...

    jQuery漂亮滚动分页示例插件(jPaginate)

    **jQuery漂亮滚动分页插件(jPaginate)详解** 在网页设计中,为了提供良好的用户体验,尤其是在处理大量数据时,滚动分页是一个不可或缺的功能。jQuery的jPaginate插件就是一个非常实用的工具,它能够帮助开发者创建...

    漂亮的分页插件

    本项目中的标签提到了"jquery 导航菜单",这暗示了这个分页插件可能基于jQuery库构建。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,让前端开发变得更加高效。在这个案例中,jQuery...

    非常智能漂亮色彩丰富的简单jquery分页效果插件.zip

    本资源“非常智能漂亮色彩丰富的简单jquery分页效果插件.zip”显然是一个提供了美观且功能丰富的jQuery分页插件。这种插件在数据量大、需要分批加载的网页应用中极为常见,例如博客、论坛、电商产品列表等。 首先,...

    漂亮的基于jQuery的表格插件

    本篇文章将深入探讨“漂亮的基于jQuery的表格插件”,特别是提及的dataTables 1.6版本。 首先,让我们关注“漂亮的”这一特性。这通常意味着插件提供了美观的布局和可定制的样式。在dataTables中,你可以通过CSS...

    Jquery分页控件

    在实际应用中,`jqueryPagination`可能是一个包含以下内容的jQuery插件: - **插件源代码**:提供实现分页功能的JavaScript代码,可能包含初始化方法、事件处理函数等。 - **示例代码**:展示如何在项目中引入和...

    最实用的漂亮的分页样式

    一些流行的库,如jQuery Pagination插件或Bootstrap的Pagination组件,提供了现成的分页解决方案,简化了开发过程。 5. **最佳实践**: - **避免过多的页码**:过多的分页项会增加用户的认知负担,通常只显示前几...

    最新 最流行 jquery 图片插件大全

    "最新 最流行 jquery 图片插件大全"这个主题聚焦于利用jQuery来增强网页图片展示效果的各种插件。这些插件通常包含了丰富的功能,如轮播、缩略图导航、动态加载、图片预览等,旨在提升用户体验,让网站的图片展示...

    jQuery漂亮示例插件(jPaginate)

    `jQuery jPaginate` 是一个轻量级且易于使用的jQuery插件,专门用于创建美观的分页导航,提供了一个优雅的方式来展示滚动分页效果。 ### 插件简介 `jPaginate` 插件主要目标是简化网页的分页功能实现,通过自定义...

    10种漂亮JS网站分页代码

    4. **插件使用**:许多开发者会使用现成的JS分页插件,如jQuery Pagination、Bootpag、Paginator.js等。这些插件提供了丰富的配置选项和预设样式,可以快速实现分页功能。 5. **自定义实现**:对于有特殊需求的项目...

    jquery 特效,总有你想要的

    multimedia-portfolio 一个多媒体,强大的jquery插件 hialert 弹出层框架3 jqtransform 一个帮助构建漂亮的表单插件 jexpand 美化列表显示的插件 imageflow 图片展示特效4 一个另类的放大镜插件 circulate 一个是...

    超级漂亮的jQuery焦点图广告轮播特效.docx

    这是一个流行的jQuery插件,用于创建滑动效果的列表,如图片轮播。 3. `&lt;div class="jcarousel-wrapper"&gt;` 和 `&lt;div class="jcarousel"&gt;` 是轮播组件的主要容器,它们通常包含一系列的`&lt;ul&gt;`列表元素,每个`&lt;li&gt;`...

    一个漂亮的的基于jQuery 实现的EasySlider图片滚动切换插件源码例子

    【标题】中的“基于jQuery实现的EasySlider图片滚动切换插件”是指一种使用JavaScript库jQuery设计的滑动轮播组件。EasySlider是一款流行的轻量级解决方案,它允许开发者在网页上创建美观、流畅的图片或内容滚动效果...

    超级漂亮的jQuery焦点图广告轮播特效.pdf

    然后,设置HTML结构,通常包含一个容器(`.jcarousel-wrapper`),轮播元素(如图片列表`&lt;ul&gt;`)和控制按钮(`.jcarousel-control-prev`、`.jcarousel-control-next`)以及分页导航(`.jcarousel-pagination`): ...

    棕色漂亮的个人博客模板_棕色漂亮导航渐变博客web20Gallery.rar

    标题中的“棕色漂亮的个人博客模板_棕色漂亮导航渐变博客web20Gallery.rar”表明这是一个设计用于个人博客的模板,其特色是棕色色调以及渐变的导航...同时,利用jQuery插件,可以实现更丰富的交互功能,提升用户体验。

    08-最新HTML5+CSS3+JavaScript实用案例大全(2181例).rar

    4个jQuery手机移动端幻灯片swipeslider插件]4个很漂亮的鼠标滑过超链接jQuery动画特效T4个简单实用的jQuery超链接动画特效 4款echarts.js扁平图形统计图表代码4款超酷Tabs选项卡代码 ]4种动态波浪文字动画js特效 ]4...

    漂亮的滑动触摸的jq轮播图有很多个

    4. **jquerySangarslider745120160808**:Sangar Slider是一款知名的jQuery轮播插件,支持自定义样式、分页导航、箭头导航和触摸滑动,适合用于产品展示或文章列表。 5. **jQuery-tck6583201702071716**:可能是一...

    bootstrap-4.3.1

    在2018年1月下旬,Bootstrap团队发布了Bootstrap 4 正式版,4的最主要变化包括以下...Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”。其中包括: 模式对话框、标签页、滚动条、弹出框等。

    超漂亮的jQuery图片轮播特效

    我们将基于jCarousel这个强大的jQuery插件进行讲解,它提供了丰富的功能和可定制性,使得创建高质量的图片轮播变得简单。 **一、jCarousel插件介绍** jCarousel是一款广泛使用的jQuery插件,专门用于创建图片轮播...

    Bootstrap v2.3.2(Web前端CSS框架)

    Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。 Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的...

Global site tag (gtag.js) - Google Analytics