📅 最后修改于: 2023-12-03 15:02:13.017000 🧑 作者: Mango
jQuery UI 是一款基于 jQuery 的 UI 组件库，提供了许多常用的 UI 组件，包括按钮、菜单、对话框、进度条等。选择菜单是其中的一个组件，可以用于在一组选项中选择一个或多个选项。
本文介绍如何在 jQuery UI 选择菜单中添加图标，并通过代码示例演示实现过程。
要在 jQuery UI 选择菜单中添加图标，需要使用 CSS 指定对应的图标和样式。可以使用 jQuery UI 默认提供的图标，也可以自定义图标。
jQuery UI 提供了一组预定义的图标，可以直接使用。只需在菜单项的 <span> 标签中指定图标的 CSS 类即可。例如，使用 ui-icon-clock 类添加一个时钟图标：
<ul>
<li><a href="#"><span class="ui-icon ui-icon-clock"></span>选项 1</a></li>
<li><a href="#"><span class="ui-icon ui-icon-disk"></span>选项 2</a></li>
<li><a href="#"><span class="ui-icon ui-icon-folder-collapsed"></span>选项 3</a></li>
</ul>
以上代码中，ui-icon-* 类指定了图标的样式，ui-icon-clock 类指定了具体的时钟图标。
如果默认的图标不能满足需求，可以自定义图标。自定义图标需要定义对应的 CSS 样式和图片。例如，定义一个名为 ui-icon-myicon 的 CSS 类，指定如下样式：
.ui-icon-myicon {
background-image: url("myicon.png");
background-size: 16px 16px;
}
以上代码中，background-image 属性指定了图片的 URL，background-size 属性指定了图片的尺寸。
然后，在菜单项的 <span> 标签中使用 ui-icon-myicon 类即可添加自定义图标。
以下代码演示如何在 jQuery UI 选择菜单中添加图标：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 选择菜单图标选项</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.ui-icon-myicon {
background-image: url("myicon.png");
background-size: 16px 16px;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("ul").menu({
icons: { submenu: "ui-icon-circle-triangle-e" }
});
});
</script>
</head>
<body>
<ul>
<li><a href="#"><span class="ui-icon ui-icon-clock"></span>选项 1</a></li>
<li><a href="#"><span class="ui-icon ui-icon-disk"></span>选项 2</a></li>
<li><a href="#"><span class="ui-icon ui-icon-folder-collapsed"></span>选项 3</a></li>
<li><a href="#"><span class="ui-icon ui-icon-settings"></span>选项 4</a></li>
<li><a href="#"><span class="ui-icon ui-icon-flag"></span>选项 5</a></li>
<li><a href="#"><span class="ui-icon ui-icon-myicon"></span>自定义图标</a></li>
</ul>
</body>
</html>
以上代码中，菜单项的 <span> 标签使用了 ui-icon 类和 ui-icon-* 类指定了不同的图标，其中 ui-icon-myicon 类指定了自定义的图标。菜单组件的初始化代码使用 menu() 方法，其中 icons 选项指定了子菜单的图标为圆形三角形。