Áp dụng CSS cho các nút hộp thoại jQuery

Vì vậy, tôi hiện có một hộp thoại jQuery với hai nút: Lưu và Đóng. Tôi tạo hộp thoại bằng đoạn mã dưới đây:

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

Tuy nhiên, cả hai nút đều có cùng màu khi mã này được sử dụng. Tôi muốn nút Hủy của mình có màu khác với nút Lưu của tôi. Có cách nào để thực hiện việc này bằng cách sử dụng một số tùy chọn jQuery tích hợp sẵn không? Tôi không nhận được nhiều trợ giúp từ tài liệu.

Lưu ý rằng nút Hủy mà tôi đang tạo là loại được xác định trước, nhưng 'Lưu' tôi đang tự xác định. Không chắc liệu điều đó có liên quan đến vấn đề này hay không.

Bất kỳ trợ giúp sẽ được đánh giá cao. Cảm ơn.

CẬP NHẬT: Sự đồng thuận là có hai con đường để đi đến đây:

1. Kiểm tra HTML bằng cách sử dụng một plugin của Firefox như firebug , và lưu ý các lớp CSS mà jQuery đang áp dụng cho các nút và cố gắng ghi đè chúng. Lưu ý: trong HTML của tôi, cả hai nút đều được sử dụng cùng các lớp CSS và không có ID duy nhất, vì vậy tùy chọn này đã bị loại bỏ.
2. Sử dụng bộ chọn jQuery trên hộp thoại đang mở để bắt nút mà tôi muốn và sau đó thêm lớp CSS vào đó.

Tôi đã chọn tùy chọn thứ hai và sử dụng phương thức jQuery find () vì tôi nghĩ điều này phù hợp hơn so với việc sử dụng: first hoặc: first-child b / c nút mà tôi muốn thay đổi không nhất thiết phải là nút đầu tiên được liệt kê trong đánh dấu. Sử dụng find, tôi có thể chỉ định tên của nút và thêm CSS theo cách đó. Đoạn mã mà tôi đã kết thúc là bên dưới:

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

Tôi đang đăng lại câu trả lời của mình cho một câu hỏi tương tự vì dường như không ai đưa ra câu trả lời ở đây và nó sạch sẽ và gọn gàng hơn nhiều:

Sử dụng buttonscú pháp thuộc tính thay thế :

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

Bạn có thể sử dụng trình xử lý sự kiện mở để áp dụng kiểu bổ sung:

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

Tôi nghĩ có hai cách bạn có thể xử lý điều đó:

1. Kiểm tra bằng cách sử dụng một cái gì đó như firebug nếu có sự khác biệt (về lớp, id, v.v.) giữa hai nút và sử dụng nó để giải quyết nút cụ thể
2. Sử dụng một cái gì đó như: first-child để chọn ví dụ như nút đầu tiên và tạo kiểu khác

Khi tôi xem nguồn bằng firebug cho một trong các hộp thoại của mình, nó sẽ xuất hiện một cái gì đó như:

<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>

Vì vậy, ví dụ, tôi có thể giải quyết nút Gửi bằng cách thêm một số kiểu vào .ui-state-focus (có lẽ với một số bộ chọn bổ sung để đảm bảo tôi ghi đè các kiểu của jquery).

Nhân tiện, tôi muốn chọn tùy chọn thứ hai trong trường hợp này để tránh các vấn đề khi tiêu điểm thay đổi ...

Bạn nên thay đổi từ "className" cho "class"

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

Có lẽ một cái gì đó như thế này?

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

Chọn div có hộp thoại vai trò, sau đó chọn các nút thích hợp trong đó và đặt CSS.

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

Ngoài ra còn có một câu trả lời đơn giản để xác định các kiểu cụ thể sẽ chỉ được áp dụng cho nút cụ thể đó và bạn có thể có kiểu phần tử khai báo Jquery khi khai báo hộp thoại:

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

sau khi làm điều đó, đây là những gì html hiển thị:

làm điều này cho phép bạn thiết lập nó, nhưng không nhất thiết phải dễ dàng thay đổi bằng cách sử dụng jquery sau này.

Tại sao không chỉ kiểm tra đánh dấu đã tạo, ghi chú lớp vào nút chọn và tự tạo kiểu cho nó?

Tôi khuyên bạn nên xem qua HTML mà mã xuất ra và xem liệu có cách nào để xác định duy nhất một (hoặc cả hai) nút (có thể là thuộc tính id hoặc tên), sau đó sử dụng jQuery để chọn mục đó và áp dụng css lớp cho nó.

Nếu ghi chú vẫn hoạt động, bạn hãy thêm các kiểu sau trên trang kiểu của bạn

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

Nó sẽ thay đổi màu nền của các nút hộp thoại.