jquery ui 继承按钮小部件

Question

我正在尝试创建一个基于按钮小部件的新小部件，并且想知道如何修改现有 jquery ui 按钮的按钮样式（如果已创建）或如果没有，请创建一个新的 jquery 按钮。我如何检查它是否已经创建，如果它有我如何修改样式？

例如修改现有的 jquery 按钮...我希望能够访问 buttonElement

this.buttonElement.removeClass('ui-corner-all');

但是没用。

但这适用于现有的 jquery 按钮...

this.element.on('click', function(){...});

我知道我可以使用

_create: function(){ this_super();}

创建一个新按钮，我可以轻松访问 buttonElement...但是正如我之前所说，如果该按钮已经存在，它会创建 2 个 jquery 按钮。像这样...

Yes

当它应该只是 Yes.

我希望我能够解释我想做什么以及我运行遇到的问题...抱歉，我充其量只是一个临时程序员。

编辑以添加示例代码： HTML:

<label for="testcb" >Yes</label>
<input type="checkbox" id="testcb" name="testcb"/>

JS:

var checkbox=$('body').find(':checkbox');
checkbox.each(function(){
  $(this).button();
})

Jquery ui 小部件：

$.widget( "new.checkbox", $.ui.button,{
  _create: function(){
    this._super();
  }
})

结果：添加 double，它具有应用于按钮的加倍样式的效果

<span class="ui-button-text">
  <span class="ui-button-text">Yes</span>
</span>

我知道我可以简单地添加 $('#testcb').button('destroy');，但我希望能够通过检测元素是否已添加 ui.button 在小部件中执行此操作。如果它已经创建，我想修改 testcb 元素。我也知道 buttonElement 是 ui.button 创建的可以修改的值，但我不能从我的小部件 'get' 到它。

希望这能解决问题。

Answer 1

widget() Returns: jQuery

Returns a jQuery object containing the element visually representing the button. This method does not accept any arguments.

查看更多：https://api.jqueryui.com/button/#method-widget

您可以通过这种方式修改Widget。

$(function() {
  $("input:checkbox").each(function() {
    $(this).button();
    var b = $(this).button("widget");
    b.removeClass("ui-corner-all");
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="testcb">Yes</label>
<input type="checkbox" id="testcb" name="testcb" />

jquery ui 继承按钮小部件

jquery ui inherite button widget

jquery

jquery-ui

inherited-widget