JQuery UI has a nice widget for the buttons, problem is, imoh, that when I want to assign an icon for a button I have to do it for each button separatly.
Here is the sample from the jquery ui website :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Button - Icons</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { $( "button:first" ).button({ icons: { primary: "ui-icon-locked" }, text: false }).next().button({ icons: { primary: "ui-icon-locked" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }, text: false }); }); </script> </head> <body> <button>Button with icon only</button> <button>Button with icon on the left</button> <button>Button with two icons</button> <button>Button with two icons and no text</button> </body> </html>
It works but I think it’s not the easiest way, I would prefer to configure the html tag with a property to say what is the icon I want.
So my solution is to use the data attribute of the element on which we want the button widget to be applied
<a href="#" class="button" data-icon="ui-icon-pencil" id="myid">my text button</a>
and in the document ready of the page
$(document).ready(function () { $(".button").button({ create: function (event, ui) { var icon = $(this).data("icon"); if (HasValue(icon)) { $(this).button("option", "icons", { primary: icon }); } } }); });
Basicly, when a button is created, I check if I have a data-icon property setted, and if so I use it to set the primary icon property of the button.
I’m working with ASP.NET, so if I use WebForms I put that little piece of code in my master page, and if I’m workgin with MVC, I put the code in the _layout.cshtml file.
This way I don’t have to worry about setting the icon for each button.
But where are the icons defined ?
The example I used sooner (ui-icon-pencil) is a class of the icon set of a jquery mobile theme (you can see what’s available on the themeroller page).
If I want to define a custom icon, I do it this way
in the CSS:
.ui-icon.ui-icon-xlsx { background: transparent url('images/xlsx.png') no-repeat; }
and in the html:
<a href="#" class="button" data-icon="ui-icon-pdf">XLSX</a>
Incoming search terms:
- jquery ui button text after custom icon
- jquery icons
- https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1839 Mqf8WGIX7s3qD7uLvutu9gxie-OQDCa2ySTINzxj-w6aCXQGfGCWEjEIbmCktHLl d596d05459a5498b90ed63678a85b223af586124&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
- https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1837 sXzSMm0piBaFa0h2fbR563ejczMlrKDL1oPxTT_O6dOncfmOyf0LBPhGNXLcw8n9 df0ee9b1e96c3a9ef3b954fa54e9438162e88b36&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
- https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1836 oaSVkdZkA6LJeq_nfXgwmY4Xb5MIxm3ZjH-vgammjutA6_Juelx3WEX9lDcPUL-4 4b3e6d12c0d23d3fb59ff29d4adbfa768ccdff51&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
- https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1827 T2kAQ2K_vzbrtvOQ_MYpJYKwHbLKQdqSDlc1xOuw0bDnKofn3-g7fIFrw5J0_fqI 6dd2d5a7913fbc9a904f7f6327264899006b5ec9&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
- https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1825 iYptg4w29Vufvl69omrtpMsn_p1Ft2Gi9i6qzd8rbbEFK2uoWIyTKfCedBSepN5J f0a97f4da9ac6ab4379bd27cc8f1ee177b72db8b&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme
- button(option icons not working
- button(option icons
- assign ui