web-dev-qa-db-ja.com

jQuery-uiダイアログタイトルバーを削除する方法？

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

これどうやってするの？

javascriptjquerycssjquery-uijquery-ui-dialog
15
Tom Rider

この答え に基づく：

.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を使用して必要なスタイルを追加しています.

18
Salman A

タイテルバーを削除し、スタイルのみを使用して閉じるアイコンを保持する場合は、以下のスタイルを使用してください。タイトルバーを閉じるアイコンのサイズに縮小し、後ろに隠します。 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");}
1
jonny

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

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

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

0
leopic

これは、それを行う方法です。

テーマフォルダーに移動します->ベース-> 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})
0
ProgrammingNinja