jQuery UI widget源码解析

// 假设我们有一个简单的jQuery UI Widget，名为myWidget
(function( $ ) {
 
    $.widget( "custom.myWidget", {
 
        // 初始化方法
        _create: function() {
            this.element.text( "Hello, World!" );
        },
 
        // 更新部件的选项
        _setOption: function( key, value ) {
            this._super( key, value );
            if ( key === "disabled" ) {
                this.element( this.options.disabled ? "disable" : "enable" );
            }
        },
 
        // 销毁部件的方法
        destroy: function() {
            this.element.removeData( "custom.myWidget" );
            this.element.unbind( ".custom.myWidget" );
            this.element.removeAttr( "aria-disabled" );
            this.element.removeClass( "custom-myWidget-disabled ui-state-disabled" );
        }
    });
 
})( jQuery );
 
// 使用方法
$( "#myElement" ).myWidget();

这个简单的代码示例展示了如何定义一个基本的jQuery UI部件，它会将指定元素的文本设置为"Hello, World!"。它还展示了如何实现部件的初始化、选项设置和销毁方法。这是学习如何创建自定义jQuery UI部件的一个很好的起点。