0

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

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

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

但它不起作用。

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

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

我知道我可以使用

_create: function(){ this_super();}

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

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

当它应该只是<span class="ui-button-text">Yes</span>。

我希望我能够解释我想要做什么以及我遇到的问题......对不起，我充其量只是一个休闲程序员。

编辑以添加示例代码：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();
  }
})

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

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

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

希望这可以解决问题。

4

1 回答 1

1

小部件（）返回：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" />

于 2020-01-29T02:57:27.177 回答