jquery widget開發——核心框架

框架代碼：

            $.widget("myns.myplugin", {
                //默認參數 
                options: {
                },
                //初始化，控件生命周期內只運行一次
                _init: function () {                 
                },
                //創建控件，控件生命周期內會運行多次 
                _create: function () {
                },
                //設置參數 
                _setOption: function (key, value) {
                    // In jQuery UI 1.8及以前用法 
                    $.Widget.prototype._setOption.apply(this, arguments);
                    // In jQuery UI 1.9及以后用法
                    this._super("_setOption", key, value);
                },
                // 釋放控件
                destroy: function () {
                    // In jQuery UI 1.8及以前用法 
                    $.Widget.prototype.destroy.call(this);
                    // In jQuery UI 1.9及以后
                }
            });

　開發要點，控件內部方法以下划線（_)開頭。

以下來個簡單和按鈕監控，雖然這個不應該用JUI弄（簡單JQ插件擴展就可以了），但還是可以看用JUI應該怎么寫

控件代碼：

  (function ($) {
            $.widget("myns.buttonMonitor", {
                //默認參數 
                options: {

                },
                //初始化，控件生命周期內只運行一次
                _init: function () {
                    var self = this;
                    $(self.element[0]).find('input:button').on('click', function (jevent) {
                        alert("已監測到你按下了"+jevent.target.value+"按鈕!");
                    });
                },
                //創建控件，控件生命周期內會運行多次 
                _create: function () {
                },
                //設置參數 
                _setOption: function (key, value) {
                    // In jQuery UI 1.8及以前用法 
                    $.Widget.prototype._setOption.apply(this, arguments);
                    // In jQuery UI 1.9及以后用法
                    this._super("_setOption", key, value);
                },
                // 釋放控件
                destroy: function () {
                    // In jQuery UI 1.8及以前用法 
                    $.Widget.prototype.destroy.call(this);
                    // In jQuery UI 1.9及以后
                }
            });
        })(jQuery);

　　調到代碼:

   $(function () {
            $('#maincontainer').buttonMonitor();//maincontainer為按鈕的容器
        });

　　效果可以看下

 http://jsfiddle.net/leez20120909/7vGUE/embedded/result/

效果源代碼

http://jsfiddle.net/leez20120909/7vGUE/