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:回调函数,分页的核心操作,前台页面调用分页函数之后,进行数据查询等操作,所有操作在这里完成。