jQuery 대화 상자 버튼에 CSS 적용

그래서 현재 두 개의 버튼이있는 jQuery 대화 상자가 있습니다 : 저장 및 닫기. 아래 코드를 사용하여 대화 상자를 만듭니다.

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

그러나이 코드를 사용하면 두 버튼의 색상이 동일합니다. 취소 버튼의 색상을 저장과 다르게하고 싶습니다. 내장 된 jQuery 옵션을 사용하여이 작업을 수행하는 방법이 있습니까? 문서에서 많은 도움을받지 못했습니다.

내가 만들고있는 취소 버튼은 미리 정의 된 유형이지만 '저장'은 직접 정의하고 있습니다. 그것이 문제와 관련이 있는지 확실하지 않습니다.

어떤 도움을 주시면 감사하겠습니다. 감사.

업데이트 : 여기에 여행 할 두 개의 도로가 있다는 합의가있었습니다.

1. firebug 와 같은 Firefox 플러그인을 사용하여 HTML을 검사하고 jQuery가 버튼에 적용하는 CSS 클래스를 확인하고이를 재정의하는 작업을 수행합니다. 참고 : 내 HTML에서 두 버튼은 정확히 동일한 CSS 클래스를 사용하고 고유 ID가 없어서이 옵션이 사용되지 않았습니다.
2. 대화 상자 열기에서 jQuery 선택기를 사용하여 원하는 버튼을 잡고 CSS 클래스를 추가하십시오.

두 번째 옵션을 사용하고 jQuery find () 메서드를 사용했습니다. : first 또는 : first-child b / c를 사용하는 것보다 더 적절하다고 생각하므로 변경하려는 버튼이 반드시 다음에 나열된 첫 번째 버튼은 아니 었습니다. 마크 업. 찾기를 사용하여 버튼의 이름을 지정하고 CSS를 추가 할 수 있습니다. 내가 끝낸 코드는 다음과 같습니다.

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
        open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

아무도 여기에 답 하지 않은 것 같고 훨씬 깨끗하고 깔끔하기 때문에 비슷한 질문에 대한 내 답변 을 다시 게시 하고 있습니다.

대체 buttons속성 구문을 사용 합니다.

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

열기 이벤트 핸들러를 사용하여 추가 스타일을 적용 할 수 있습니다.

 open: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }

나는 그것을 처리 할 수있는 두 가지 방법이 있다고 생각합니다.

1. 두 버튼 사이에 차이 (클래스, ID 등)가 있는지 방화범과 같은 것을 사용하여 확인하고이를 사용하여 특정 버튼을 처리합니다.
2. 예를 들어 첫 번째 버튼과 스타일을 다르게 선택하려면 : first-child와 같은 것을 사용하십시오.

내 대화 상자 중 하나에 대해 방화범이있는 소스를 보면 다음과 같은 결과가 나타납니다.

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button>
    <button class="ui-state-default ui-corner-all" type="button">Cancel</button>
</div>

따라서 예를 들어 .ui-state-focus에 몇 가지 스타일을 추가하여 보내기 버튼을 처리 할 수 있습니다 (jquery의 스타일을 재정의 할 수 있도록 몇 가지 추가 선택기를 사용).

그건 그렇고, 나는 초점이 바뀔 때 문제를 피하기 위해이 경우 두 번째 옵션으로 갈 것입니다 ...

"class"에 대한 "className"이라는 단어를 변경해야합니다.

buttons: [ 
    { 
        text: "Cancel",
        class: 'ui-state-default2', 
        click: function() { 
            $(this).dialog("close"); 
        } 
    }
],

아마 이런 건가요?

$('.ui-state-default:first').addClass('classForCancelButton');

역할 대화 상자가있는 div를 선택한 다음 적절한 버튼을 가져와 CSS를 설정합니다.

$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red"); 

특정 버튼에만 적용되는 특정 스타일을 정의하는 간단한 대답도 있으며 대화 상자를 선언 할 때 Jquery에서 요소 스타일을 선언하도록 할 수 있습니다.

id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}

그 후에 html이 보여주는 내용은 다음과 같습니다.

이렇게하면 설정할 수 있지만 나중에 jquery를 사용하여 변경하는 것이 반드시 쉬운 것은 아닙니다.

생성 된 마크 업을 검사하고 선택한 버튼의 클래스를 확인하고 직접 스타일을 지정하는 것은 어떻습니까?

코드가 뱉어내는 HTML을 살펴보고 버튼 중 하나 (또는 ​​둘 다) (아마도 id 또는 이름 속성)를 고유하게 식별하는 방법이 있는지 확인한 다음 jQuery를 사용하여 해당 항목을 선택하고 CSS 클래스.

여전히 주목하는 것이 효과가 있다면 페이지 스타일 시트에 다음 스타일을 추가하십시오.

.ui-widget-content .ui-state-default {
  border: 0px solid #d3d3d3;
  background: #00ACD6 50% 50% repeat-x;
  font-weight: normal;
  color: #fff;
}

대화 버튼의 배경색을 변경합니다.