2012-04-25 20 views
14

¿Es posible establecer la ID para los botones en un cuadro de diálogo de jQuery UI, de modo que pueda consultarlos más tarde a través de jQuery? Por ejemplo, desencadenar eventos, desactivar etc.Establecer jQuery UI botón de diálogo id?

... in the dialog setup ... 
buttons: {    
    "Sök": function() { 
     var bValid = true; 
    }, 
    "OK": function() { 
     if (OK()) { 
      getStuffNoteringar($("#txtStuffId").val()); 
      $(this).dialog("close"); 
     } 
    } 

.... later on in some javascript code.... 

$('#OK').click(); 

Respuesta

34
$("#myDialog").dialog({ 
    buttons : { 
    "MyButton" : { 
     text: "OK", 
     id: "okbtnid", 
     click: function(){ 
      var bValid = true; 
     } 
     } 
    } 
}); 
+1

Niza no sabía que funcionaría como no documentada, pero lo hace. – GillesC

+2

[documentación] (http://jqueryui.com/demos/dialog/#option-buttons) no habla de identificación pero tiene el texto y haga clic :) – mprabhat

+0

Sí, pero ambos no son atributos como tal, así que pensé los atributos no funcionarían Feliz de haber aprendido sobre esta característica indocumentada aunque. Los que faltan en los documentos son siempre los mejores para saber :) – GillesC

0
No

a través de la forma en que desea que el API no proporciona esas opciones sin embargo, si nos fijamos en el margen de beneficio que genera el cuadro de diálogo que debe ser capaz de agarrar lo que los elementos que necesita y se unen como desee o agregue identificadores a ellos. Aquí está el marcado tal como se encuentra de la página de documentación (http://jqueryui.com/demos/dialog/)

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"> 
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
     <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span> 
     <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a> 
    </div> 
    <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog"> 
     <p>Dialog content goes here.</p> 
    </div> 
</div> 

si se trata de botones dentro del contenido de la modal entonces se pueden hacer consultas CSS en el elemento modal contexto y tener acceso a ellos de esa manera.