jQuery UI 대화 상자 버튼 위치 지정

Question

jQuery UI의 버튼을 서로 어떻게 배치 할 수 있습니까? 단추는 같은 방향으로 정렬됩니다. 하나의 버튼을 왼쪽으로 정렬하고 다른 하나는 오른쪽으로 정렬하고 싶습니다. 가능한가? 당신이 검색 할 수 있도록

방화범 통해보고 확인

Answer 1

, ...

대화 제어, ui-dialog-buttonpane라는 클래스와 사업부를 만들 수 있습니다.

여러 버튼을 다루는 경우 :first 및 :last 속성이 필요할 수 있습니다.

그래서 $(".ui-dialog-buttonpane button:first)은 첫 번째 버튼을 제공합니다. 및 $(".ui-dialog-buttonpane button:last)은 마지막 버튼을 제공합니다.

여기에서 CSS/스타일을 수정하여 각 버튼을 오른쪽과 왼쪽에 배치 할 수 있습니다 (부동 값 수정).

어쨌든, 지금 당장 접근 할 수 있습니다.

Answer 2

대화 상자에 클래스를 추가하여 (http://docs.jquery.com/UI/Dialog#option-dialogClass) 스타일을 현지화 할 수도 있습니다.

Answer 3

동일한 문제가 발생했는데 대화 상자 양식을 정의 할 때마다 단추 대화 상자의 순서가 바뀌거나 양식 대화 상자가 닫히는 쉬운 해결책을 발견했습니다.

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"); 
       } 
      } 
     }); 

그런 다음 스타일에! important 플래그를 추가하십시오. 클래스가 먼저오고 jquery로 덮어 쓰기 때문에 필요합니다.

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

첫 번째 줄 :

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

Answer 6

나는 위치로 바닥에 두 개의 bottons 왼쪽과 오른쪽 그냥 CSS를 같은 추가하도록 .ui-대화-buttonset 어쨌든 더 폭 아래로 붕괴 발견 버튼 세트 컨테이너를 100 % 넓게 만들고, 두 번째 것은 오른쪽에있는 마지막 버튼을 누릅니다.

Answer 7

먼저 당신이 같은 명시 적으로 뭔가를 할 수, 버튼를 들어, 모달 선언에

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

그리고 JQuery와 - ui.css에서 100 %로 .ui-대화-buttonset의 폭을 변경해야 할 것 아래 : 나는 다음과 같은 해결책을 상처

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 : 이것은 다른 답변을 통해 (나를 위해) 장점을 가지고 사용자가 크기를 조정하는 경우에도 대화)
• 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"); 
      } 
     } 
    }); 

다른 버튼 잘 정당화하면서 "leftButton"버튼을 항상 대화 상자의 왼쪽 가장자리 떨어져 8px에 고정되어, 그 결과

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

:

그런 다음 나는 다음과 같은 CSS를 사용했다. 둘 이상의 버튼이있는 경우 왼쪽 정렬이 필요합니다. 그러면 왼쪽 버튼 매개 변수를 이전 버튼의 폭과 각 버튼에 원하는 간격으로 늘려야합니다. 이는 제 의견으로는 덜 우아합니다. 그러나 단일 왼쪽 정렬 단추의 경우이 기능은 매력처럼 작동합니다.

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"} 
    ]}); 

그리고 나중에 스타일의 왼쪽 부동으로 'myDeleteButton'개체에 대한 CSS를. 단추 id를 설정하면 대화 상자를 다시 만들지 않고도 단추를 표시하거나 숨길 수있는 경우 유용 할 수 있습니다. 크롬, 사파리, FF, IE11에서 테스트

, 1.10

Answer 11

확인 jQuery를 UI는 @The 쿡의 대답으로, 당신은, way.you 버튼 내 스타일을 추가 할 수있는 또 다른 의해 스타일 tag.Think에서이 CSS를 변경할 수 있습니다 더 이상 CSS가 필요 없습니다. 행운을 비네.

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