Jquery-UI Dialog - à la volée sans DIV

Question

J'ai ce que je soupçonne d'être une simple question et après recherche je soupçonne que la réponse à ma question pour être pas, mais à vérifier...

Est-il possible d'utiliser le Jquery ui dialogue avec la configuration d'un DIV?

ie plutôt que..

$(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>

Est-il possible juste pour avoir quelque chose comme...

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

et de l'appeler avec un rapidement (le) type de chose en cas de besoin.

Vous pouvez noter que je m'embrouille peut-chemin par le biais de Javascript et de faire de mon mieux par l'essai et l'erreur de frapper sur une solution qui fonctionne pour moi.

Je suppose, je me demande si je peux en quelque sorte utilisent la boîte de dialogue d'une manière similaire à...

alert("this is simple")

...donc, je peux appeler une alerte à l'utilisateur à chaque fois que j'en ai besoin, plutôt que sur l'url, cliquez sur le bouton ou appuyez sur.

Espérons-le, au-dessus du sens, et je vous crois bien que je vais avoir à coller avec le laid standard alerte, mais ne laissez-moi savoir si il existe une solution simple.

Merci

Answer 1

J'espère que cela aide quelqu'un, vous pouvez passer du code HTML au dialogue directement, comme ceci:

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

de cette façon, vous n'avez pas besoin d'avoir une div pré-construite, vous pouvez utiliser:

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

EDIT: modification de la balise de fin en </div> au lieu de </p>

Answer 2

Je suis à l'aide de rails et de na pas de même avoir 2 endroits où écrire du code très dépendante. Donc j'ai modifié jquery ui dialog exemple de code ci-dessous. Voir 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. ui@jquery.com" );
                    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>

Les Utilisateurs Existants:

Nom E-mail Mot de passe John Doe jean.doe@example.com johndoe1

Créer un nouvel utilisateur

Answer 3

Qu'en est-il de prompt

Mais vous pensez que l'ajout d'une div, c'est beaucoup d'écriture

vous n'aimerez pas ces

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

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

Answer 4

Vous pouvez créer une méthode d'assistance qui extrait la création et la configuration de la div, puis appelle .dialog (). Cela supprimerait au moins la nécessité de dupliquer le code et / ou de créer plusieurs divs.