2010-05-06 16 views
12

podczas tworzenia okna dialogowego z przyciskami jak:jQuery UI Dialog przyciski

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

mam dostęp do przycisku w ramach obsługi zdarzenia click?

$(this) 

to obiekt kontekstu/jQuery całego okna dialogowego.

Wątpię muszę być tak twórczy jak

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

dla niepełnosprawnych a tam przycisk?

Odpowiedz

18

Dokumentacja dialog() mówi:

Kluczem nieruchomość jest tekst przycisku . Ta wartość jest funkcją oddzwaniania do kliknięcia przycisku, gdy przycisk jest ustawiony na . Kontekst wywołania zwrotnego jest elementem dialogowym; jeśli potrzebujesz dostępu do przycisku , jest on dostępny jako obiekt docelowy obiektu.

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

Format przycisków w oknie dialogowym jest <button> z <span> wewnątrz, tak:

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

Więc po kliknięciu, rzeczywista click zdarzenie na tym <span> lub <button>, w zależności od stylizacji (marża na przęsła na przykład), tak aby uzyskać <button> wystarczy dokonać obsługi przejść do przycisku nawet jeśli jesteś już na nim tak:

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