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