Menús select personalizados
Las plataformas móviles tienen su propia forma de mostrar un menú de selección.
Si desea que el menú de selección muestre lo mismo en todos los dispositivos móviles, use el menú de selección personalizado de jQuery, el atributo
data-native-menu = "false".
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Select Menus</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="demoform.asp">
<fieldset class="ui-field-contain">
<label for="day">Select Day</label>
<select name="day" id="day" data-native-menu="false">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</select>
</fieldset>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
Resultado:
Al hacer Click
Nota: Para seleccionar múltiples opciones en el menú de selección, use el atributo multiple en el elemento <select>
Resultado:
Al hacer Click
Nota: Para seleccionar múltiples opciones en el menú de selección, use el atributo multiple en el elemento <select>
Resultado:
No hay comentarios:
Publicar un comentario