okno dialogowe interfejsu użytkownika jquery: jak zainicjować bez paska tytułu?

Czy można otworzyć okno dialogowe interfejsu użytkownika jQuery bez paska tytułu?

Myślę, że najlepszym rozwiązaniem jest skorzystanie z tej opcji dialogClass.

Wyciąg z dokumentów interfejsu użytkownika jquery:

podczas init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

lub jeśli chcesz po init. :

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

Więc stworzyłem jakieś okno dialogowe z opcją dialogClass = 'noTitleStuff' i css w ten sposób:

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

zbyt proste !! ale zastanowiłem się, dlaczego moja poprzednia metoda wiercenia klasy id-> nie zadziałała. W rzeczywistości, kiedy wywołujesz .dialog()metodę div, którą przekształcasz, stajesz się dzieckiem innego diva (prawdziwy dialog div) i być może „bratem” titlebardiv, więc bardzo trudno jest znaleźć to drugie, zaczynając od pierwszego.

Doszedłem do rozwiązania problemu dynamicznego usuwania paska tytułu.

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

Spowoduje to usunięcie wszystkich elementów z klasą „ui-dialog-tytułowy” po wyrenderowaniu okna dialogowego.

Wierzę, że możesz to ukryć za pomocą CSS:

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

Możesz również zastosować to do określonych okien dialogowych z dialogClassopcją:

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

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

Sprawdź okno dialogowe „ Theming ”. Powyższa sugestia korzysta z dialogClassopcji, która wydaje się być w drodze na korzyść nowej metody.

Używam tego w swoich projektach

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

To działało dla mnie:

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

Spróbuj użyć

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

Ukryje to wszystkie tytuły okien dialogowych

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

W rzeczywistości istnieje jeszcze inny sposób, używając widgetbezpośrednio tego okna dialogowego :

W ten sposób możesz uzyskać Widżet Dialogu

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

a następnie zrobić

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

aby ukryć tylko titlebarw tym oknie dialogowym

i w jednym wierszu kodu (lubię łańcuch):

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

Nie ma potrzeby dodawania w ten sposób dodatkowej klasy do okna dialogowego, wystarczy przejść do niego bezpośrednio. Dobra robota dla mnie.

Uważam, że jest bardziej wydajne i bardziej czytelne, aby użyć otwartego zdarzenia i ukryć przed nim pasek tytułu. Nie lubię wyszukiwać nazw klas na poziomie strony.

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

Prosty.

Możesz użyć jquery, aby ukryć pasek tytułu po użyciu dialogClass podczas inicjowania okna dialogowego.

podczas init:

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

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

Korzystając z tej metody, nie musisz zmieniać pliku css, a to również jest dynamiczne.

Lubię przesłonić widżety jQuery.

(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);

Możesz więc teraz ustawić, czy chcesz wyświetlać pasek tytułu, czy nie

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

Jeśli masz wiele okien dialogowych, możesz użyć tego:

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

Jest to najłatwiejszy sposób, aby to zrobić i usunie pasek tytułowy tylko w tym jednym konkretnym oknie dialogowym;

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

Jedną z rzeczy, które odkryłem podczas ukrywania paska tytułowego okna dialogowego, jest to, że nawet jeśli ekran nie jest wyświetlany, czytniki ekranu nadal go podnoszą i będą go czytać. Jeśli już dodałeś własny pasek tytułu, odczyta oba, powodując zamieszanie.

To, co zrobiłem, zostało usunięte z DOM przy użyciu $(selector).remove(). Teraz czytniki ekranu (i każdy inny) nie zobaczą go, ponieważ już nie istnieje.

Spróbuj tego

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

zastąpić dividodpowiednimid

Ta następna forma rozwiązała problem.

$('#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>

Myślę, że najczystszym sposobem byłoby utworzenie nowego widżetu myDialog, składającego się z widżetu dialogowego minus tytułowy kod kreskowy. Wycięcie tytułowego kodu kreskowego wygląda prosto.

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

Pomogło mi to ukryć pasek tytułu okna dialogowego:

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

Tak można to zrobić.

Przejdź do folderu motywów -> baza -> otwórz jquery.ui.dialog.css

Odnaleźć

Obserwacje

jeśli nie chcesz wyświetlać titleBar, po prostu ustaw display: none, jak to zrobiłem poniżej.

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

Podobnie w przypadku tytułu.

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

Teraz jest przycisk zamykania, możesz również ustawić go na brak lub ustawić

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

}

Przeprowadziłem wiele poszukiwań, ale nic nie przyszło mi do głowy. Spowoduje to jednak, że cała aplikacja nie będzie miała przycisku zamykania, paska tytułowego okna dialogowego, ale można to również rozwiązać, używając jquery oraz dodając i ustawiając css za pomocą jquery

tutaj jest na to składnia

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

Dla mnie nadal chciałem używać zmieniających się rogów, po prostu nie chciałem, więc zobacz ukośne linie. użyłem

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

Właśnie zdałem sobie sprawę, że komentuję niewłaściwe pytanie. Zgodnie z moim imiennikiem :(

Czy wypróbowałeś już rozwiązanie z dokumentów interfejsu użytkownika jQuery? https://api.jqueryui.com/dialog/#method-open

Jak to mówi, możesz to zrobić ...

W CSS:

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

W JS:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});

Możesz usunąć pasek z ikoną zamknięcia za pomocą technik opisanych powyżej, a następnie samodzielnie dodać ikonę zamknięcia.

CSS:

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

// dołącz ten div do div zawierającego twoją treść

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });

przejdź do jquery-ui.js (w moim przypadku jquery-ui-1.10.3.custom.js) i wyszukaj this._createTitlebar (); i skomentuj to.

teraz każde twoje okno dialogowe pojawi się z nagłówkami. Jeśli chcesz dostosować nagłówek, po prostu przejdź do _createTitlebar (); i edytuj kod w środku.

przez