Question

当我创建一个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>

Answer 1

DOM元素中没有可以设置的属性来完成此任务。您必须使用已经使用的方法，或者在按钮上调用jquery ui .button（）方法时设置选项。例如：

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

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

<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>

Answer 2

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

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

这将从html元素中提取数据

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

在元素的属性中设置选项？

2 个答案: