Crear prompt personalizado para inserción de datos con JqueryUI

jQuery UI es una biblioteca de componentes para el framework jQuery que le añaden un conjunto de plug-ins, widgets y efectos visuales para la creación de aplicaciones web. Cada componente o módulo se desarrolla de acuerdo a la filosofía de jQuery (find something, manipulate it: encuentra algo, manipúlalo).

Hoy veremos como podemos utilizar esta biblioteca para crear una ventana de entrada prompt personalizada para nuestra aplicación web.

<!DOCTYPE html>
<html lang="es">
<head>
        <meta charset="UTF-8">
        <title>Input Personalizado</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script>
                var texto;
                //Función para el manejo de la tecla enter en el dialog personalizado
                $(document).ready(function(){
                        $("#add").click(function(){
                        $("#dialog-form").dialog("open");
                    });
                        $("#dialog-form").on("keydown", "input", function (event) {
                    var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
                    if (keycode == 13) {
                        texto = $("#txt").val();
                                if (texto != null && texto != "") {
                                        texto = $("#entrada").val(texto);
                                    }
                                    $("#txt").val("");
                                    $("#dialog-form").dialog("close");
                        return false;
                    } else {
                        return true;
                    }
                });
        });
        //Llamado del dialog
                $(function() {
                    $("#dialog-form").dialog({
                        autoOpen: false,
                        modal: true,
                        title: "Ingresar Texto",
                        buttons: {
                            "Aceptar": function() {
                                texto = $("#txt").val();
                                if (texto != null && texto != "") {
                                                texto = $("#entrada").val(texto);
                                        }
                                        $("#txt").val("");
                                $(this).dialog("close");
                            },
                            "Cancelar": function() {
                                $(this).dialog("close");
                            }
                        }
                    });
                });
        </script>
</head>
<body>
        <input id="entrada" readonly="true" type="text">
        <button id="add">Ingresar Texto</button>
        <div id="dialog-form">
    <form>
        <input type="text" name="text" id="txt" class="text ui-widget-content ui-corner-all" />
    </form>
</body>
</html>

 

Tags: