Thay thế biểu tượng Đóng cho hộp thoại JQueryUI

Question

Sau khi tìm kiếm rộng rãi về chủ đề này, tôi không thể tìm thấy câu trả lời, vì vậy hy vọng ai đó có thể giúp tôi giải quyết vấn đề này. Tôi có một hộp thoại tương đối cơ bản:

$("#dialog-search").dialog({ 
    resizable: false, 
    height:dimensionData.height, 
    width: dimensionData.width, 
    modal: true, 
    title: dimensionData.title, 
    position: [x,y], 
    open: function() { 
     $("#dialog-search .dateField").blur(); 
    }, 
    close: function(event, ui){ 
     callBack(event,ui); 
    } 
}); 

Những gì tôi muốn làm là thay thế các biểu tượng X (ui-icon-đóng) với một biểu tượng khác nhau được cung cấp bởi ui (ui-icon-trừ), do đó nhấp vào biểu tượng dấu trừ sẽ đóng hộp thoại thay thế. Tôi đã nhìn thấy các bài viết về cách ẩn biểu tượng hoặc thay thế nó bằng một hình ảnh tùy chỉnh trong css, nhưng tôi chưa tìm thấy cách thay thế biểu tượng bằng một biểu tượng khác để thực hiện chức năng tương tự.

Chỉnh sửa: Tôi cũng muốn có thể sử dụng ui-icon-close cho một chức năng khác trong hộp thoại của tôi bằng cách thêm hành vi/vị trí tùy chỉnh, nhưng có thể nằm ngoài phạm vi của câu hỏi này. Tuy nhiên, vui lòng giải quyết vấn đề này nếu đó là giải pháp có liên quan.

Answer 1

Cố gắng xem cấu trúc của hộp thoại và không khó thực hiện.

http://jqueryui.com/demos/dialog/#theming

Sử dụng sự kiện create để thay đổi lớp của biểu tượng nút gần lớp của một biểu tượng sẽ làm.

http://jsfiddle.net/Quincy/kHU2M/1/

$("#dialog-search").dialog({ 
    create: function(event, ui) { 
     var widget = $(this).dialog("widget"); 
     $(".ui-dialog-titlebar-close span", widget) 
      .removeClass("ui-icon-closethick") 
      .addClass("ui-icon-minusthick"); 
    } 
}); 

Answer 2

Cũ câu hỏi, nhưng có lẽ tôi sẽ giúp một ai đó. Theo sau CSS đã thực hiện thủ thuật cho tôi, hoàn toàn tùy chỉnh Close giao diện người dùng nút. Không phải là rất thanh lịch :), nhưng hoạt động tốt cho tôi.

.ui-icon-closethick { 
    background-image: url(images/my-10px-image.png) !important; 
    background-position: left top !important; 
    margin: 0 !important; 
} 

.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick { 
    width: 10px !important; 
    height: 10px !important; 
} 

.ui-dialog .ui-dialog-titlebar-close { 
    background: none !important; 
    border: none !important; 
} 

.ui-dialog .ui-dialog-titlebar-close, .ui-dialog .ui-dialog-titlebar-close:hover { 
    padding: 0 !important; 
} 

tùy chỉnh nút đóng My hiển thị dưới đây: