web-dev-qa-db-ja.com

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

Xアイコン（ui-icon-close）をui（ui-icon-minus）によって提供される別のアイコンに置き換えて、マイナスアイコンをクリックするとダイアログが閉じられるようにします。 cssでアイコンを非表示にする方法やカスタム画像に置き換える方法についての投稿を見ましたが、同じ機能を実行するためにアイコンを別のアイコンに置き換える方法をまだ見つけていません。

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

cssjquery-uiiconsjquery-ui-dialog
11
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");
   }
});
14
Quincy

古い質問ですが、誰かを助けるかもしれません。 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;
}

以下に示す私のカスタム閉じるボタン：

9
udalmik