码迷,mamicode.com
首页 > Web开发 > 详细

编写jQuery插件

时间:2016-01-08 23:29:14      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:

编写jQuery插件

在园子里有很多关于jQuery插件的文章,尤其 以下2篇文章:

不定义JQuery插件,不要说会JQuery

jQuery插件开发精品教程,让你的jQuery提升一个台阶

这2位大神基础讲的很清楚,在这里就不多说了,主要那个小需求来练练:

需求说明一个标题插件,可以通过后端取数,自定义标题,自定义样式

讨论:插件通常不都是加载一下就不操作了,比如表格插件,加载数据,刷新等等。

今天练习的控件就简单给大家理理写控件的思路,(有问题,有意见大家指出。)

; (function ($) {
    $.fn.cyTitle = function (options) {
        //一些操作
        return new cyTitle(options);
    }
    function cyTitle(Options) {
        //这里定义插件属性
        $.extend(this, Options);
        this.init(Options);
    }
    cyTitle.prototype = {
        init: function () {
            //这里构建插件内容
        }
    }
})(jQuery)

每个插件都应该包含以上部分,这个就不多说了(上面2为大神的文章说的很清楚),从实际编写出发。 (demo)

点击加载控件列出标题(未定义标题),点击刷新更改标题(ajax取数)。

 

下面一步步看代码:

(本来请求txt的结果发现博客园不能上传和请求,放着runjs上也只能是js文件了。。。)

    <div style="border: 1px dotted #888; width: 300px; height: 100px;">
        <input type="button" class="cyTitleCore" title="load" value="加载控件" />
        &nbsp;
    <input type="button" class="cyTitleCore" title="ref" value="刷新" />
        <div id="div1cyTitle"></div>
    </div>
    <script type="text/javascript">
        $(function () {
            $(".cyTitleCore").click(function () {
                core[$(this).attr("title")]();
            })
            var core = {
                load: function () {
                    this.list = $("#div1cyTitle").cyTitle({
                        background: "#888"
                    });
                },
                ref: function () {
                    //这里直接调用插件的ref方法来刷新取数
                    if (this.list) {
                        this.list.ondatabind = function (that, e) {
                            e.url = "Service.js"; //指定取数的url
                            e.params = { //指定取数的参数
                                "id": (+new Date())
                            };
                        }
                        this.list.ref();
                    }
                }
            }
        })
    </script>

 

上面是加载控件和刷新的调用;

首先点击加载按钮可以看到是调用了插件cyTitle,并且指定背景色。先不看刷新,来看看插件到底怎么写的!

    $.fn.cyTitle = function (options) {
        options = options || {};
        var domEl = this.get(0); //获得绑定元素的dom对象
        if (!domEl) throw "未找到绑定元素!";
        if (domEl["cyTitle"]) {  //这里如果调用元素的dom对象上有这个控件就直接返回 (避免了在同一个元素上多次调用出BUG)
            return domEl["cyTitle"];
        }
        options.el = domEl; //这里在构建插件的时候直接用this.el就能访问元素的dom对象

        return new cyTitle(options);
    }
    function cyTitle(Options) {
        //这里定义插件属性
        $.extend(this, Options);
        this.ajaxType = "get"; 
        this.el.cyTitle = this; //把控件放着dom元素的cyTitle属性上
        this.ondatabind = null; //ajax取数的绑定方法
        this.init(Options);
    }
cyTitle.prototype = {
        init: function () {
            this.load(); //加载控件
        },
        load: function () {
            $(this.el).append("<h1>" + (this.text || "未知") + "</h1>"); //如果指定了Options.text就显示指定的内容
            this.ref(); //调用ajax取数(类似与表格插件第一次加载)
        },
        ref: function () {
            this.bgCss();
            var e = {
                url: null
            };
            this.doEvt("ondatabind", e); //这里调用前面定义的取数方法的内容(url, params)
            //依次类推我们可以写绑定前(在绑定方法前面调用),绑定后(执行异步后调用) 等等
            if (e.url) {
                var my = this;
                $[this.ajaxType](e.url, e.params, function (res) {
                    if (res) {
                        $(my.el).find("h1").text(res);
                    }
                },‘html‘);
            }
        },
        doEvt: function (name, p) {
            if (this[name]) {
                this[name](this, p);
            }
            return this;
        },
        bgCss: function () {
            $(this.el).css("background", this.background);
        }
    };

以上就是整个插件的内容,

优点:

  1. 在用一个元素上绑定n次都不会出现错误。
  2. 可以自定义取数,从新加载数据。
  3. 可以在原型上扩张,自己需要的功能。

用一个demo练习编写插件,才知道其中的乐趣,先说到这里。谢谢

实在忙,最近搞了个girhub.io博客写了个滚动条插件。有兴趣的可以看看内涵demo

编写jQuery插件

标签:

原文地址:http://www.cnblogs.com/Leo_wl/p/5115172.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!