¿Cómo cambiar dinámicamente el icono jQueryUI de un botón después de la inicialización?

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> 

al hacer clic con el botón #swap, quiero cambiar el icono (jQueryUI icon) asociado con #dynabutton de ui-icon-gear a ui-icon-locked.

Pero no sé si esto es compatible?

Answer 1

Puede llamar .button("option", options) para establecer las opciones más tarde (al igual que otros widgets jQuery UI), incluyendo los iconos:

$(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.