How to dynamically change the jQueryUI icon of a button after initialization?
14,680
You can call .button("option", options)
to set options later (like other jQuery UI widgets), including the icons:
$(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" }
});
});
});
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Author by
Admin
Updated on July 28, 2022Comments
-
Admin almost 2 years
<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>
On click of the
#swap
button, I want to switch the icon (jQueryUI icon) associated with#dynabutton
fromui-icon-gear
toui-icon-locked
.But I don't know if this is supported?
-
Nick Patterson over 13 yearsGreat use of jsfiddle! Going to have to try that out.