JQueryUIダイアログボックスの閉じるアイコンを置き換える

Question

このトピックに関する詳細な検索を行った後、私は答えを見つけることができなかったので、誰かがこの問題を助けてくれることを願っています。ように、

$("#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（UI-アイコンマイナス）によって提供される異なるアイコンでXアイコン（UI-アイコン・クローズ）の交換です：私は、比較的基本的なダイアログボックスを持っていますマイナスアイコンをクリックするとダイアログが閉じます。私はアイコンを隠す方法やcssのカスタムイメージで置き換える方法についての記事を見てきましたが、アイコンを同じアイコンを別のアイコンに置き換えて同じ機能を実行する方法はまだ見つかりませんでした。

編集：カスタム動作/場所を追加することで、ダイアログボックスの別の機能にui-icon-closeを使用することもできますが、この質問の範囲外になる可能性があります。しかし、それが関連する解決策であれば自由に対処してください。

Answer 1

ダイアログの構造を見てみると難しくありません。

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

Answer 2

旧質問、多分私は誰かをお手伝いします。その後、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; 
} 

マイカスタム閉じるボタン：