自己diy一个jquery分页插件
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分页插件的更多相关文章
- 分享一个Jquery 分页插件 Jquery Pagination
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
- 自己写的一个jQuery分页插件
;(function($){ $.fn.extend({ pageList: function (json) { function PageList() { this.initHtml = " ...
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- jQuery 分页插件 jqPagination的使用
jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...
- jquery分页插件的修改
前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...
- 20个jQuery分页插件和教程
1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
随机推荐
- 1076 K尾相等数
时间限制:500MS 内存限制:65536K提交次数:251 通过次数:80 题型: 编程题 语言: C++;C Description 从键盘输入一个自然数K(99999999>K> ...
- 关于InputStream.read()方法的阻塞原理的测试
最近在一家公司做java实习,写了个网络字节采集器.写了个单例TCPServer来采集数据,其中用到了InputStream.read()来读取数据.产生了一系列问题,下面做下总结: 关于while( ...
- 初识API函数
我之前是一个只会编写数值计算的程序的OIer,但我并不甘于这种现状,于是我编写了我的第一个使用API函数的C++程序,开发平台是VS2012: // ConsoleApplication.cpp : ...
- 转:jQuery Ajax 实例 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
- [Unity2D]预制件Prefab
预制件Prefab是一个组件模板,比如在游戏里面要实现开枪的时候会有子弹不停地从枪口飞出来,那么就可以通过Prefab来实现子弹的游戏对象,表示所有的子弹都是从同一个Prefab来构建出来的,也可以理 ...
- BZOJ4011: [HNOI2015]落忆枫音
Description 「恒逸,你相信灵魂的存在吗?」 郭恒逸和姚枫茜漫步在枫音乡的街道上.望着漫天飞舞的红枫,枫茜突然问出 这样一个问题. 「相信吧.不然我们是什么,一团肉吗?要不是有灵魂……我们 ...
- Uiautomator打包使用第三方库,报错的解决方案
问题引源: 在做自动化过程中,想在用例执行完毕后,自动生成该用例测试报告: 报告定义为Excel格式文件,且在用例执行过程中生成. 所以我在Uiautomator工程中引用了jxl.jar,用以处理E ...
- HttpClient_用Apache HttpClient实现URL重定向
很多网站都使用了URL重定向技术,把一个原始请求从一个位置路由到另一个位置.原因可能是多方面的,比如域名转发.URL缩写.隐私保护.在同一网站维持相似的域名等.本文讲述怎样使用Apache HTTPC ...
- 【C语言】07-基本语句和运算
一.基本语句 C语言的基本语句跟Java中的差不多,所以,这里只是简单地提一下 循环语句(do while.while.for) 条件语句(if .if-else.switch) goto语句 二.基 ...
- log4j - 配置文件
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息. 通过配置,可以创建出Log4J的运行环 ...