Jquery-UI Diálogo sobre la marcha, sin DIV

Tengo lo que tengo la sospecha de ser una simple pregunta y después de la búsqueda sospecho que la respuesta a mi pregunta a ser que no, pero para el doble check…

Es posible el uso de la interfaz de usuario Jquery el cuadro de diálogo de configuración de un DIV?

es decir, en lugar de..

$(function() { $( "#dialog" ).dialog();});...

<div id="dialog" title="Do I really need this?">This is a lot of typing just to pass on a simple message</div>

Es posible sólo para tener algo como…

$(function(quickly) { $( "#dialog" ).dialog('this would be much easier');});...

y llamarlo con un rápido() tipo de cosa cuando sea necesario.

Usted puede notar que me enredo mayo de camino a través de Javascript y lo mejor de mi a través de ensayo y error para golpear en una solución que funciona para mí.

Supongo, me estoy preguntando si de alguna manera se puede utilizar de diálogo en una forma similar a los…

alert("this is simple")

…así que puedo decir que un mensaje de aviso al usuario, siempre que necesito, en lugar de en la dirección url, haga clic o pulse el botón.

Esperemos que los de arriba hacen sentido y voy a sospechar que voy a tener que seguir con el feo estándar de alerta, pero me dejan saber si hay una solución sencilla.

Gracias

  • Volver a la anterior, estoy seguro de que tipo es pero debe haber leído <div id=»diálogo»>Este es un montón de escribir al pasar de un simple mensaje de</div>
InformationsquelleAutor JTC | 2011-03-18

5 Kommentare

  1. 78

    Espero que esto ayude a alguien, puede pasar de html a diálogo directamente, como este:

    $("<p>Hello World!</p>").dialog(); 

    así de esta manera usted no tiene que tener un pre-construido div, puede utilizar:

    $("<div>My div content</div>").dialog();

    EDIT: se ha cambiado la etiqueta de cierre para </div> en lugar de </p>

    • muy bonito como puede ser añadido a un código javascript directamente.
  2. 2

    Estoy usando rails y no me gusta tener 2 lugares donde la escritura de código altamente dependiente.
    Así que he modificado jquery-ui ejemplo de diálogo como el siguiente código. Ver executaDialogModal()

    <meta charset="utf-8">
    
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css" />
    
    
    <style>
        body { font-size: 62.5%; }
        label, input { display:block; }
        input.text { margin-bottom:12px; width:95%; padding: .4em; }
        fieldset { padding:0; border:0; margin-top:25px; }
        h1 { font-size: 1.2em; margin: .6em 0; }
        div#users-contain { width: 350px; margin: 20px 0; }
        div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
        div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
        .ui-dialog .ui-state-error { padding: .3em; }
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
    </style>
    
    
    <script>
    $(function() {
    
        //------------------------------------------------------------------------
        //variaveis globais
        var     name = email = password = allFields = tips = null;
        var bValid = true;
    
        //------------------------------------------------------------------------
        function updateTips( t ) {
            tips
                .text( t )
                .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }
    
        //------------------------------------------------------------------------
        function checkLength( o, n, min, max ) {
            if ( o.val().length > max || o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips( "Length of " + n + " must be between " +
                    min + " and " + max + "." );
                return false;
            } else {
                return true;
            }
        }
    
        //------------------------------------------------------------------------
        function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass( "ui-state-error" );
                updateTips( n );
                return false;
            } else {
                return true;
            }
        }
    
        //------------------------------------------------------------------------
        function executaDialogModal( ) {
            //----TODO: verificar antes a existência de #dialog-form e destrui-lo
            //----cria Form
            $('body').append("\
                <div id='dialog-form' title='Create new user'>\
                    <p class='validateTips'>All form fields are required.</p>\
                    <form>\
                    <fieldset>\
                        <label for='name'>Name</label>\
                        <input type='text' name='name' id='name' class='text ui-widget-content ui-corner-all' />\
                        <label for='email'>Email</label>\
                        <input type='text' name='email' id='email' value='' class='text ui-widget-content ui-corner-all' />\
                        <label for='password'>Password</label>\
                        <input type='password' name='password' id='password' value='' class='text ui-widget-content ui-corner-all' />\
                    </fieldset>\
                    </form>\
                </div>\
            ");
            //----seta vars globais
            name = $( "#name" ),
            email = $( "#email" ),
            password = $( "#password" ),
            allFields = $( [] ).add( name ).add( email ).add( password ),
            tips = $( ".validateTips" );
    
            //----cria dialog
            $( "#dialog-form" ).dialog({
                autoOpen: true,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Create an account": function() {
    
    
                        allFields.removeClass( "ui-state-error" );
                        bValid = true;
    
                        bValid = bValid && checkLength( name, "username", 3, 16 );
                        bValid = bValid && checkLength( email, "email", 6, 80 );
                        bValid = bValid && checkLength( password, "password", 5, 16 );
    
                        bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
                        //From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                        bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. [email protected]" );
                        bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
    
                        if ( bValid ) {
                            $( "#users tbody" ).append( "<tr>" +
                                "<td>" + name.val() + "</td>" + 
                                "<td>" + email.val() + "</td>" + 
                                "<td>" + password.val() + "</td>" +
                            "</tr>" ); 
                            $( this ).dialog( "close" );
                        }
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    removeFormModal();
                    allFields.val( "" ).removeClass( "ui-state-error" );
                }
            });         
        }
    
        //------------------------------------------------------------------------
        function removeFormModal( ) {
            $( "#dialog-form" ).remove();
        }
    
        //------------------------------------------------------------------------
        $( "#create-user" )
            .button()
            .click(function() {
                executaDialogModal();
            });
    });
    
    
    
    </script>

    Usuarios Existentes:

    Nombre
    Correo electrónico
    Contraseña

    John Doe
    [email protected]
    johndoe1

    Crear nuevo usuario

  3. 1

    ¿Qué acerca de la pronta

    Pero creo que la adición de un div es escribir mucho

    no te gustan estos

    http://trentrichardson.com/Impromptu/index.php

    http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/

    • Gracias por la sugerencia. Estoy tratando específicamente para mantener jquery-biblioteca de interfaz de usuario. Yo uso un montón de php sql y me estoy encontrando javascript de una manera muy agradable para enviar información al usuario. Empecé con un montón de diferentes plugins que he encontrado al azar en la red y ahora estoy tratando de frenar el ramdom mish-mash sólo para Jquery interfaz de usuario (autocompletar, datepicker, diálogos).
    • Gracias @zod: peterkellner.net/2014/05/30/…
  4. 1

    Esto funciona para mí. Nota para evitar que el cuerpo se llena con divs, puedo asegurar que el div usado se retira después de cerca de:

    $('<div>').prop('id', '_currentDialog').text("Please enter a Comment").dialog(
        {
            title: "Input Error",
            close: function () {
                $('#_currentDialog').remove();
            }
        }
    );
  5. 0

    Puede crear un método auxiliar que existe una abstracción de la creación y la configuración de la div y luego se llama .(cuadro de diálogo). Que al menos eliminar la necesidad de duplicar código y/o crear varios divs.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea