wake-up-neo.net

So entfernen Sie die Titelleiste des jQuery-ui-Dialogfelds

Ich versuche, die Titelleiste von jQuery-ui dialog auszublenden, aber lasse die Schließen-Schaltfläche in der Titelleiste sichtbar. Ich habe viele Posts auf stackoverflow gesucht wie diese . In jedem Beitrag ist die Titelleiste ausgeblendet, aber der von der Leiste belegte Platz ist noch vorhanden. Ich möchte dieses Leerzeichen auch entfernen aber ohne den Schließen-Button zu entfernen.

Wie kann ich das machen?

15
Tom Rider

Basierend auf dieser Antwort :

Verwenden Sie die Option .dialog("widget") , um den Div-Wrapper für das Dialogfeld zu finden. Der Wrapper enthält alle Markierungen, die für das Dialogfeld verwendet werden, einschließlich Kopfzeile, Titelleiste und Schließen-Schaltfläche. und der Dialoginhalt selbst. So können Sie die Methode aufrufen und die Titelleiste ausblenden:

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

Sie können dann CSS verwenden, um unnötigen Rand, Rand und Auffüllung zu entfernen. 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 eine Demo basierend auf dem obigen Code und fügt die erforderlichen Stile mit jQuery hinzu.

18
Salman A

Wenn Sie die Titelleiste entfernen und das Schließsymbol nur mit Stilen beibehalten möchten, verwenden Sie die folgenden Stile. Die Titelzeile wird auf die Größe des Symbols "Schließen" verkleinert und dahinter verborgen. ui-icons_6e6e6e_256x240.png Ich habe durch Aufhellen des Bildes ui-icons_222222_256x240.png dieses Jqueryui erstellt.

.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

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

  1. Ja, entfernen Sie die Titelleiste vollständig und fügen Sie eine benutzerdefinierte Leiste hinzu, die Sie an die Standard-Leiste anpassen können. Die absolute Positionierung sollte der Schlüssel sein.
  2. Wenn Sie die Zeit haben, erweitern Sie die _create-Methode des Dialogs (nicht überschreiben) https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 zu tun, was Sie brauchen
  3. Arbeiten Sie mit CSS-Hackern, um die Titelleiste dort für alle Elemente außer der Schließen-Schaltfläche auf 0 zu belassen.

Entweder hat man ihre Vor- und Nachteile, ich würde # 2 am besten empfehlen, wenn Sie können, hier sind einige Informationen zum Umgang mit Widgets http://api.jqueryui.com/jQuery.widget/

0
leopic

So kann es gemacht werden.

Gehen Sie zum Themes-Ordner -> Basis -> jquery.ui.dialog.css öffnen

Finden

Folgerungen

wenn Sie titleBar nicht anzeigen möchten, setzen Sie einfach die Anzeige: keine wie ich es im Folgenden getan habe.

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

Samilarly auch für den Titel.

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

Nun kommt der Close-Button, Sie können ihn auch nicht einstellen oder Sie können ihn einstellen

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

}

Ich habe viel gesucht, aber dann kam mir diese Idee nicht in den Sinn. Dies hat jedoch zur Folge, dass die gesamte Anwendung keine Schließen-Schaltfläche und keine Titelleiste für Dialogfelder hat. Sie können dies jedoch auch umgehen, indem Sie Jquery verwenden und Css über Jquery hinzufügen und festlegen

hier ist die Syntax dafür

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