jQuery Mobile es una tecnología basada en la web y una excelente creación de interfaces de interfaz de usuario para las páginas web que se pueden usar para crear contenido receptivo para sitios web a los que se puede acceder en todo tipo de teléfonos inteligentes, tabletas y computadoras de escritorio.
En este artículo, usaremos la opción de dirección del grupo de control de jQuery Mobile para agregar la dirección de los elementos del grupo de control. Su valor por defecto es vertical .
Sintaxis:
La siguiente sintaxis se usa para inicializar el grupo de control con la opción de dirección .
$( ".selector" ).controlgroup({
direction: "horizontal"
});
-
Obtener la opción de dirección .
var direction = $( ".selector" ).controlgroup( "option", "direction" );
-
Establezca la opción de dirección .
$( ".selector" ).controlgroup( "option", "direction", "horizontal" );
Vínculos de CDN: agregue los siguientes scripts de jQuery Mobile que necesitará en su proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”>
<script src=” //code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile- 1.5.0-alpha.1.min.js”></secuencia de comandos>
Ejemplo: Este ejemplo demuestra la opción de dirección del grupo de control de jQuery Mobile .
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src=
"//code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
</script>
<script>
$(function () {
$("#btn").on('click', function () {
$("#divID").controlgroup({
type: "horizontal"
});
});
});
</script>
</head>
<body>
<center>
<div data-role="page" id="page1">
<div data-role="header">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3> jQuery Mobile Controlgroup direction Option</h3>
</div>
<div role="main" class="ui-content">
<div data-role="controlgroup" id="divID">
<a href=
"https://www.geeksforgeeks.org/data-structures/"
class="ui-btn">
Data Structure
</a>
<a href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms/"
class="ui-btn">
Algorithm
</a>
<a href=
"https://www.geeksforgeeks.org/web-development/"
class="ui-btn">
Web Development
</a>
<a href=
"https://www.geeksforgeeks.org/java/"
class="ui-btn">
Java Programming
</a>
</div>
</div>
<input type="button" id="btn"
style="width:250px;"
value="Change to Horizontal">
</div>
</center>
</body>
</html>
Producción:
Opción de dirección del grupo de control de jQuery Mobile
Referencia: https://api.jquerymobile.com/controlgroup/#option-direction
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA