如何在初始化后动态更改按钮的jQueryUI图标？

Question

如何在初始化后动态更改按钮的jQueryUI图标？

8

<script>
    $(function() 
    {
        $( "#dynabutton" ).button(
        {
            icons: 
            {
                primary: "ui-icon-gear"
            },
            text: false
        });

        $( "#swap" ).button(
        {
            icons: 
            {
                primary: "ui-icon-locked"
            },
            text: true
        }).click(function(event)
        {
            // change #dynabutton icon from
            // "ui-icon-gear"
            // to:
            // "ui-icon-locked"
        });         
    });
    </script>



<div class="demo">

<button id="dynamic_button">Button with gear icon</button>
<button id="swap">Swap icons</button>

</div>

点击 #swap 按钮时，我希望能够将与#dynabutton 相关联的图标（jQueryUI 图标）从 ui-icon-gear 切换到 ui-icon-locked。

但我不知道是否支持此功能？

- Michael Murphy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

您可以调用 .button("option", options) 以后设置选项(就像其他jQuery UI小部件一样)，包括图标：

$(function() {
    $( "#dynabutton" ).button({
        icons: { primary: "ui-icon-gear" },
        text: false
    });
    $( "#swap" ).button({
        icons: { primary: "ui-icon-locked" },
        text: true
    }).click(function() {
        $( "#dynabutton" ).button("option", {
          icons: { primary: "ui-icon-locked" }
        });
    });         
});

你可以在这里测试。