jQuery UI widget() 方法

jQuery UI widget() 方法是一种用于创建可重用的插件的方法。通过使用 widget() 方法，我们可以轻松地从原型创建新的、自定义的jQuery UI插件。

语法

$.widget( name, base, prototype );

• name： 字符串类型，表示我们要创建的自定义插件的名称。
• base： 指向要扩展的基础类的一个可选引用，以覆盖默认的 jQuery.ui.widget 类。
• prototype： 包含所有要添加到插件的方法和属性的对象。

示例

$.widget( "custom.myWidget", {

  // 默认选项
  options: {
    someValue: null
  },

  // _create() 方法用来初始化 widget
  _create: function() {
    console.log( "myWidget created" );
  },

  // _setOption() 方法用来改变 widget 选项
  _setOption: function( key, value ) {
    console.log( key, value );
    this._super( key, value );
  },

  // destory() 方法用来清除 widget
  destroy: function() {
    console.log( "myWidget destroyed" );
    this._super();
  }
});

如上所示，我们定义了一个名为“myWidget”的插件，包含了三个方法：

• _create(): 在创建插件时被调用。
• _setOption(): 在改变插件选项时被调用。
• destroy(): 在清除插件时被调用。

可以通过以下方式来创建自定义的jQuery UI插件：

$( ".selector" ).myWidget({ someValue: "Hello World" });

此时，我们使用jQuery选择器来选中一个DOM元素,并传入一些数据。此时会自动调用_myWidget_插件，实例化一个对象，并将其绑定到jQuery选择器返回的每一个DOM元素上。

总结

jQuery UI widget() 方法可以让你很容易地创建自定义的jQuery UI插件，可以为你的网站增添更多的交互体验。拥有一定的JavaScript基础后，相信你已经对 widget() 方法的使用方法有了一定的了解。