如何在初始化後動態更改按鈕的jQueryUI圖標？

Question

<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從ui-icon-gear到ui-icon-locked關聯的圖標（jQueryUI icon）。

但我不知道這是否支持？

Answer 1

您可以撥打.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" } 
     }); 
    });   
}); 

You can test it here。