替換JQueryUI對話框的關閉圖標

經過對此主題的大量搜索後，我無法找到答案，所以希望有人能夠幫助解決此問題。我有一個比較基本的對話框：替換JQueryUI對話框的關閉圖標

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

我想要做的是與用戶界面（UI圖標減）提供不同的圖標替換X圖標（UI圖標關閉），使點擊減號圖標關閉對話框。我已經看過有關如何隱藏圖標或將其替換爲css中的自定義圖像的文章，但我還沒有找到一種方法來將圖標替換爲另一個圖標來執行相同的功能。

編輯：我也希望能夠通過添加自定義行爲/位置來使用ui-icon-close在我的對話框中使用不同的功能，但這可能超出了此問題的範圍。不過，如果這是一個相關的解決方案，請隨時解決。

來源

2011-10-26 Axle

試着看看對話框的結構，它不應該很難做到。

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

使用create事件類的關閉按鈕圖標更改爲類另一個圖標會做的。

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

來源

2011-10-27 01:34:55 Quincy

謝謝，我會檢查了這一點。 JavaScript非常令人沮喪，您必須刪除並添加一個類才能完成簡單的圖像替換。 – Axle

但是，如何添加我自己的圖像？要創建一個使用背景圖像的CSS類：...並不真正起作用，它只會把整個事情弄糟。是否有教程用於完全交換X，而不是「內置」圖像之一？而且比較大。 – Ted

@Ted我已經添加了一個自定義圖像的答案。 – udalmik

老問題，但也許我會幫助別人。以下爲CSS爲我製作的技巧，完全自定義Close按鈕UI。不是很優雅:)，但對我來說工作得很好。

.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; 
}

我的自定義關閉按鈕如下圖所示：

來源

2013-03-04 14:56:22 udalmik

替換JQueryUI對話框的關閉圖標

回答

相關問題