0

当我创建一个 jQuery UI 元素（例如按钮）时，我会这样做：

<button class="Button" data-options='{ "text": false, "icons": { "primary": "ui-icon-arrowthick-1-n" } }'>Move Up</Button>

我有一些 JS 查找任何内容.Button并将属性提取data-options为 JSON，然后创建传递选项的按钮。

我想知道 jQuery UI 是否有任何内置函数来完成这个？例如，我希望能够通过将选项放在每个子按钮的属性中来设置 Buttonset 中按钮的选项：

<div class="Buttonset">
    <input type="radio" id="SortDirection_Ascending" name="SortDirection" value="Ascending" />
    <label for="SortDirection_Ascending" title="Ascending" data-options='{ "text": false, "icons": { "primary": "ui-icon-arrowthick-1-n" } }'>&nbsp;</label>
    <input type="radio" id="SortDirection_Descending" name="SortDirection" value="Descending" />
    <label for="SortDirection_Descending" title="Descending" data-options='{ "text": false, "icons": { "primary": "ui-icon-arrowthick-1-s" } }'>&nbsp;</label>
</div>

但是 jQuery 不知道如何应用这些选项。我可以在 JS 中执行此操作，就像使用按钮（和其他小部件）一样。但我很好奇这是否已经被不同的属性支持。

澄清：

当我创建一个小部件时，我想知道 jQuery 是否可以自动从元素的属性中提取小部件的选项并将它们应用到小部件。

<button class="Button" data-options='{ "text": false, "icons": { "primary": "ui-icon-arrowthick-1-n" } }'>Move Up</Button>

<script type="text/javascript">
    $(".Button").button();
    /* jQuery saw that this element has a "data-options" attribute and automatically
     * extracted the options from this attribute and applied them to the widget. */
</script>
4

2 回答 2

1

DOM 元素中没有可以设置来完成此操作的属性。您将不得不使用您已经使用的方法，或者在按钮上调用 jquery ui .button() 方法时设置选项。例如：

$( 'button' ).button({
    icons: {
    primary: "ui-icon-locked"
  }
});

唯一的另一种方法是在调用 .button() 之后手动包含 jquery-ui 所做的类和结构。例如：

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button" aria-disabled="false">
  <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
  <span class="ui-button-text">Button with icon on the left</span>
</button>
于 2013-06-05T23:12:33.137 回答
0

jQuery 的data()函数用于将数据附加到 DOM 元素： http ://api.jquery.com/jQuery.data/

$(".Button").data('options')

这从 html 元素中提取数据

http://jsfiddle.net/a5sVM/1/

于 2013-06-05T23:06:25.413 回答