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
