如何对小部件进行子类化

时间:2011-03-07 10:07:39

标签: jquery-ui jquery-ui-widget

jQuery UI 1.8添加了使用以下代码扩展小部件的功能:

$.widget("my.weirdbutton", $.ui.button, {
});

现在我可以创建一个weirdbutton,它的工作方式很像按钮:

$("#myButton").weirdbutton();

然而,只有怪异的按钮事件被解雇了。所以,如果我有像

这样的东西
$(".button").bind("buttoncreate", function() { 
    console.log("a button was created"); 
});

我会想念所有奇怪的按钮。这可以通过手动触发奇怪按钮小部件中的按钮事件来解决。不是很好,但有效。

更大的问题是像这样的代码不起作用:

$("#mybutton").weirdbutton();
$("#mybutton").button("option", "text", "My New Text");

第二行不是在现有按钮上设置选项,而是创建一个新选项。我不知道如何解决这个问题。

那么,有没有办法制作一个遵循Liskov Substitution Principle

的子类窗口小部件

1 个答案:

答案 0 :(得分:3)

我不知道.bind方法,但可以使用此方法替换初始_create方法:

$.widget("my.weirdbutton", $.ui.button, {
    _create: function() {
       $.ui.button.prototype._create.call(this);
       console.log("a button was created");
    }
});  

然后,如果你做(在文档中):

$(function() {
  $("#myButton").weirdbutton();      
});

你应该得到console.log

此处的完整代码:http://jsbin.com/icota4/11/edit