使用 jQuery UI CSS 框架中默认未定义的自定义图标来自定义 jquery ui 选择菜单按钮图标(不是下拉图标)的最简单方法是什么。
我看到很多使用 CSS 自定义 jquery ui 按钮图标的示例，但没有看到 selectmenu 按钮图标。
<!doctype html>
<html lang="en">
<head>
<title>SelectMenu Button Test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#buttonone" ).selectmenu({ icons: { button: "ui-icon-triangle-2-n-s" } });
//Replace with custom selectmenu button icon
$( "#buttontwo" ).selectmenu({ icons: { button: "ui-icon-triangle-1-s" } });
//Replace with a second custom selectmenu button icon
});
</script>
</head>
<body>
<select name="buttonone" id="buttonone">
<option>All fields</option>
<option>Field one</option>
<option>Field two</option>
</select>
<select name="buttontwo" id="buttontwo">
<option>All options</option>
<option>Option one</option>
<option>Option two</option>
</select>
</body>
</html>
最佳答案
是的，您可以通过提供自定义类名称轻松地在按钮上使用自定义样式，如下所示:
$( "#selectId" ).selectmenu({ icons: { button: "custom-icon" } });
然后，您只需向该类的 CSS 添加样式规则，如下所示:
.ui-state-default .ui-icon.custom-icon {
background-image: url([your custom image]);
}
简单的 JSFiddle 示例:http://jsfiddle.net/CaseyRule/f7q8sp43/1/
关于jquery - 自定义jquery ui selectmenu按钮图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27204184/