用jQuery写的一个翻页,并封装为插件,

 1 *{
 2     margin:0;
 3     padding: 0;
 4     list-style: none;
 5     text-decoration: none;
 6 }
 7 .page{
 8     width:500px;
 9     margin:100px auto;
10     color: #ccc;
11 }
12 .page a{
13     display: inline-block;
14     color: #428bca;
15     height: 25px;
16     line-height: 25px;
17     padding: 0 10px;
18     border: 1px solid #ddd;
19     margin: 0 2px;
20     border-radius: 4px;
21     vertical-align: middle;
22 }
23 .page a:hover{
24     border: 1px solid #428bca;
25 }
26 .page .current{
27     display: inline-block;
28     height: 25px;
29     line-height: 25px;
30     padding: 0 10px;
31     margin: 0 2px;
32     color: #fff;
33     background-color: #428bca;
34     border: 1px solid #428bca;
35     border-radius: 4px;
36     vertical-align: middle;
37 }
38 .page .disabled{
39     display: inline-block;
40     height: 25px;
41     line-height: 25px;
42     padding: 0 10px;
43     margin: 0 2px;
44     color: #bfbfbf;
45     background: #f2f2f2;
46     border: 1px solid #bfbfbf;
47     border-radius: 4px;
48     vertical-align: middle;
49 }

css

css自己随便写一下就行,

 1 (function($){
 2     function init(dom, args){
 3         if (args.pageCount >= args.current){
 4             createPage(dom, args);
 5             bindEvent(dom, args);
 6         }else{
 7             alert("输入页码大于页数!")
 8         }
 9     }
10     function createPage(dom,args){
11         dom.empty();
12         if(args.current != 1){
13             dom.append(‘<a href = "#" class="prevPage">上一页</a>‘);
14         }else{
15             dom.append(‘<span class="disabled">上一页</span>‘);
16         }
17
18         if (args.current >= 4){
19             dom.append(‘<a href = "#" class="tcdNumber">‘ + 1 + ‘</a>‘);
20         }
21         if (args.current >= 5){
22             dom.append(‘<span>...</span>‘);
23         }
24         for (var i = args.current-2; i < args.current + 3; i ++){
25             if (i > 0 && i <= args.pageCount){
26                 if(i == args.current){
27                     dom.append(‘<span class="current">‘ + args.current + ‘</span>‘);
28                 }else{
29                     dom.append(‘<a href = "#" class="tcdNumber">‘+ i +‘</a>‘);
30                 }
31             }
32         }
33         if (args.current <= args.pageCount - 5){
34             dom.append(‘<span>...</span>‘);
35         }
36         if (args.current <= args.pageCount - 4){
37             dom.append(‘<a href = "#" class="tcdNumber">‘ + args.pageCount + ‘</a>‘);
38         }
39         if(args.current != args.pageCount){
40             dom.append(‘<a href = "#" class="nextPage">下一页</a>‘);
41         }else{
42             dom.append(‘<span class="disabled">下一页</span>‘);
43         }
44     }
45     function bindEvent(dom,args){
46         dom.on(‘click‘,‘.prevPage‘,function(){
47             args.current--;
48             createPage(dom,args);
49             args.backFunction(args)
50         })
51         dom.on(‘click‘,‘.tcdNumber‘,function(){
52             args.current = parseInt($(this).text());
53             createPage(dom,args);
54             args.backFunction(args)
55         })
56         dom.on(‘click‘,‘.nextPage‘,function(){
57             args.current++;
58             createPage(dom,args);
59             args.backFunction(args)
60         })
61     }
62     $.fn.createPage = function(options){
63         var args = $.extend({
64             pageCount : 1,
65             current : 1,
66             backFunction : function(){}
67         },options);
68         init(this,args);
69     }
70 }(jQuery))  
 1  <div class="page"></div>
 2     <script>
 3         $(".page").createPage({
 4             pageCount : 15,
 5             current : 5,
 6             backFunction : function(arr){
 7                 console.log(arr.current)
 8             }
 9         })
10     </script>

原文地址:https://www.cnblogs.com/bacydm/p/9783126.html

时间: 2024-10-17 19:16:49

用jQuery写的一个翻页,并封装为插件,的相关文章

利用jquery写的一个TAB页切换效果

函数如下 [javascript] view plaincopy /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == no) { $(this).addClass(tab_c_css); }else { $(this).removeClass(tab_c_css); $(this).addClass(tab_n_css); } }) if (con) { $

jquery.Table实现的翻页功能比较完整漂亮,本想扩展个模版DIV

jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下提取完成. 看了近一天的源码后,对API的结构,实现方式和思路有了基本的认识,但终因工作量太大放弃了提取的念头,时间所迫转用KenDo的翻页 不过这过程中,对其的API实现有了较深的认识. 这里摘录部分资料 以下是在进行dataTable绑定处理时候可以附加的参数: 属性名称 取值范围 解释 bAu

用jQuery写了一个模态框插件

用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").confrimModal("<font color=\"green\">成功! </font>", {type:"info", themeColor: "#008B8B"}, true); "alert

jQuery炫酷3D翻页式电子时钟特效

FlipClock.js是一款实现翻页式效果的jQuery计时器插件.该计时器插件可以实现时分秒的计时,12小时制的计时,24小时制的计时,各种计数器效果,倒计数效果等等. 现在有各种版本的计时器和计数器插件,但是它们大部分都是只实现了某个特定方面的内容.而FlipClock充分适应了各种需求,既可以做计数器,也可以做计时器.以下是FlipClock的一些应用场景和它的一些特点: 作为时钟使用. 作为计时器使用. 作为倒计数器使用. FlipClock的样式使用纯CSS定制. 语法干净整洁. 所

jquery easyui datagrid 在翻页以后仍能记录被选中的行及刷新设置选中行数据

//easyUI的datagrid在复选框多选时,如何在翻页以后仍能记录被选中的行://注意datagrid中需要配置idField属性,一般为数据的主键 $.ajax({ type: 'GET', url:url, async:false, success: function (dt) { var grid = $('#list'); grid.datagrid('reload');//刷新表格数据 grid.datagrid({ onLoadSuccess:function(){ grid.

用jQuery写了一个模态框插件感觉挺好看的在博客园分享一下!

大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").confrimModal("<font color=\"green\">成功! </font>", {type:"info", themeColor: "#008B8B"}, true); "alert"框 $("d

JQuery写的一个常见的banner

大致的布局如下: <div class="banner" >                <div class="pic">                    <ul>                        <li><img src="img/banner4.jpg" /></li>                        <li><im

15个最佳jQuery的翻页书效果的例子

在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlock: jQuery内容翻转插件 BookBlock是可以将任何内容,如图像或文本创建小册子的组件,允许一个“翻页”的导航. 在线演示 2. imBookFlip : jQuery Page Turning Plugin without Flash imBookFlip可以将iframe加载书本成本

jQuery翻页yunm.pager.js,涉及div局部刷新

前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是: 如何封装一个翻页插件,如题中的yunm.pager.js. 涉及到的div局部刷新该如何做. 翻页的总体流程涉及到的知识点很多,这篇文章我们也主要来关注以上两点,其余的内容,请自悟. 一.如何定义局部刷新的div 翻页时,我们一般只会刷新页面中涉及到翻页的父级div,那么该如何定义呢? <form rel="support_deal_page" ta