博客

如何去除jQuery UI中图标周围的灰色圆圈

  • Post category:jquery

当我们在使用jQuery UI的图标时，可能会发现图标周围有一个灰色圆圈，这可能会影响我们的UI设计。在本攻略中，我们将详细介绍如何去除jQuery UI中图标周围的灰色圆。以下是一个详细的步骤，包含两个示例说明。

步骤

  1. 引入jQuery UI

在HTML中，需要引入jQuery库CSS和JavaScript文件使用CDN或本地进行引入。以下是一个示例：

<head>
  <title>My jQuery App</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>
  1. 去灰色圆圈

在CSS文件中，我们可以使用以下代码来去除图标周围的灰色圆圈：

.ui-icon {
  background-color: transparent;
  border: none;
}

在上述代码中，我们使用.ui选择器来选择所有jQuery UI图标，并设置background-color为transparent，以便去除背景色。我们还设置border为none，以便去除边框。

  1. 示例

示例1：去除jQuery UI按钮图标周围的灰色圆圈

在这个示例中，我们将去除jQuery UI按钮图标周围的灰色圆圈。以下是完整的HTML和CSS代码：

<!DOCTYPE html>
<html>
<head>
  <title>My jQuery App</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <style>
    .ui-icon {
      background-color: transparent;
      border: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>
<body>
  <button id="my-button">My Button</button>
  <script>
    $(function() {
      $("#my-button").button({
        icons: {
          primary: "ui-icon-gear"
        }
      });
    });
  </script>
</body>
</html>

在上述示例中，我们使用.ui-icon选择器来选择所有jQuery UI图标，并设置background-color为transparent，以便去除背景色。我们还设置border为none，以便去除边框。我们使用$(“#my-button”).button()方法来创建一个jQuery UI按钮，并使用icons`选项来添加一个图标。

示例2：去除jQuery UI菜单图标周围的灰色圆圈

在这个示例中，我们将去除jQuery UI菜单图标周围的灰色圆圈。以下是完整的HTML和CSS代码：

<!DOCTYPE html>
<html>
<head>
  <title>My jQuery App</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <style>
    .ui-icon {
      background-color: transparent;
      border: none;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
</head>
<body>
  <ul id="my-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul  <script>
    $(function() {
      $("#my-menu").menu({
        icons: {
          submenu: "ui-icon-triangle-1-e"
        }
      });
    });
  </script>
</body>
</html>

在上述示例中，我们使用.ui-icon选择器来选择所有jQuery UI图标，并设置background-color为transparent，以便去除背景色。我们还设置border为none，以便去除边框。我们使用$("#my-menu").menu()方法来创建一个jQuery UI菜单，并使用icons选项来添加一个子菜单图标。

结论

通过本攻略，我们了解了如何使用CSS去除jQuery UI中图标周围的灰色圆圈。提供了两个示例，分别演示了如何去除按钮图标和菜单图标周围的灰色圆圈。使用这些方法，我们可以轻松地自定义jQuery UI图标的外观和行为，以满足不同的需求。

Tags: