So entfernen Sie jQuery-ui-dialog-title-bar?

Ich versuche zu verstecken jQuery-ui dialog's title bar, aber halten Sie die schließen-Schaltfläche in der Titelleiste sichtbar. Gesucht hab ich viel post auf stackoverflow wie diese. In jedem post wird die Titelleiste ausgeblendet, aber der Platz an der bar ist immer noch da. Ich möchte zu entfernen, dass der Raum auch aber ohne entfernen der Schaltfläche "schließen".

Wie kann ich dies tun?

InformationsquelleAutor der Frage Tom Rider | 2012-11-08

  1. 18

    Basierend auf diese Antwort:

    Verwenden .dialog("widget") option suchen, um die div-wrapper für den dialog. Der wrapper enthält alle markup verwendet, für den dialog, einschließlich der header, Titelleiste und schließen-button; und den dialog-Inhalt selbst. Hier ist ein Weg, um die Methode aufrufen und ausblenden der Titelleiste:

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

    Dann können Sie CSS verwenden, um unnötige margin, border und padding. Zum Beispiel:

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

    Hier ist ein demo basierend auf den obigen code, plus es fügt die notwendigen Formatvorlagen mithilfe von jQuery.

    InformationsquelleAutor der Antwort Salman A

  2. 1

    Wenn Sie möchten, entfernen Sie die titelbar und halten Sie die "schließen" - Symbol using styles only, verwenden Sie die Stile unten. Es schrumpft die Titelleiste, um die Größe der schließen-Symbol und versteckt es hinter sich. ui-icons_6e6e6e_256x240.png erstellt habe ich durch die Aufhellung der ui-icons_222222_256x240.png-Bild, das jqueryui kommt mit.

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

    InformationsquelleAutor der Antwort jonny

  3. 0

    So wie ich es sehe, haben Sie 3 Möglichkeiten.

    1. Ja, beseitigen Sie die Titelleiste komplett und fügen Sie eine benutzerdefinierte, können Sie Stil, um mit dem Standard, Verwendung von absoluter Positionierung sollte der Schlüssel.
    2. Wenn Sie Zeit haben, verlängern (nicht überschreiben) _create-Methode des dialog https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 zu tun, was Sie brauchen
    3. Arbeiten mit CSS-Hack zum halten der Titelleiste gibt es mit einer Höhe von " 0 " für alle Elemente, aber die schließen-Schaltfläche.

    Entweder man hat Ihre Nachteile und Vorteile, die ich empfehlen würde #2 die beste, wenn Sie können, hier einige Informationen zum arbeiten mit widgets http://api.jqueryui.com/jQuery.widget/

    InformationsquelleAutor der Antwort leopic

  4. 0

    Dies ist, Wie es getan werden kann.

    Gehen Sie zum Ordner "themes" --> base--> open jquery.ui.dialog.css

    Finden

    Folgenden

    wenn Sie nicht anzeigen möchten titleBar dann einfach display:none wie ich im folgenden.

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

    Samilarly für Titel als auch.

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

    Kommt jetzt schließen-Schaltfläche Sie können auch festlegen, dass es keine oder können Sie seine

    .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;

}

    Habe ich viel suchen, aber nichts dann habe ich diese Idee in meinem Kopf. Allerdings wird dieser Effekt gesamte Anwendung nicht schließen-Schaltfläche,die Titelleiste für das Dialogfeld können Sie aber überwinden, dies auch mithilfe von jquery und das hinzufügen und konfigurieren von css über jquery

    hier ist die syntax für diesen

    $(".specificclass").css({display:normal})

    InformationsquelleAutor der Antwort ProgrammingNinja

Schreibe einen Kommentar