para eliminar el círculo alrededor de los íconos de formas circulares en jQuery UI, además de conocer su implementación a través de los ejemplos. Esta tarea se puede lograr haciendo uso de la clase ui-nodisc-icon .
jQuery UI es un conjunto sistemáticamente organizado de interacciones de interfaz de usuario, efectos, widgets y temas creados sobre la biblioteca jQuery JavaScript. La interfaz de usuario de jQuery proporciona una serie de iconos que se pueden utilizar para implementar los nombres de clase con los elementos. Los iconos son la representación simbólica para expresar las características esenciales. El círculo oscuro semitransparente detrás del ícono mejora la experiencia general del usuario del sitio web. Este disco circular también se puede eliminar especificando la clase ui-nodisc-icon para el elemento o su contenedor si no se prefiere. Por ejemplo, la primera imagen contiene la hamburguesa con el disco circular gris. Después de aplicar la clase especificada, se eliminó el círculo oscuro semitransparente.
Con Circulo Gris
Sin Circulo Gris
Sintaxis:
.ui-icon-{icon type}-{icon sub description}-{direction}
Los iconos también se pueden integrar en una serie de widgets de jQuery UI, es decir, acordeón, botón, menú.
Acercarse:
- Agregue los siguientes enlaces CDN a la página HTML:
<enlace rel=”hoja de estilo” 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” integridad=”sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=” crossorigin=”anónimo”>
</script>
- Cree un ícono prohibido usando el botón y use la clase ui-icon-forbidden para el botón.
- Use la clase ui-nodisc-icon para eliminar el círculo gris alrededor de los íconos.
Ejemplo 1: este ejemplo describe la clase Icon de jQuery con un círculo gris.
HTML
<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>
Explicación: aquí hemos creado un botón con la clase ui-icon-forbidden para obtener el icono prohibido. También hemos usado algo de CSS en el botón para hacerlo transparente y establecer el borde de un botón en 0. De manera predeterminada, el ícono creado tendrá un círculo gris alrededor.
Producción:
Con Circulo Gris
Ahora, veremos el ícono sin un círculo gris. Hemos creado un botón con la clase ui-icon-forbidden para obtener el icono prohibido, junto con eso, también hemos usado algo de CSS en el botón para hacerlo transparente y establecer el borde del botón en 0. Para eliminar el círculo gris alrededor del ícono, hemos usado la clase ui-nodisc-icon , esta clase eliminará el círculo gris alrededor de los íconos.
Ejemplo 2: este ejemplo describe la clase Icon de jQuery sin un círculo gris.
HTML
<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>
Producción:
Sin Circulo Gris
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA