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创建的值，可以修改，但我无法从其小部件中“获取”它。

希望这可以清除一切。

Answer 1

widget（）返回：jQuery

返回一个jQuery对象，其中包含可视化表示按钮的元素。此方法不接受任何参数。

查看更多：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继承按钮小部件

1 个答案: