okno dialogowe jquery zapisz przycisk anulowania stylizacja

Question

Używam okna dialogowego jquery ui w mojej aplikacji. Jak inaczej ustawić przyciski "Zapisz" i "Anuluj" w oknie dialogowym jquery? "Zapisz" jest bardziej atrakcyjne niż "Anuluj". Mogę użyć hiperłącza do "Anuluj", ale jak mogę umieścić to w tym samym panelu przycisków?

Answer 1

Oto jak dodać niestandardowych klas w jQuery UI Dialog (wersja 1.8+):

$('#foo').dialog({ 
    'buttons' : { 
     'cancel' : { 
      priority: 'secondary', class: 'foo bar baz', click: function() { 
       ... 
      }, 
     }, 
    } 
}); 

Answer 2

Sprawdziłem HTML wygenerowany przez okno dialogowe interfejsu użytkownika. Powoduje to wyświetlenie panelu przycisków:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> 
    <button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button> 
    <button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button> 
</div> 

Dodanie klasy do przycisku Anuluj powinno być łatwe.

$ (".i-dialog-buttonpane: last-child"). Css ("kolor tła", "#ccc");

Spowoduje to mały szary przycisk Anuluj. Możesz stylizować ten przycisk, jak chcesz.

Powyższy kod zakłada, że ​​przycisk Anuluj jest ostatnim przyciskiem. Głupiec dowód sposób to zrobić byłoby

$('.ui-dialog-buttonpane :button') 
    .each(
     function() 
     { 
      if($(this).text() == 'Cancel') 
      { 
       //Do your styling with 'this' object. 
      } 
     } 
    ); 

Answer 3

po patrząc na some other threads wymyśliłem tego rozwiązania dodać ikony do przycisków w oknie dialogowym potwierdzenia, które wydaje się działać dobrze w wersji 1.8.1 i mogą być modyfikowane, aby zrobić inną stylistykę:

$("#confirmBox").dialog({ 
    modal:true, 
    autoOpen:false,   
    buttons: { 
     "Save": function() { ... },     
     "Cancel": function() { ... } 
     } 
}); 

var buttons = $('.ui-dialog-buttonpane').children('button'); 
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon'); 

$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>"); 
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>"); 

byłbym ciekaw, czy nie było lepiej w ay to zrobić, ale wydaje się to dość skuteczne.

Answer 4

Ta funkcja doda klasę do każdego przycisku w twoim oknie dialogowym. Następnie można styl (lub wybierz z jQuery) jako normalny:

$('.ui-dialog-buttonpane :button').each(function() { 
    $(this).addClass($(this).text().replace(/\s/g,'')); 
}); 

Answer 5

check out jQuery UI 1.8.5 jest dostępna tutaj http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js i ma nowy przycisk na realizację ui dialog

Answer 6

Rozwiązania te są wszystko bardzo dobrze, jeśli masz tylko jedno okno na stronie w dowolnym czasie, jednak jeśli chcesz styl wielu okien dialogowych na raz spróbuj:

$("#element").dialog({ 
    buttons: { 
     'Save': function() {}, 
     'Cancel': function() {} 
    } 
}) 
.dialog("widget") 
.find(".ui-dialog-buttonpane button") 
.eq(0).addClass("btnSave").end() 
.eq(1).addClass("btnCancel").end(); 

Zamiast globalnie wybierając przyciski, to dostaje th Obiekt widgetu i znajduje jego okienko, a następnie indywidualnie wybiera każdy przycisk. Oszczędza to wiele bólu, gdy masz kilka okien dialogowych na jednej stronie:

Answer 7

W jQueryUI 1.8.9, używając className zamiast classes działa.

Answer 8

Od wersji jquery ui 1.8.16 poniżej jest jak to działa.

$('#element').dialog({ 
    buttons: { 
     "Save": { 
      text: 'Save', 
      class: 'btn primary', 
      click: function() { 
       // do stuff 
      } 
     } 
}); 

Answer 9

Używam jQuery UI 1.8.13 i następująca konfiguracja działa jak trzeba:

var buttonsConfig = [ 
    { 
     text: "Ok", 
     "class": "ok", 
     click: function() { 
     } 
    }, 
    { 
     text: "Annulla", 
     "class": "cancel", 
     click: function() { 
     } 
    } 
]; 

$("#foo").dialog({ 
    buttons: buttonsConfig 
// ... 

ps: pamiętać, aby owinąć „klasa” z cytatami bo to słowo zarezerwowane w js!

Answer 10

Od czasu opublikowania tego pytania minęło trochę czasu, ale poniższy kod działa we wszystkich przeglądarkach (zauważ, że odpowiedź MattPII działa w FFox i Chrome, powoduje błędy skryptów w IE).

$('#foo').dialog({ 
    autoOpen: true, 
    buttons: [ 
    { 
     text: 'OK', 
     open: function() { $(this).addClass('b') }, //will append a class called 'b' to the created 'OK' button. 
     click: function() { alert('OK Clicked')} 
    }, 
    { 
     text: "Cancel", 
     click: function() { alert('Cancel Clicked')} 
    } 
    ] 
}); 

Answer 11

musiałem użyć następujących skonstruować w jQuery UI 1.8.22:

var buttons = $('.ui-dialog-buttonset').children('button'); 
buttons.removeClass().addClass('button'); 

Usuwa formatowanie i stosuje stylizacji zastępczy w razie potrzeby.
Działa w większości głównych przeglądarek.

Answer 12

Mam wersję JQuery UI 1.8.11 i to jest mój działający kod. Możesz także dostosować jego wysokość i szerokość w zależności od wymagań.

$("#divMain").dialog({ 
    modal:true, 
    autoOpen: false, 
    maxWidth: 500, 
    maxHeight: 300, 
    width: 500, 
    height: 300, 
    title: "Customize Dialog", 
     buttons: { 
      "SAVE": function() { 
       //Add your functionalities here 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() {} 
});