En este artículo, aprenderemos a diseñar la función de selección de pantalla completa de Bootstrap para dispositivos móviles.
- Proporciona funcionalidad de selección de pantalla completa HTML avanzada.
- Proporciona animaciones de entrada y salida.
- Proporciona devoluciones de llamada de función de eventos abiertos y cerrados.
- Proporciona botones animados CSS3, menús desplegables y textos.
Descargue las bibliotecas precompiladas requeridas del enlace y guárdelas en la carpeta de trabajo correspondiente para implementar los siguientes ejemplos. Los desarrolladores deben cuidar las rutas de archivo adecuadas mientras codifican y ejecutan.
Ejemplo 1: El siguiente código es el ejemplo básico del complemento Bootstrap Fullscreen Select . Estableceremos atributos o propiedades en este código básico en otros ejemplos posteriores a este.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport"
content="width=device-width,initial-scale=1,
user-scalable=no">
<script src="demo/libs/jquery.min.js">
</script>
<script src="demo/libs/bootstrap.min.js">
</script>
<link rel="stylesheet"
href="demo/libs/bootstrap.min.css">
<link rel="stylesheet"
href="demo/libs/bootstrap-theme.min.css">
<link rel="stylesheet"
href="demo/demo.min.css">
<link rel="stylesheet" type="text/css"
href="css/bootstrap-fullscreen-select.css">
<script type="text/javascript"
src="js/bootstrap-fullscreen-select.js">
</script>
<style type="text/css">
body {
font-family: Arial, sans-serif;
padding: 20px;
margin: 0 auto;
}
</style>
</head>
<body>
<br/>
<b>Bootstrap Fullscreen Select Feature</b>
<p></p>
<div id="containerID">
<select class="form-control mobileSelect">
<option value="samsung">Samsung</option>
<option value="sony">Sony</option>
<option value="oneplus">OnePlus</option>
<option value="nokia">Nokia</option>
</select>
</div>
<script type="text/javascript">
$(function () {
$('.mobileSelect').mobileSelect();
});
</script>
<script type="text/javascript"
src="demo/demo.min.js">
</script>
</body>
</html>
Producción:
- Antes de seleccionar:
- Después de seleccionar:
Nota: La estructura de código HTML básica anterior se utiliza para más ejemplos. Los fragmentos de código son los siguientes.
Ejemplo 2: en el siguiente código de ejemplo, agregaremos la función de selección múltiple de Bootstrap y deshabilitaremos el segundo grupo desplegable. En la parte JavaScript del código, aprenderemos a agregar opciones de animación y relleno . Varias otras opciones también están disponibles, el desarrollador puede probar de acuerdo a sus necesidades.
HTML
<div id="containerID">
<select class="form-control mobileSelect"
data-style="primary" multiple>
<optgroup label="first group">
<option value="samsung">Samsung</option>
<option value="sony">Sony</option>
<option value="oneplus">OnePlus</option>
</optgroup>
<!-- Making the second group as disabled-->
<optgroup label="Second group"
data-style="danger" disabled>
<option value="nokia">Nokia</option>
<option value="apple">Apple</option>
</optgroup>
</select>
</div>
<script type="text/javascript">
$(function () {
$('.mobileSelect').mobileSelect({
title: 'For all selected phones',
// For animate effect of screen
animation: 'zoom',
padding: {
top: '50px',
left: '50px',
right: '50px',
bottom: '50px'
}
}
);
});
</script>
Producción:
Ejemplo 3: el siguiente código demuestra el activador de eventos «clic», «al abrir» y «al cerrar» para el complemento. onOpen se activa cuando se inicia la animación de apertura y onClose se activa después de que se realiza la animación de cierre.
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width,
initial-scale=1, user-scalable=no">
<script src="demo/libs/jquery.min.js">
</script>
<script src="demo/libs/bootstrap.min.js">
</script>
<link rel="stylesheet"
href="demo/libs/bootstrap.min.css">
<link rel="stylesheet"
href="demo/libs/bootstrap-theme.min.css">
<link rel="stylesheet"
href="demo/demo.min.css">
<link rel="stylesheet" type="text/css"
href="css/bootstrap-fullscreen-select.css">
<script type="text/javascript"
src="js/bootstrap-fullscreen-select.js">
</script>
<style type="text/css">
body {
font-family: Arial, sans-serif;
padding: 20px;
margin: 0 auto;
}
#containerID {
width: 300px;
}
#clickDivID {
width: 300px;
height: 100px;
color: white;
background-color: green;
}
</style>
</head>
<body>
<b>
Fullscreen Select Feature
with event triggers
</b>
<div id="containerID">
<select class="form-control mobileSelect"
data-triggerOn="#clickDivID">
<option value="samsung">Samsung</option>
<option value="sony">Sony</option>
<option value="oneplus">OnePlus</option>
<option value="nokia">Nokia</option>
</select>
<div id="clickDivID">
<b>On click of this div, the
dropdown is activated.
</b>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.mobileSelect').mobileSelect({
title: 'Select any option',
buttonClear: 'Clear',
onClose: function () {
alert('On Close event: '
+ $(this).val());
},
onOpen: function () {
alert('On Open event: '
+ this.val());
}
});
});
</script>
<script type="text/javascript"
src="demo/demo.min.js">
</script>
</body>
</html>
Producción:
- El siguiente cuadro de mensaje aparece cuando se activa el evento «abrir» para el complemento de selección de pantalla completa de Bootstrap.
- Cuando el usuario selecciona una opción después de que se activa el evento «clic» para el «div» de HTML, se muestra el siguiente resultado.
- El siguiente cuadro de mensaje aparece cuando se activa el evento «cerrar» para el complemento.
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA