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/

 

转载于:https://www.cnblogs.com/lee5945/p/3867559.html