2010-05-06 28 views
12

al crear un cuadro de diálogo con botones como:jQuery UI de diálogo Botones

buttons: { 
      'button text': function(){        
       // do something 
      }, 

tengo acceso al botón en el controlador de eventos click?

$(this) 

es el objeto de contexto/jQuery de todo el cuadro de diálogo.

dudo que tengo que ser tan creativo como

$(this).find('button').attr(...) 

a un botón desactivado allí?

Respuesta

18

La documentación para dialog() dice:

La clave de propiedad es el texto del botón . El valor es la función de devolución de llamada para cuando se hace clic en el botón . El contexto de la devolución de llamada es el elemento de diálogo; si necesita acceso al botón, está disponible como el objetivo del objeto de evento.

$('#myDialog').dialog({ 
    'title': 'My Dialog Header', 
    'buttons': { 
     'My Button': function(event) { 
      // here is the modification of the button 
      // opacity set to 25%, all events unbound 
      $(event.target).css({opacity: 0.25}).unbind(); 
     } 
    } 
}); 
8

El formato de los botones en el cuadro de diálogo es una <button> con un <span> en el interior, así:

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"> 
    <span class="ui-button-text">Button text</span> 
</button> 

Así que cuando se hace clic, el click evento real sucede en ese <span> o <button>, dependiendo de su estilo (margen en el lapso de por ejemplo), por lo que para obtener el <button> acaba de hacer su manejador ir hasta el botón, incluso si ya se encuentra en él, así:

buttons: { 
    'button text': function(e){ 
    $(e.target).closest("button") //this is the button, do something with it :) 
    } 
} 

Here's a quick demo of this working

Cuestiones relacionadas