js基础学习过程中,期间经历换工作的各种面试,很多面试官问过:有没有写过jquery插件?等类似问题。

就个人而言,关于jquery插件的文章确实看过不少,但是一直没有动手写一个,一是不想在目前学习js基础知识的时候,插入jQuery的插件的写法;二也是从思想上,可能也没太做好写插件的准备,总是感觉很麻烦,或者说很困难。

但是经历多次的面试之后,觉得还是有必要抓紧时间写一点插件,哪怕当做自己个人前端组件积累的一部分,也得提上日程了。

在新公司入职之后,正好项目刚刚上线,新的需求还没有下来,手头上并没有分到新的需求,就利用这段时间,决定写写jQuery插件了。由易而难,先写了一个模拟select的下拉选择框的插件,给了自己充足的信心。着手分页插件的写法。

从早上到公司开始入手,由于经验上的问题,对于插件需要传入的参数,或者说将来可以自定制的部分考虑的可能并不是很周全,等想到新的课定制部分的时候,会继续修改维护。废话不多说,直接贴代码。

最终的效果图如图所示。

html部分代码:

html部分只有一个盛放分页内容的盒子,class为pages必不可少,css和插件内部都用到了该class。

css部分是用scss编写的,直接贴上scss代码。

插件部分核心js代码:

调用部分代码:

参数解释一下:

currentPage: 数值,当前的页码;totalPage:数值,总页码;showPage:数值,需要展示几个页码;showBeginEnd:布尔值,是否需要展示“首页”和“尾页”,true展示,false不展示;showPrevNext:布尔值,是否展示“上一页”和“下一页”,true展示,false不展示。

以上参数如果都没传的话,都有默认值。

callback:回调函数,分页的核心操作,前台页面调用分页函数之后,进行数据查询等操作,所有操作在这里完成。

自己diy一个jquery分页插件的更多相关文章

  1. 分享一个Jquery 分页插件 Jquery Pagination

    分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...

  2. 自己写的一个jQuery分页插件

    ;(function($){ $.fn.extend({ pageList: function (json) { function PageList() { this.initHtml = " ...

  3. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

  4. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  5. jQuery 分页插件 jqPagination的使用

    jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...

  6. jquery分页插件的修改

    前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...

  7. 20个jQuery分页插件和教程

    1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...

  8. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  9. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <lin ...

随机推荐

  1. html加强

    <html> <head><title>hello</title></head> <body> <p>段落</ ...

  2. BZOJ2789 : [Poi2012]Letters

    按照顺序依次找到b串每个字母最后的位置,然后求逆序对. #include<cstdio> #define N 1000010 int n,i,j,k,g[26],nxt[N],bit[N] ...

  3. BZOJ3738 : [Ontak2013]Kapitał

    $C_{N+M}^N=\frac{(N+M)!}{N!M!}$ 考虑求出$ans\bmod 10^9$的值 $10^9=2^9\times5^9$ 以$2^9$为例,先预处理出$1$..$2^9$中不 ...

  4. 【BZOJ】3289: Mato的文件管理(莫队算法+树状数组)

    http://www.lydsy.com/JudgeOnline/problem.php?id=3289 很裸的莫队... 离线了区间然后分块排序后,询问时搞搞就行了. 本题中,如果知道$[l, r] ...

  5. css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。自己留存

    今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能 ...

  6. 从JAVA客户端访问Redis示例(入门)

    转自:http://blog.csdn.net/kkdelta/article/details/7217761 本文记录了安装Redis和从JAVA端访问Redis的步骤 从http://downlo ...

  7. Mock模拟后台数据接口--再也不用等后端的API啦

    ok,在开发中经常需要从后台获取数据,那么有时候后台的数据接口并没有写好,所以这时候,就需要自己模拟数据接口,来实现前端逻辑, 今天数的就是阿里巴巴的一款mock产品,很好用的哦!!!! ok!这是我 ...

  8. MS10048依旧是Windows 2003 x86 的杀器

    今天搞了个wow的游戏论坛,服务器环境是win03 x86+iis6.0+php+mysql. 提权的时候各种无奈,mysql无权限,而且没root,试了几个别的方法都不行,实在没办法的时候,用MS1 ...

  9. LINQ Count/Sum/Min/Max/Avg

    参考:http://www.cnblogs.com/peida/archive/2008/08/11/1263384.html Count/Sum/Min/Max/Avg用于统计数据,比如统计一些数据 ...

  10. [转]一步一步asp.net_购物车订单与支付宝

    本文转自:http://www.cnblogs.com/mysweet/archive/2012/05/19/2508534.html 最近这几天很忙,一边忙着准备一堆课程设计(8门专业课.....伤 ...