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

  • 相关阅读:
    [1041] XX easy problem
    [1027] 火焰纹章
    省赛选拔赛解题报告
    二维DP hdu 1421 搬寝室问题
    最长斐波那契子序列选取(离散化 + 二分 + DP)
    两个有序链表合成一个有序链表
    CodeForce 608B Hamming Distance Sum
    CodeForce 607A&&608C Chain Reaction
    (DP)最大价值事件序列选取
    面向对象>>>抽象类>>>鸭子类型>>>封装
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/5865255.html
Copyright © 2011-2022 走看看