极客教程如何去除jQuery UI中图标周围的灰色圆圈
在这篇文章中，我们将学习如何去除jQuery UI中圆形图标周围的灰色圆圈，同时通过实例了解其实现。这个任务可以通过利用ui-nodisc-icon类来完成。
jQuery UI是一套系统地组织的用户界面交互、效果、小工具和主题，建立在jQuery JavaScript库之上。jQuery UI提供了大量的图标，可以利用这些图标来实现元素的类名。图标是表达基本特征的符号代表。图标后面的半透明的黑圈增强了网站的整体用户体验。如果不喜欢的话，也可以通过给元素或其容器指定ui-nodisc-icon类来移除这个圆盘。例如，第一张图片包含带有灰色圆盘的汉堡包。在应用指定的类之后，半透明的黑圆圈被移除。
带灰色圆环
不含灰色圆圈
语法:
.ui-icon-{icon type}-{icon sub description}-{direction}
这些图标也可以被集成到一些jQuery UI的部件中，例如，手风琴、按钮、菜单。
步骤:
- 在HTML页面上添加以下CDN链接。
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css” />
<script src=”http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js”></script>
<script src=”https://code.jquery.com/ui/1.11.4/jquery-ui.min.js” integrity=”sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=” crossorigin=”anonymous”>
</script>
- 使用按钮创建一个禁止的图标，并在按钮上使用ui-icon-forbidden类。
- 使用ui-nodisc-icon类来移除图标周围的灰色圆圈。
例子1：这个例子描述了灰色圆圈的jQuery Icon类。
<html>
<head>
<title>jQuery UI Icons</title>
<link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
<script src=
"https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"
integrity=
"sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="
crossorigin="anonymous">
</script>
<style>
.btntrans {
background-color: #dd3355;
border: 0;
box-shadow: none;
}
.container {
padding-top: 25px;
height: 70px;
background-color: #DD3355;
}
</style>
</head>
<body>
<div class="container">
<button class= "ui-btn btntrans
ui-shadow
ui-corner-all
ui-btn-icon-left
ui-icon-forbidden
ui-btn-icon-notext
ui-corner-all">
</button>
</div>
</body>
</html>
解释：在这里，，我们创建了一个类为ui-icon-forbidden的按钮来获得禁止的图标。我们还在按钮上使用了一些CSS，使其透明，并将按钮的边框设置为0。
输出:
带灰色圆环
现在，我们将看到没有灰色圆圈的图标。我们创建了一个类为ui-icon-forbidden的按钮，以获得禁止的图标，同时，我们还在按钮上使用了一些CSS，使其透明，并将按钮的边框设置为0。为了去除图标周围的灰色圆圈，我们使用了ui-nodisc-icon类，这个类将去除图标周围的灰色圆圈。
例子2：这个例子描述了没有灰圈的jQuery Icon类。
<html>
<head>
<title>jQuery UI Icons</title>
<link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src=
"http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
<script src=
"https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"
integrity=
"sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="
crossorigin="anonymous">
</script>
<style>
.btntrans {
background-color: #dd3355;
border: 0;
box-shadow: none;
}
.container {
padding-top: 25px;
height: 70px;
background-color: #DD3355;
}
</style>
</head>
<body>
<div class="container">
<button class="ui-btn btntrans
ui-shadow
ui-corner-all
ui-btn-icon-left
ui-icon-forbidden
ui-btn-icon-notext
ui-nodisc-icon
ui-corner-all">
</button>
</div>
</body>
</html>
输出:
不含灰色圆圈