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

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

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

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

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>

So I could for example address the Send button by adding some styles to .ui-state-focus (with perhaps some additional selectors to make sure I override jquery's styles).

By the way, I´d go for the second option in this case to avoid problems when the focus changes...

---

You should change the word "className" for "class"

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

---

Maybe something like this?

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

---

Select the div which has role dialog then get the appropriate buttons in it and set the CSS.

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

---

There is also a simple answer for defining specific styles that are only going to be applied to that specific button and you can have Jquery declare element style when declaring the dialog:

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

after doing that here is what the html shows:

doing this allows you to set it, but it is not necessarily easy to change using jquery later.

---

Why not just inspect the generated markup, note the class on the button of choice and style it yourself?

---

I suggest you take a look at the HTML that the code spits out and see if theres a way to uniquely identify one (or both) of the buttons (possibly the id or name attributes), then use jQuery to select that item and apply a css class to it.

---

If still noting is working for you add the following styles on your page style sheet

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

It will change the background color of the dialog buttons.

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