16

jQuery-uiダイアログのタイトルバーを非表示にしようとしていますが、タイトルバーの閉じるボタンは表示したままにします。私はこのようなstackoverflowに関する多くの投稿を検索しました。各投稿でタイトルバーは非表示になっていますが、バーが占めるスペースはまだそこにあります。そのスペースも削除したいのですが、閉じるボタンを削除しません。

これどうやってするの？

4

4 に答える 4

20

この答えに基づいて：

オプションを使用.dialog("widget")して、ダイアログのdivラッパーを見つけます。ラッパーには、ヘッダー、タイトルバー、閉じるボタンなど、ダイアログに使用されるすべてのマークアップが含まれています。およびダイアログコンテンツ自体。メソッドを呼び出してタイトルバーを非表示にする1つの方法は次のとおりです。

$("#id").dialog({
    autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​

次に、CSSを使用して、不要なマージン、境界線、およびパディングを排除できます。例えば：

.ui-dialog-titlebar {
    float: right;
    border: 0;
    padding: 0;
}
.ui-dialog-titlebar-close {
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;
}

上記のコードに基づいたデモに加えて、jQueryを使用して必要なスタイルを追加します。

于 2012-11-08T07:01:10.097 に答える
1

タイトルバーを削除し、スタイルのみを使用して閉じるアイコンを保持する場合は、以下のスタイルを使用してください。タイトルバーを閉じるアイコンのサイズに縮小し、背後に非表示にします。ui-icons_6e6e6e_256x240.pngjqueryuiに付属している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:23:23.137 に答える
0

私の見方では、3つの選択肢があります。

  1. はい、タイトルバーを完全に削除し、デフォルトのタイトルバーに一致するようにスタイルを設定できるカスタムタイトルバーを追加します。絶対位置を使用することが重要です。
  2. 時間がある場合は、ダイアログhttps://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74の_createメソッドを拡張（上書きしない）して、次のことを実行します。必要
  3. CSSハッカーと連携して、閉じるボタンを除くすべての要素のタイトルバーの高さを0に保ちます。

どちらにも短所と長所があります。可能であれば、＃2をお勧めします。ウィジェットの操作方法に関する情報は次のとおりです。http：//api.jqueryui.com/jQuery.widget/

于 2012-11-08T05:45:47.860 に答える
0

これがその方法です。

テーマフォルダに移動->ベース->jquery.ui.dialog.cssを開きます

探す

以下

titleBarを表示したくない場合は、次のようにdisplay：noneを設定します。

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

タイトルも同様です。

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

これで、閉じるボタンが表示されます。設定しないか、設定することもできます。

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

私はたくさんの検索をしましたが、何もしませんでした。それから私はこの考えを頭に浮かびました。ただし、これはアプリケーション全体に影響し、ダイアログの閉じるボタン、タイトルバーがなくなりますが、jqueryを使用し、jqueryを介してcssを追加および設定することで、これを克服することもできます。

これがこの構文です

$(".specificclass").css({display:normal})
于 2014-04-18T09:29:06.330 に答える