jQuery UI對話框按鈕定位

Question

如何從jQuery UI中分別定位按鈕。按鈕對齊方向相同。我希望一個按鈕左對齊，而另一個右對齊。可能嗎？

Answer 1

OK，通過螢火蟲看着這...

的對話框控件創建一個div一個叫做ui-dialog-buttonpane類，這樣你就可以搜索。

如果您正在處理多個按鈕，您可能需要:first和:last屬性。

因此，$(".ui-dialog-buttonpane button:first)應該得到你第一個按鈕。 和$(".ui-dialog-buttonpane button:last)應該給你最後一個按鈕。

從那裏您可以修改css/style來將每個按鈕放在左側和右側（修改浮點值）。

無論如何，這就是我現在要做的。

Answer 2

您也可以將類添加到您的對話框（http://docs.jquery.com/UI/Dialog#option-dialogClass）以本地化您的樣式。

Answer 3

我得到了同樣的問題，但我找到了簡單的解決方案，我們改變按鈕的順序確定或關閉窗體對話框，每當我們使定義jquery ui對話框窗體。

Answer 4

後選擇，請嘗試：
.prependTo(".ui-dialog-buttonpane");

Answer 5

這是我能夠做到的結果的方式。

$('#dialog-UserDetail').dialog({ 
      autoOpen: false, 
      height: 318, 
      width: 531, 
      modal: true, 
      resize: false, 
      buttons: { 
       DelUser:{ 
        class: 'leftButton', 
        text: 'Delete User', 
        click : function(){ 
         alert('delete here'); 
        } 
       }, 
       "Update User": function() { 
         alert('update here'); 
      }, 
       Close: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

然後在Styles中添加！important標誌，這是因爲該類首先被jquery覆蓋而需要的。

<style> 
    .leftButton 
    { 
     margin-right: 170px !important; 
    } 
</style> 

Answer 6

我發現的.ui-對話框的buttonset倒塌下來，沒有寬度反正這麼位置底部的兩個bottons左，右角僅增加了CSS這樣的：

.ui-dialog-buttonset {width:100%} 
.ui-dialog-buttonset .ui-button:last-child {float:right !important;} 

第一行使按鈕設置的容器100％寬，第二個將最後一個按鈕按到右側。

Answer 7

你首先必須在jQuery的ui.css在模式聲明中改變的.ui-對話框的buttonset的寬度爲100％

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { width: 100%;} 

然後，按鈕，你可以做一些明確的像如下：

buttons: [ 
     { 
      text: "Close", 
      open: function(){ 
         $(this).css('float','left');}, 
        } 
     } 
      ] 

Answer 8

$('#dialog-UserDetail').dialog({ 
      autoOpen: false, 
      height: 318, 
      width: 531, 
      modal: true, 
      resize: false, 
      buttons: { 
       DelUser:{ 
        text : 'Delete User', 
        click : function(){ 
         alert('delete here'); 
        } 
       }, 
       space: { 
        text : '', 
        id : 'space', 
        width : '(the distance you want!)', 
       }, 
       "Update User": function() { 
         alert('update here'); 
      }, 
       Close: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
$("#space").visibility("hidden"); 

Answer 9

我結束了以下解決方案（基於庫克的答案）。這有很多的優點（對我來說）比其他答案：

• 純HTML/CSS - 不需要JavaScript
• 無需設置對話框中的一個固定的寬度（按鈕會一直靠左對齊邊緣，即使用戶改變對話框）
• 無需爲重要標誌的CSS

我使用的HTML（略從答案庫克修改）：

$('#dialog-UserDetail').dialog({ 
     autoOpen: false, 
     width: 'auto', 
     modal: true, 
     buttons: { 
      DelUser:{ 
       class: 'leftButton', 
       text: 'Delete User', 
       click : function(){ 
        alert('delete here'); 
       } 
      }, 
      "Update User": function() { 
        alert('update here'); 
     }, 
      Close: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

然後我用下面的CSS：

.leftButton 
{ 
    position: absolute; 
    left:8px; 
} 

，其結果是在「leftButton」按鈕始終固定爲8像素關閉對話框的左邊，而其他按鈕是右對齊。如果你有多個按鈕需要左對齊，那麼你將需要增加左邊參數的寬度，以前按鈕的寬度加上你想要的每個按鈕的間距，這在我看來並不優雅。但是，對於一個左對齊的按鈕，這就像一個魅力。

Answer 10

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
    float: none !important; 
    text-align:right; 
} 

.ui-button-left { 
    float: left; 
} 

這不會影響默認按鈕，它們會顯示在右側。此外，您可以在左側放置儘可能多的按鈕，而無需爲每個按鈕設置特殊的格式。要設置左側按鈕的類，有很多方法可以做到這一點。

如對話框定義的一部分：

$("#mydialog").dialog(
    {buttons: [ 
     {"class": "ui-button-left", "text": "Delete"}, 
     {"text": "Cancel"}, 
     {"text": "Save"} 
    ]}); 

或者你也可以做這樣的事情：

$("#mydialog").dialog(
    {buttons: [ 
     {"id": "myDeleteButton", "text": "Delete"}, 
     {"text": "Cancel"}, 
     {"text": "Save"} 
    ]}); 

後來風格的CSS的「myDeleteButton」對象作爲浮動離開。如果您還想顯示或隱藏按鈕而不重新創建對話框，則設置按鈕ID可能會有所幫助。

在Chrome，Safari瀏覽器，FF，IE11測試，jQuery UI的1.10

Answer 11

好吧，作爲@The庫克的回答，您可以通過另一個改變這個CSS風格tag.Think way.you可以按鈕中添加的風格，再也不需要css了。祝你好運。

     "Ok":{         
          style:"margin-right:640px",         
          click: function() { 
           //Your Code 
          } 
         },