jQuery 대화 상자 취소 버튼 스타일을 저장합니다

Question

응용 프로그램에서 jQuery UI 대화 상자를 사용하고 있습니다. jQuery 대화 상자에서 "저장"및 "취소"버튼을 어떻게 다르게 스타일링합니까? 따라서 "저장"은 "취소"보다 더 매력적입니다. "취소"에 하이퍼 링크를 사용할 수 있지만 동일한 버튼 패널에 어떻게 배치합니까?

Answer 1

jQuery UI 대화 상자 (버전 1.8+)에서 사용자 정의 클래스를 추가하는 방법은 다음과 같습니다.

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

Answer 2

jqueryui 1.8.9 사용 className 보다는 classes 공장.

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

Answer 3

JQuery UI 1.8.13을 사용하고 있으며 다음 구성이 필요한대로 작동합니다.

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

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

추신: 인용문으로 "클래스"를 랩핑하는 것을 잊지 마십시오 JS의 예약 된 단어이기 때문입니다!

Answer 4

이 질문이 게시 된 지 오래되었지만 다음 코드는 모든 브라우저에서 작동합니다 (비록 참고 MattPIIFFOX 및 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 5

jQuery UI 버전 1.8.16은 아래에서 작동하는 방법입니다.

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

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();

전역으로 버튼을 선택하는 대신 위젯 객체를 가져 와서 버튼 창을 찾은 다음 각 버튼을 개별적으로 스타일링합니다. 한 페이지에 여러 대화가있을 때 많은 통증이 절약됩니다.

Answer 7

보고 후 다른 스레드 확인 대화 상자에서 버튼에 아이콘을 추가하기 위해이 솔루션을 작성했는데 버전 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>");

나는 더 좋은 방법이 있는지보고 싶을 것입니다. 그러나 이것은 매우 효율적인 것 같습니다.

Answer 8

jQuery UI 1.8.22에서 다음 구성을 사용해야했습니다.

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

이것은 모든 형식을 제거하고 필요에 따라 교체 스타일을 적용합니다.
대부분의 주요 브라우저에서 작동합니다.

Answer 9

이 기능은 대화 상자의 모든 버튼에 클래스를 추가합니다. 그런 다음 정상적으로 스타일 (또는 jQuery로 선택) 할 수 있습니다.

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

Answer 10

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

Answer 11

jQuery UI 1.8.5를 확인하십시오. 여기에서 사용할 수 있습니다http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js대화 상자 UI 구현을위한 새 버튼이 있습니다.

Answer 12

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