自定义jQuery插件实现分页

大家都说,写个JS,用jQuery时就只会引入一个jQuery类库的话,写个$(‘# ‘),$(‘# ‘),是远远不够的,在学习的jQuery过程中,想要更好的掌握这项技术,还要熟练运用jQuery插件
有时在做一个项目的时候,会遇到很多页面遍历出数据以后数据很多要做分页的情况,所以在最近学习了jQuery以后,将这些分页的功能做成jQuery插件,便于自己的使用。
首先,编辑jQuery插件,写在(function ($) { })(jQuery); 里。这是一个匿名函数,其中jQuery代表这个匿名函数的实参,这样写实际上是为了防止$在外部被修改,起到了定义插件私有域的作用。
然后$.extend(object) 可以理解为JQuery 添加一个静态方法。
$.fn.extend(object) 可以理解为JQuery实例添加一个方法。
代码如下:


//(function ($) { })(jQuery); 定义了一个匿名函数,其中jQuery代表这个匿名函数的实参。
//在开发这样的插件的时候,放置$ 在外部被修改。
//通常用在JQuery插件开发中,起到了定义插件的私有域的作用。
(function($){
//  定义一个jQuery的静态方法     另外 $.fn.extend(object)可以为jQuery定义一个实例方法
    $.extend({
//      以下分页的方法
        pagination : function(setting){
//          在这个保存参数的对象中 你可以添加一些自己的参数 用来完成自己的功能
            var params = {
                    url : "",
                    data : {},
                    success : function(data){
                    }
            };
            for(var attr in setting){
                params[attr] = setting[attr];
            }
//          异步请求  查询到数据后返回 数据中主要使用查到的数据的总页数
            $.ajax({
                url : params.url,
                data:params.data,
                type : "post",
                dataType:"json",
                success:function(data){
//                  得到总页数 开始拼接页面元素
                    var totalPage = data.PageCount;
                    var u_html = "<span class='p_name'>共 "+totalPage+" 页</span><li id='prev'><a><span class='arrow_left'></span></a></li>";
                    for(var i=1;i<=totalPage;i++){
                        u_html +="<li id="+i+"><a>"+i+"</a></li>";
                    }
                    u_html+="<li  id='next'><a><span class='arrow_right'></span></a></li>";
                    $('#upage').empty();
                    $('#upage').append(u_html);
//                  为拼接好的元素添加点击事件 改变page值 回调pagination函数
                    $('#upage').find('li').click(function(){
                        var id= $(this).attr('id');
                        var p = 0;
                        if(id==="prev"){
                            p = params.data.page-1;
                        }else if(id==="next"){
                            p= params.data.page+1;
                        }else{
                            p=id;
                        }
                        if(p<1){p=1;}if(p>totalPage){p=totalPage;}
                        params.data.page = p;
                        $.pagination(params);
                    });
//                  这里执行的是自己想要传过来的方法
                    params.success(data);
                }

            });
        }
    })
})(jQuery);

以上,只是一个简单的jQuery插件的小应用,希望自己在技术的道路上越走越远!

发布了31 篇原创文章 · 获赞 17 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览