jQuery 대화 상자 단추에 CSS 적용

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에 내장된 옵션을 사용하여 이를 수행할 수 있는 방법이 있습니까?저는 그 문서에서 많은 도움을 받지 못했습니다.

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

어떤 도움이라도 주시면 감사하겠습니다.감사해요.

업데이트: 의견 일치는 여기에 두 가지 길이 있다는 것이었습니다.

1. 파이어버그와 같은 파이어폭스 플러그인을 사용하여 HTML을 검사하고, jQuery가 버튼에 적용하고 있는 CSS 클래스를 메모하고 우선 순위 지정을 시도합니다.참고: 제 HTML에서 두 버튼 모두 정확히 동일한 CSS 클래스로 사용되었으며 고유 ID가 없으므로 이 옵션은 사용되지 않았습니다.
2. 대화 상자가 열리면 jQuery selector를 사용하여 내가 원하는 버튼을 잡고 CSS 클래스를 추가합니다.

저는 두 번째 옵션을 사용했고 :first 또는 :first-child b/c를 사용하는 것보다 jQuery find() 방법을 사용했습니다. 변경하고 싶은 버튼이 반드시 마크업에 나열된 첫 번째 버튼은 아니었습니다.찾기를 사용하면 버튼의 이름을 지정하고 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. 다음과 같은 것을 사용합니다:첫번째 자식을 사용하여 첫번째 단추와 다른 스타일을 선택합니다.

대화 상자 중 하나에 대해 파이어버그가 있는 소스를 보면 다음과 같은 메시지가 나타납니다.

<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의 스타일을 재정의하는지 확인하기 위해 추가 선택기가 있을 수 있습니다).

그건 그렇고, 이 경우에는 초점이 바뀌면 문제가 생기지 않도록 두 번째 방안을 택하겠습니다.

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

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을 보고 버튼 중 하나(또는 둘 다)를 고유하게 식별할 수 있는 방법이 있는지 확인한 후 jQuery를 사용하여 해당 항목을 선택하고 CSS 클래스를 적용할 것을 제안합니다.

참고가 여전히 작동 중인 경우, 페이지 스타일 시트에 다음 스타일을 추가합니다.

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

대화 버튼의 배경색이 변경됩니다.

언급URL : https://stackoverflow.com/questions/1828010/apply-css-to-jquery-dialog-buttons