/** * 分页导航 * 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) + "'><<上一页</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) + "'>下一页>></a>"; } $(this).empty().append(html); }); };
您还没有登录,请您登录后再发表评论
本资源提供了一款“漂亮实用的jQuery分页样式插件代码”,适用于那些希望为网站添加美观、易用的分页功能的开发者。这款插件采用红色主题,具有无刷新的分页效果,并且集成了搜索功能,增强了用户体验。 首先,...
**jQuery漂亮滚动分页插件(jPaginate)详解** 在网页设计中,为了提供良好的用户体验,尤其是在处理大量数据时,滚动分页是一个不可或缺的功能。jQuery的jPaginate插件就是一个非常实用的工具,它能够帮助开发者创建...
本项目中的标签提到了"jquery 导航菜单",这暗示了这个分页插件可能基于jQuery库构建。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,让前端开发变得更加高效。在这个案例中,jQuery...
本资源“非常智能漂亮色彩丰富的简单jquery分页效果插件.zip”显然是一个提供了美观且功能丰富的jQuery分页插件。这种插件在数据量大、需要分批加载的网页应用中极为常见,例如博客、论坛、电商产品列表等。 首先,...
本篇文章将深入探讨“漂亮的基于jQuery的表格插件”,特别是提及的dataTables 1.6版本。 首先,让我们关注“漂亮的”这一特性。这通常意味着插件提供了美观的布局和可定制的样式。在dataTables中,你可以通过CSS...
在实际应用中,`jqueryPagination`可能是一个包含以下内容的jQuery插件: - **插件源代码**:提供实现分页功能的JavaScript代码,可能包含初始化方法、事件处理函数等。 - **示例代码**:展示如何在项目中引入和...
一些流行的库,如jQuery Pagination插件或Bootstrap的Pagination组件,提供了现成的分页解决方案,简化了开发过程。 5. **最佳实践**: - **避免过多的页码**:过多的分页项会增加用户的认知负担,通常只显示前几...
"最新 最流行 jquery 图片插件大全"这个主题聚焦于利用jQuery来增强网页图片展示效果的各种插件。这些插件通常包含了丰富的功能,如轮播、缩略图导航、动态加载、图片预览等,旨在提升用户体验,让网站的图片展示...
`jQuery jPaginate` 是一个轻量级且易于使用的jQuery插件,专门用于创建美观的分页导航,提供了一个优雅的方式来展示滚动分页效果。 ### 插件简介 `jPaginate` 插件主要目标是简化网页的分页功能实现,通过自定义...
4. **插件使用**:许多开发者会使用现成的JS分页插件,如jQuery Pagination、Bootpag、Paginator.js等。这些插件提供了丰富的配置选项和预设样式,可以快速实现分页功能。 5. **自定义实现**:对于有特殊需求的项目...
multimedia-portfolio 一个多媒体,强大的jquery插件 hialert 弹出层框架3 jqtransform 一个帮助构建漂亮的表单插件 jexpand 美化列表显示的插件 imageflow 图片展示特效4 一个另类的放大镜插件 circulate 一个是...
这是一个流行的jQuery插件,用于创建滑动效果的列表,如图片轮播。 3. `<div class="jcarousel-wrapper">` 和 `<div class="jcarousel">` 是轮播组件的主要容器,它们通常包含一系列的`<ul>`列表元素,每个`<li>`...
【标题】中的“基于jQuery实现的EasySlider图片滚动切换插件”是指一种使用JavaScript库jQuery设计的滑动轮播组件。EasySlider是一款流行的轻量级解决方案,它允许开发者在网页上创建美观、流畅的图片或内容滚动效果...
然后,设置HTML结构,通常包含一个容器(`.jcarousel-wrapper`),轮播元素(如图片列表`<ul>`)和控制按钮(`.jcarousel-control-prev`、`.jcarousel-control-next`)以及分页导航(`.jcarousel-pagination`): ...
标题中的“棕色漂亮的个人博客模板_棕色漂亮导航渐变博客web20Gallery.rar”表明这是一个设计用于个人博客的模板,其特色是棕色色调以及渐变的导航...同时,利用jQuery插件,可以实现更丰富的交互功能,提升用户体验。
4个jQuery手机移动端幻灯片swipeslider插件]4个很漂亮的鼠标滑过超链接jQuery动画特效T4个简单实用的jQuery超链接动画特效 4款echarts.js扁平图形统计图表代码4款超酷Tabs选项卡代码 ]4种动态波浪文字动画js特效 ]4...
4. **jquerySangarslider745120160808**:Sangar Slider是一款知名的jQuery轮播插件,支持自定义样式、分页导航、箭头导航和触摸滑动,适合用于产品展示或文章列表。 5. **jQuery-tck6583201702071716**:可能是一...
在2018年1月下旬,Bootstrap团队发布了Bootstrap 4 正式版,4的最主要变化包括以下...Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”。其中包括: 模式对话框、标签页、滚动条、弹出框等。
我们将基于jCarousel这个强大的jQuery插件进行讲解,它提供了丰富的功能和可定制性,使得创建高质量的图片轮播变得简单。 **一、jCarousel插件介绍** jCarousel是一款广泛使用的jQuery插件,专门用于创建图片轮播...
Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。 Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的...
相关推荐
本资源提供了一款“漂亮实用的jQuery分页样式插件代码”,适用于那些希望为网站添加美观、易用的分页功能的开发者。这款插件采用红色主题,具有无刷新的分页效果,并且集成了搜索功能,增强了用户体验。 首先,...
**jQuery漂亮滚动分页插件(jPaginate)详解** 在网页设计中,为了提供良好的用户体验,尤其是在处理大量数据时,滚动分页是一个不可或缺的功能。jQuery的jPaginate插件就是一个非常实用的工具,它能够帮助开发者创建...
本项目中的标签提到了"jquery 导航菜单",这暗示了这个分页插件可能基于jQuery库构建。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,让前端开发变得更加高效。在这个案例中,jQuery...
本资源“非常智能漂亮色彩丰富的简单jquery分页效果插件.zip”显然是一个提供了美观且功能丰富的jQuery分页插件。这种插件在数据量大、需要分批加载的网页应用中极为常见,例如博客、论坛、电商产品列表等。 首先,...
本篇文章将深入探讨“漂亮的基于jQuery的表格插件”,特别是提及的dataTables 1.6版本。 首先,让我们关注“漂亮的”这一特性。这通常意味着插件提供了美观的布局和可定制的样式。在dataTables中,你可以通过CSS...
在实际应用中,`jqueryPagination`可能是一个包含以下内容的jQuery插件: - **插件源代码**:提供实现分页功能的JavaScript代码,可能包含初始化方法、事件处理函数等。 - **示例代码**:展示如何在项目中引入和...
一些流行的库,如jQuery Pagination插件或Bootstrap的Pagination组件,提供了现成的分页解决方案,简化了开发过程。 5. **最佳实践**: - **避免过多的页码**:过多的分页项会增加用户的认知负担,通常只显示前几...
"最新 最流行 jquery 图片插件大全"这个主题聚焦于利用jQuery来增强网页图片展示效果的各种插件。这些插件通常包含了丰富的功能,如轮播、缩略图导航、动态加载、图片预览等,旨在提升用户体验,让网站的图片展示...
`jQuery jPaginate` 是一个轻量级且易于使用的jQuery插件,专门用于创建美观的分页导航,提供了一个优雅的方式来展示滚动分页效果。 ### 插件简介 `jPaginate` 插件主要目标是简化网页的分页功能实现,通过自定义...
4. **插件使用**:许多开发者会使用现成的JS分页插件,如jQuery Pagination、Bootpag、Paginator.js等。这些插件提供了丰富的配置选项和预设样式,可以快速实现分页功能。 5. **自定义实现**:对于有特殊需求的项目...
multimedia-portfolio 一个多媒体,强大的jquery插件 hialert 弹出层框架3 jqtransform 一个帮助构建漂亮的表单插件 jexpand 美化列表显示的插件 imageflow 图片展示特效4 一个另类的放大镜插件 circulate 一个是...
这是一个流行的jQuery插件,用于创建滑动效果的列表,如图片轮播。 3. `<div class="jcarousel-wrapper">` 和 `<div class="jcarousel">` 是轮播组件的主要容器,它们通常包含一系列的`<ul>`列表元素,每个`<li>`...
【标题】中的“基于jQuery实现的EasySlider图片滚动切换插件”是指一种使用JavaScript库jQuery设计的滑动轮播组件。EasySlider是一款流行的轻量级解决方案,它允许开发者在网页上创建美观、流畅的图片或内容滚动效果...
然后,设置HTML结构,通常包含一个容器(`.jcarousel-wrapper`),轮播元素(如图片列表`<ul>`)和控制按钮(`.jcarousel-control-prev`、`.jcarousel-control-next`)以及分页导航(`.jcarousel-pagination`): ...
标题中的“棕色漂亮的个人博客模板_棕色漂亮导航渐变博客web20Gallery.rar”表明这是一个设计用于个人博客的模板,其特色是棕色色调以及渐变的导航...同时,利用jQuery插件,可以实现更丰富的交互功能,提升用户体验。
4个jQuery手机移动端幻灯片swipeslider插件]4个很漂亮的鼠标滑过超链接jQuery动画特效T4个简单实用的jQuery超链接动画特效 4款echarts.js扁平图形统计图表代码4款超酷Tabs选项卡代码 ]4种动态波浪文字动画js特效 ]4...
4. **jquerySangarslider745120160808**:Sangar Slider是一款知名的jQuery轮播插件,支持自定义样式、分页导航、箭头导航和触摸滑动,适合用于产品展示或文章列表。 5. **jQuery-tck6583201702071716**:可能是一...
在2018年1月下旬,Bootstrap团队发布了Bootstrap 4 正式版,4的最主要变化包括以下...Bootstrap自带了13个jQuery插件,这些插件为Bootstrap中的组件赋予了“生命”。其中包括: 模式对话框、标签页、滚动条、弹出框等。
我们将基于jCarousel这个强大的jQuery插件进行讲解,它提供了丰富的功能和可定制性,使得创建高质量的图片轮播变得简单。 **一、jCarousel插件介绍** jCarousel是一款广泛使用的jQuery插件,专门用于创建图片轮播...
Bootstrap是基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。 Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的...