webentwicklung-frage-antwort-db.com.de

jquery UI-Dialog: Wie kann man ohne Titelleiste initialisieren?

Ist es möglich, ein jQuery-UI-Dialogfeld ohne Titelleiste zu öffnen?

245
Loony2nz

Ich habe einen Fix für das dynamische Entfernen der Titelleiste gefunden.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

Dadurch werden alle Elemente mit der Klasse 'ui-dialog-titlebar' nach dem Rendern des Dialogfelds entfernt.

95
Loony2nz

Ich denke, dass die beste Lösung die Option dialogClass ist.

Ein Auszug aus Jquery-UI-Dokumenten:

während der Init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

oder wenn du nach init willst. : 

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

Also habe ich einen Dialog mit der Option dialogClass = 'noTitleStuff' und der folgenden CSS erstellt:

.noTitleStuff .ui-dialog-titlebar {display:none}

zu einfach !! aber ich brauchte einen tag, um zu überlegen, warum meine bisherige Bohrmethode mit id-klasse nicht funktionierte. Wenn Sie die .dialog()-Methode aufrufen, wird das div, das Sie umwandeln, zu einem Kind eines anderen div (des echten Dialogs div) und möglicherweise zu einem "Bruder" der titlebar-div. Daher ist es sehr schwierig, das letztere ausgehend von der ersten zu finden.

285
mizar

Ich glaube, Sie können es mit CSS verstecken: 

.ui-dialog-titlebar {
    display: none;
}

Alternativ können Sie dies mit der Option dialogClass auf bestimmte Dialoge anwenden:

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});
.no-titlebar .ui-dialog-titlebar {
    display: none;
}

Schauen Sie sich " Theming " im Dialog an. Der obige Vorschlag macht von der Option dialogClass Gebrauch, die sich auf es ist ein Ausweg zugunsten einer neuen Methode zu befinden scheint.

58
Sampson

Ich verwende das in meinen Projekten

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();
55
Amirouche Douda

Das hat für mich funktioniert:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },
14
Koder

Versuchen Sie es mit

$("#mydialog").closest(".ui-dialog-titlebar").hide();

Dadurch werden alle Dialogtitel ausgeblendet

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

Tatsächlich gibt es noch eine andere Möglichkeit, den Dialog widget direkt zu verwenden:

Sie können das Dialog Widget also bekommen 

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

und dann tun

$dlgWidget.find(".ui-dialog-titlebar").hide();

um nur die Variable titlebar in diesem Dialog auszublenden

und in einer einzigen Codezeile (ich mag Verketten):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

Es ist nicht notwendig, eine zusätzliche Klasse auf diese Weise in den Dialog einzufügen. Arbeit gut für mich.

7
odedbd

Ich finde es effizienter und lesbarer, das Ereignis open zu verwenden und die Titelleiste dort zu verbergen. Ich mag es nicht, globale Namen für die Suche nach Seitennamen zu verwenden.

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

Einfach.

5

Sie können jquery verwenden, um die Titelleiste nach der Verwendung von dialogClass beim Initialisieren des Dialogs auszublenden.

während der Init:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

Wenn Sie diese Methode verwenden, müssen Sie Ihre CSS-Datei nicht ändern. Dies ist auch dynamisch.

4

Ich mag es, jQuery-Widgets zu überschreiben. 

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

Sie können also jetzt einstellen, ob Sie die Titelleiste anzeigen möchten oder nicht

   $('#mydialog').dialog({
      headerVisible: false // or true
});
4
Andrej Kaurin

Wenn Sie mehrere Dialoge haben, können Sie Folgendes verwenden:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });
4
m4dd

Dies ist der einfachste Weg, dies zu tun, und es wird nur die Titelleiste in diesem einen bestimmten Dialog entfernt.

$('.dialog_selector').find('.ui-dialog-titlebar').hide();
3
pdubbb1

Beim Ausblenden der Dialog-Titelleiste habe ich festgestellt, dass Bildschirmlesegeräte die Anzeige auch dann aufheben und lesen, wenn sie nicht angezeigt werden. Wenn Sie bereits eine eigene Titelleiste hinzugefügt haben, werden beide gelesen, was zu Verwirrung führt. 

Was ich tat, war es mit $(selector).remove() aus dem DOM entfernt. Jetzt wird der Bildschirmleser (und alle anderen) nicht mehr angezeigt, weil er nicht mehr existiert.

2
user616258

Versuche dies

$("#ui-dialog-title-divid").parent().hide();

divid durch entsprechende id ersetzen

2

Dies funktionierte für mich, um die Titelleiste des Dialogfelds auszublenden: 

$(".ui-dialog-titlebar" ).css("display", "none" );
1
user1712742

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 im Folgenden beschrieben. 

.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 nichts, dann kam mir diese Idee in den Sinn ... Dies hat jedoch zur Folge, dass die gesamte Anwendung keine Schließen-Schaltfläche und keine Titelleiste für Dialoge hat, aber Sie können dies ebenfalls überwinden, indem Sie Jquery verwenden und hinzufügen css über jquery einstellen

hier ist die Syntax dafür 

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

Ich denke, der sauberste Weg wäre, ein neues myDialog-Widget zu erstellen, das aus dem Dialog-Widget ohne den Titelstrichcode besteht. Das Ausschneiden des Titel-Strichcodes sieht einfach aus. 

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

1
Joffer

Für mich wollte ich immer noch die anpassbaren Ecken nutzen, wollte einfach nicht die diagonalen Linien sehen. ich benutzte

$(".ui-resizable-handle").css("opacity","0");

Mir wurde gerade klar, dass ich die falsche Frage kommentierte. Meinem Namensvetter gerecht werden :(

0
controlZ

Diese nächste Form hat das Problem behoben.

$('#btnShow').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        'background-image': 'none',
        'background-color': 'white',
        'border': 'none'
      });
    }
  });
});
#basicModal {
  display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

0
jcromeros1987