Question

根据jQueryUI Widget Factory documentation，应该可以在jQuery对象上调用名为 widget 的方法来操作窗口小部件。例如：

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

但是，尝试调用此方法会引发异常，实际上$(...).widget 未定义：

＆＃13;

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

＆＃13;

<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>

＆＃13;

文档是错误的/过时的，还是我还缺少其他的东西？

Answer 1

在阅读您链接的文档之后，这似乎是正确的，但有误导性：我认为这里var min = Math.min.apply(null, myArray.map(item => item.Cost)), max = Math.max.apply(null, myArray.map(item => item.Cost));意味着被替换为实际的小部件名称，例如widget或dialog或其他

实际上，为了例如启用或禁用按钮，通常会调用：

menu

并访问小部件本身：

$('#your_button').button('disabled', true);

Answer 2

文档可能有点令人困惑。它使用名称“widget”作为自定义窗口小部件的占位符，以提供默认基本窗口小部件提供的选项/方法的示例。 JQueryUI本身从不提供具有显式名称“widget”的小部件。你可以使用

$.widget("ns.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 undefined？

2 个答案: