En este artículo, aprenderemos cómo crear un grupo de botones en la página. Esto se puede hacer configurando el atributo ‘ rol de datos ‘ en el grupo de control.
grupo de control : agrupa múltiples botones y otros widgets en un conjunto visual, integra visualmente múltiples entradas con estilo de botón de un solo tipo en un grupo.
- datos-mini verdadero | falso: versión de tamaño compacto para todos los elementos del grupo de control.
- tipo de datos horizontal | vertical: para la alineación de elementos horizontal o vertical.
Sintaxis:
<div data-role="controlgroup">
<a href="#" data-role="button">button 1</a>
<a href="#" data-role="button">button 2</a>
<a href="#" data-role="button">button 2</a>
</div>
Enlace CDN:
<enlace rel=”hoja de estilo” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code .jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min .js”></secuencia de comandos>
Acercarse:
En primer lugar, agregue los enlaces CDN de jQuery y JQuery UI anteriores al script o descárguelos a su máquina local. Cree una etiqueta DIV y establezca el atributo de rol de datos en grupo de control. En el contenedor DIV, cree 3 etiquetas de anclaje y establezca el atributo de rol de datos en un botón.
Cambie el color del borde de los botones usando el siguiente código
$("a").css("border-color", "black")
Ejemplo 1: Este ejemplo ilustra el grupo de botones como una lista vertical.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src=
"https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<div data-role="controlgroup">
<a href="#" data-role="button">button 1</a>
<a href="#" data-role="button">button 2</a>
<a href="#" data-role="button">button 2</a>
</div>
<script>
$("a").css("border-color", "black")
</script>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo ilustra el grupo de botones como una lista horizontal. Al establecer el atributo de tipo de datos en horizontal, podemos agrupar botones como listas horizontales.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src=
"https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">button 1</a>
<a href="#" data-role="button">button 2</a>
<a href="#" data-role="button">button 2</a>
</div>
<script>
$("a").css("border-color", "black")
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por pulamolusaimohan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA