为什么$(...).widget未定义? [英] Why is $(...).widget undefined?

问题描述

根据 jQueryUI Widget Factory文档，应该可以调用jQuery对象上名为 widget 的方法来操纵小部件.例如:

According to jQueryUI Widget Factory documentation, it should be possible to call a method named widget on a jQuery object to manipulate the widget. For example:

$( ".selector" ).widget({
  disabled: true
});

但是，尝试调用此方法会引发异常，并且实际上$(...).widget是 undefined :

However, trying to call this method throws an exception, and it actually appears that $(...).widget is undefined:

$('#btn').button();
$('body').append('<br/><br/>$(\'#btn\').widget is ' + $('#btn').widget);
console.log($('#btn').widget);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<button id="btn">Button</button>

说明文件是否错误/已过期，或者我在这里还缺少其他内容?

Is the documentation wrong / out of date, or is there something else I'm missing here?

推荐答案

文档可能有些混乱.它使用名称"widget"作为自定义窗口小部件的占位符，以提供默认基本窗口小部件提供的选项/方法的示例. JQueryUI本身从不提供具有显式名称"widget"的窗口小部件.您可以使用

The documentation is perhaps a bit confusing. It uses the name "widget" as a placeholder for your custom widget, in order to provide an example of the options/methods provided by the default base widget. JQueryUI itself never provides a widget with the explicit name "widget". You can use

$.widget("ns.widget", {});

使样本按原样运行.

此外，请注意，由于继承模型的原因，在节点上实例化派生的窗口小部件只会为派生的窗口小部件创建数据，而不会为基础创建数据.因此，您只能使用实例化窗口小部件的名称来调用方法:

Also, note that due to the inheritance model, instantiating a derived widget on a node will only create the data for the derived widget, not for the base. Thus you can only call methods with the name of the instantiated widget:

$.widget("ns.subButton", $.ui.button, {});
$("#btn").subButton();
$("#btn").subButton("widget"); // <- correct use
$("#btn").button("widget"); // <- error

$.widget("my.widget", {});
$('#btn').widget();
$('body').append('<br/><br/>$(\'#btn\').widget is ' + $('#btn').widget);
console.log($('#btn').widget);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<button id="btn">Button</button>

这篇关于为什么$(...).widget未定义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！