3

タイトルバーを削除するにはどうすればよいですか。

ここでAPIを確認しましたが、何も見つかりませんでした。

http://api.jqueryui.com/dialog/

他の「ソリューション」には、特にjQueryよりも見栄えの良いGUIがあることに気づきました。

http://www.ericmmartin.com/projects/simplemodal/

ただし、すべてのリソースのjQueryUI bcを使用したいと思います...オンラインAPIドキュメント、チュートリアルなど。

タイトルバーを取り除く方法を知る必要がありますか？

ありがとう

4

6 に答える 6

9

いくつかのオプションがあります。

CSSで非表示
.ui-dialog-titlebar { display: none }

Javascriptで非
表示これにより、ダイアログの作成時にタイトルバーが削除されますが、閉じるボタンは保持されます。

$("div").dialog({
  create: function( event, ui ) {
      var dialog = $(this).closest(".ui-dialog");
      dialog.find(".ui-dialog-titlebar-close")
            .appendTo(dialog)
            .css({
              position: "absolute",
              top: 0,
              right: 0,
              margin: "3px"
            });
      dialog.find(".ui-dialog-titlebar").remove();
  }
})​

デモを参照してください：http： //jsfiddle.net/4AuhC/52/

于 2012-10-15T17:47:13.507 に答える
5

elダイアログが作成された元の要素として与えられます：

$(el).siblings('.ui-dialog-titlebar').remove();

http://jsfiddle.net/alnitak/N9TGd/を参照してください

（質問のタイトルごとに）タイトルバーを実際に削除すると、閉じるボタンも削除され、ダイアログボックスをドラッグする機能が失われることに注意してください。

于 2012-10-15T17:46:15.350 に答える
5

このCSSをjQueryUIのCSSの後に追加します。

注意してください：これ以上閉じるボタンはなく、ドラッグすることはできません！

.ui-dialog-titlebar { display: none }

jsFiddle： http: //jsfiddle.net/PeVvA/

ドラッグとボタンを保持したいが、すべてのテーマで機能するとは限らない場合。

.ui-dialog-titlebar { background: none; border: 0px solid black }​

jsFiddle： http: //jsfiddle.net/PeVvA/1/

CSSを使用するだけで、おそらくもっと多くのことができるでしょう。私はおそらく高さで遊ぶでしょう。

于 2012-10-15T17:47:24.083 に答える
3

これをCSSに直接追加してみることができます。

.ui-dialog-titlebar
{ 
   display: none !important;
}
于 2012-10-15T17:47:54.660 に答える
2

これを試して：

$(".ui-dialog-titlebar").hide()

（または）

$("#dlg").dialog({
  open: function() {
    $(this).dialog("widget").find(".ui-dialog-titlebar").hide();
  }
});
于 2012-10-15T17:50:46.207 に答える
0

タイトルバーを削除し、スタイルのみを使用して閉じるアイコンを保持する場合は、以下のスタイルを使用してください。タイトルバーを閉じるアイコンのサイズに縮小し、背後に非表示にします。 jqueryuiに付属しているイメージをui-icons_6e6e6e_256x240.png明るくして作成しました。ui-icons_222222_256x240.png

.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}

.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}

.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}

.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}

.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}

.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}
于 2013-05-09T23:27:15.000 に答える