jQuery Mobile es una tecnología basada en la web que se utiliza para crear contenido receptivo al que se puede acceder en todos los teléfonos inteligentes, tabletas y computadoras de escritorio.
En este artículo, utilizaremos la opción jQuery Mobile Selectmenu iconpos . Esta opción se utiliza para especificar la posición del icono en el botón de selección. Sus valores posibles son izquierda, derecha, arriba, abajo, sin texto. El valor sin texto mostrará la selección como un botón de solo icono sin retroalimentación de texto.
Sintaxis: inicialización del menú Select con la opción iconpos especificada.
$( ".selector" ).selectmenu({
iconpos: "right"
});
-
Configuración de la opción iconpos:
$( ".selector" ).selectmenu( "option", "iconpos", "right" );
-
Obtener la opción iconpos:
var disabled = $( ".selector" ) .selectmenu( "option", "iconpos" );
Enlace CDN: Primero, agregue los scripts de jQuery Mobile necesarios para 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 describe la opción jQuery Mobile Selectmenu iconpos .
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>
<style>
.highlight {
border: 5px solid green;
}
</style>
</head>
<body>
<center>
<div data-role="page">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Selectmenu iconpos Option</h3>
<div role="main" class="ui-content">
<label for="GFG" class="select">
GeeksforGeeks Courses:
</label>
<select name="GFG" id="GFG">
<option value="C">C Programming</option>
<option value="CPP">C++ Programming</option>
<option value="JAVA">Java Programming</option>
<option value="overnight">Python Programming</option>
<option value="WEB">Web Development</option>
</select>
</div>
<input type="button" id="Button"
value="Value of the iconpos option">
<div id="log"></div>
</div>
</center>
<script>
$(document).ready(function () {
$("#GFG").selectmenu({
iconpos: "right",
classes: {
"ui-selectmenu": "highlight"
}
});
$("#GFG").selectmenu("option", "iconpos", "right");
$("#Button").on('click', function () {
var a = $("#GFG").selectmenu("option", "iconpos");
$("#log").html(a);
});
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jquerymobile.com/selectmenu/#option-iconpos
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA