jquery對話框保存取消按鈕樣式

Question

我在我的應用程序中使用jQuery UI對話框。 如何在jquery對話框中以不同的方式設置「保存」和「取消」按鈕？ 所以「保存」比「取消」更有吸引力。 我可以使用「取消」的超鏈接，但是如何將它放在同一個按鈕面板中？

Answer 1

這裏是如何在jQuery用戶界面對話框（版本1.8+）添加自定義類：

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

Answer 2

我看了UI對話框生成的HTML。它呈現如下的按鈕窗格：

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

向取消按鈕添加一個類應該很容易。 （'。ui-dialog-buttonpane：last-child'）。css（'background-color'，'#ccc'）;

這將使取消按鈕變成灰色。不管你喜歡，你都可以設計這個按鈕。

上面的代碼假定取消按鈕是最後一個按鈕。傻瓜證明的方式做這將是

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

Answer 3

看着some other threads後，我想出了這個解決方案將圖標添加到按鈕的確認對話框，這似乎在1.8.1版本很好地工作，並且可以進行修改，以做其他造型：

$("#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>"); 

我很感興趣，那麼有一個更好的w ^唉，這樣做，但這似乎很有效。

Answer 4

該函數將爲您的每個按鈕添加一個類對話框。然後，您可以風格（或使用jQuery選擇）爲正常：

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

Answer 5

退房jQuery UI的1.8.5它是可用在這裏 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js 和它有對話框UI實現新的按鈕

Answer 6

這些解決方案所有的非常好，如果你只需要在頁面一個對話框在任何一個時間，但是如果你想一次多樣式對話框，然後嘗試：

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

而不是全球選擇按鈕，這得到次e widget對象並找到它的按鈕窗格，然後單獨設置每個按鈕的樣式。這節省了很多的痛苦，當你在一個頁面上有幾個對話框

Answer 7

在jQueryUI 1.8.9使用className而不是classes的作品。

$('#element').dialog({ 
    buttons:{ 
    "send":{ 
     text:'Send', 
     className:'save' 
    }, 
    "cancel":{ 
     text:'Cancel', 
     className:'cancel' 
    } 
    }); 

Answer 8

截至jquery ui版本1.8.16以下是我如何得到它的工作。

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

Answer 9

我正在使用jQuery UI 1.8。13和下面的配置工作，因爲我需要：

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

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

PS：記得包裝「類」加上引號，因爲它是在JS的保留字！

Answer 10

發佈此問題已經有一段時間了，但以下代碼適用於所有瀏覽器（請注意，雖然MattPII的答案在FFox和Chrome中可用，但會在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

我不得不使用jQuery UI的22年8月1日下面的結構：

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

這將刪除所有的格式，並根據需要適用更換造型。
適用於大多數主流瀏覽器。

Answer 12

我有JQuery UI 1.8.11版本，這是我的工作代碼。您還可以根據您的要求定製其高度和寬度。

$("#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() {} 
});