JQuery UI Agregar Id. Al cuadro de diálogo

¿Cómo puedo agregar la identificación al cuadro de diálogo específico? sólo quiero aplicar el estilo diferente para cada cuadro de diálogo y tratar de hacerlo de esta manera:JQuery UI Agregar Id. Al cuadro de diálogo

var $order_dialog = $("<%= escape_javascript(render('order_mini_site_form', :layout => false)) %>"); 

var current_dialog = $order_dialog.dialog({ 
    width: 515, 
    height: 575, 
    modal: true, 
    resizable: false, 
    draggable: false, 
    title: false, 
    autoOpen: true, 
    closeOnEscape: false, 
    buttons: [ 
    { text: "Отправить запрос" , click: function() { $(this).find('form').submit(); $(this).dialog('close'); } }, 
    { text: "Отмена", click: function() { $(this).dialog('close'); } } 
    ] 
}).parent().find('.ui-dialog-titlebar').remove(); 


$current_dialog.attr('id', 'awesome_dialog');

sino de diálogo creado dentro de la etiqueta del cuerpo sin identificación y no puedo aplicar el estilo de ella.

Fuente

2012-07-03 Vladimir

Si su objetivo es solo usar esta identificación en el CSS, puede lograr esto con una clase css en su lugar.

La opción dialogClass le permite especificar una clase que se aplicará al cuadro de diálogo. Luego puede usar esta clase en sus selectores para aplicar un estilo diferente para un diálogo específico.

Fuente

2012-07-03 10:24:28

Trato clase y que está funcionando para mí. Gracias. Pero la identificación es mejor, en mi opinión, tiene mayor prioridad que el selector de clase ... por eso estoy buscando la posibilidad de agregar una ID. – Vladimir

Sí, pero como la API no proporciona nada para la ID, debes usar una clase o hackear. Si realmente quiere una identificación, puede usar el siguiente truco (pero está un poco sucio). Justo después de abrir su ventana emergente, puede eliminar la clase y agregar la identificación. $ (". your-class"). removeClass (". your-class"). attr ("id", "your-id"). Sin embargo, creo que la "sucia" que causa el uso de una clase donde quieres una identificación duele menos que este horrible truco. Y siempre puede aumentar la prioridad de su regla repitiendo toda la regla con su clase –

El problema en su código de ejemplo es que está agregando el id al resultado de .find('.ui-dialog-titlebar').remove() en lugar del cuadro de diálogo. Lo siguiente debería funcionar para usted.

var $order_dialog = $("<%= escape_javascript(render('order_mini_site_form', :layout => false)) %>"); 

var current_dialog = $order_dialog.dialog({ 
    width: 515, 
    height: 575, 
    modal: true, 
    resizable: false, 
    draggable: false, 
    id: "ololo", 
    title: false, 
    autoOpen: true, 
    closeOnEscape: false, 
    buttons: [ 
    { text: "Отправить запрос" , click: function() { $(this).find('form').submit();    $(this).dialog('close'); } }, 
    { text: "Отмена", click: function() { $(this).dialog('close'); } } 
    ] 
}) 

$current_dialog.parent().find('.ui-dialog-titlebar').remove(); 
$current_dialog.attr('id', 'awesome_dialog');

Fuente

2012-07-03 10:32:29

¿Y cómo se debe hacer correctamente? – Vladimir

Hay muchas opciones. Yo personalmente incluiría el 'id' en el HTML mismo, en su caso en' order_mini_site_form'. También podría usar una clase CSS por la opción 'dialogClass' como otro usuario mencionado. Como última opción, si solo tiene un cuadro de diálogo en la página, puede usar la clase 'ui-dialog' que jQuery UI ya coloca en el cuadro de diálogo. Por ejemplo 'ui-dialog {color: yellow; } 'hará que todo el texto en el cuadro de diálogo sea amarillo. –

Un poco tarde, pero esta es la forma en que se podría hacer:

$('#placeholderId').dialog('widget').attr('id', 'dialogId');

$ ('# placeholderId') de diálogo ('widget') que la rodea < da. div > del cuadro de diálogo, que probablemente sea el elemento sobre el que desea establecer la ID.

Fuente

2013-04-11 13:34:33 Andreas

Encuentro INSANE que el diálogo de jquery no tiene opciones para agregar una clase/ID al padre. Quiero decir, completamente loco. También es una locura el hecho de que los cuadros de diálogo no tienen contenedor (excepto el contenedor externo) para el título y el contenido div ... –

La mejor manera de hacerlo. –

No estoy de acuerdo con la respuesta (no un ataque personal simplemente no está de acuerdo con la parte "sucio pirateo"). Es cierto que no hay una opción de ID para el cuadro de diálogo jquery. Sin embargo, si llega a la conclusión de que es necesaria una ID, el siguiente código debería ser suficiente. Mi guía de turismo JS que estoy desarrollando necesitaba mucho esa identificación.

// Aquí estoy declarando el contenido insertado de forma dinámica [por ejemplo, lo que estoy creando] tener un ID de tempstep, este se utilizará con la llamada de abajo para agregar un ID a la caja de diálogo jQuery

Código: jQuery ('<div id="tempstep"></div>').dialog({

Código: jQuery('#tempstep').parent().attr("id","dialogBox");

Fuente

2013-07-02 18:04:19 EdJIMucator

JQuery UI Agregar Id. Al cuadro de diálogo

Respuesta

Cuestiones relacionadas