2

使用 jQuery UI CSS 框架中默认未定义的自定义图标自定义 jquery ui 选择菜单按钮图标（不是下拉图标）的最简单方法是什么。

我看到许多使用 CSS 自定义 jquery ui 按钮图标的示例，但没有看到选择菜单按钮图标。

<!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>
4

2 回答 2

2

是的，您可以通过提供自定义类名轻松地在按钮上使用自定义样式，如下所示：

$( "#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/

于 2014-11-29T16:33:19.407 回答
0

jQuery UI 图标都在 png 文件中。您的主题图像是This。您可以下载该库，然后编辑此文件。

您还可以创建自己的 CSS 规则并覆盖图标。只需检查元素，看看他的风格是什么。selectmenu样式是.ui-state-default .ui-icon例如。

于 2014-11-29T16:33:30.903 回答