Cuadro de diálogo JQuery: reutilizar el código para una identificación diferente

Acabo de empezar a trabajar con Jquery y me preguntaba si hay alguna forma de reutilizar un cuadro de diálogo para varias identificaciones. Estoy usando el cuadro de diálogo para mostrar una descripción más detallada de varios elementos. La forma en que tengo la configuración del código en este momento es:

            $('#NY7C').dialog({
                autoOpen: false,
                width: 800,
                height: 700,
                modal: true,
                draggable: false
            });

            $('#NY7C-open').click(function(){
                $('#NY7C').dialog('open');
                return false;
            });

            $('#NY7R').dialog({ //another dialog that has the same features as #NY7C
            });

            $('#NY7R-open').click(function(){
            })

Dentro del cuerpo, uso el siguiente código para abrir el cuadro de diálogo:

<a id="NY7C-open" class="ui-state-default ui-corner-all" href="#">More Info</a>
<a id="NY7R-open" class="ui-state-default ui-corner-all" href="#">More Info</a>

Finalmente, la información que se muestra en el diálogo está en:

<div id="#NY7C">
    //Information for NY7C
</div>
<div id="#NY7R">
    //Information for NY7R
</div>

Ahora, la forma en que tengo el código ahora funciona. Sin embargo, esperaba poder reutilizar el primer código para poder usarlo para varias identificaciones (por ejemplo, NY7C, NY7R, NY7P, etc.). ¿Hay alguna manera de hacer esto?

preguntado el 27 de julio de 12 a las 17:07

3 Respuestas

Dales clases en lugar de identificaciones. Por ejemplo:

<a id="NY7C-open" class="dialog-trigger ui-state-default ui-corner-all" href="#">More Info</a>
<a id="NY7R-open" class="dialog-trigger ui-state-default ui-corner-all" href="#">More Info</a>

<div id="#NY7C" class="my-dialog">
    //Information for NY7C
</div>
<div id="#NY7R" class="my-dialog">
    //Information for NY7R
</div>

Y el js sería:

$('.my-dialog').dialog({
    autoOpen: false,
    width: 800,
    height: 700,
    modal: true,
    draggable: false
});
$('.dialog-trigger').click(function(){
    var id = this.id;
    var targetId = id.replace('-open','');
    var $target = $('#' + targetId);
    if($target.length){
        $target.dialog('open');
        return false;
    }
});

Respondido 27 Jul 12, 17:07

Puede agregar clases a un cuadro de diálogo similar

<div id="#NY7C" class="dialog">
    //Information for NY7C
</div>
<div id="#NY7R" class="dialog">
    //Information for NY7R
</div>

Y luego haz

$('.dialog').dialog({});

Respondido 27 Jul 12, 17:07

¿Qué pasa con esto ...

function attachDialog(elementId) {
    $(elementId).dialog({
        autoOpen: false,
        width: 800,
        height: 700,
        modal: true,
        draggable: false
    });

    $(elementId + 'open').click(function() {
        $(elementId).dialog('open');
        return false;
    });

}

attachDialog('#NY7C');
attachDialog('#NY7R');
​

Respondido 27 Jul 12, 17:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.