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

254

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

Loony2nz
źródło

Odpowiedzi:

289

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.

Mizar
źródło
2
+1 Rozwiązanie Jonatan nie działa w przypadku konkretnego okna dialogowego. Twoje ma.
cetnar
1
Zgadzam się z Mizarem. Jest to najlepsze rozwiązanie ze względu na fakt, że pozwala ono być specyficzne dla okien dialogowych, które mają tylko zdefiniowaną przez ciebie klasę.
Carlos Pinto
2
jedynym minusem tej metody jest to, że Chrome dodaje pionowy pasek przewijania dla takiego okna dialogowego, gdy jest skonfigurowane jako modalne, ponieważ jQuery zaczyna niepoprawnie obliczać wysokość nakładki widgetu interfejsu użytkownika ... Nie kopałem głębiej i nie zrobiłem tego nie znajdziesz szybkiej poprawki oprócz hacky {overflow: hidden}
dimsuz,
1
dialogClass jest przestarzały w jquery v 1.12 i nie wpływa na obiekt okna dialogowego zgodnie z przeznaczeniem.
Mini Lodówka
1
Opcja dialogClass została wycofana na korzyść opcji klas, używając właściwości ui-dialog.
Sandeep Saroha
96

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.

Loony2nz
źródło
3
... a opcja css usuwa wszelkie szanse, że pojawią się wcześniej. Nie jestem pewien, czy widzę jakąkolwiek korzyść z twojej alternatywy. W rzeczywistości twoja alternatywa zrobi to, co ja, dodając tylko dodatkowy krok. Przejście trasy CSS będzie szybsze.
Sampson,
10
Cóż, moja opcja usunie tylko pasek tytułu dla tego jednego okna dialogowego. Gdybym użył tej opcji, usunąłbym pasek tytułu dla wszystkich moich okien dialogowych. Widzę w przyszłości, że będę potrzebować paska tytułu.
Loony2nz
2
Więc zawierać elementu wewnątrz CSS zasady: #example .ui-dialog-titlebar.... Będzie to działało w obie strony; ale JavaScript ostatecznie ustawia css, więc nie widzę korzyści z nie robienia tego w css na początek. To naprawdę nie robi różnicy - z czymkolwiek czujesz się najlepiej :)
Sampson
2
Czy to tylko ja, czy #example nie ma zasięgu nad tytułem okna dialogowego?
Rio
2
@Rice Flour Cookies: .hide () musi pojawić się po .dialog (), ponieważ .dialog () wstrzykuje znaczniki okna dialogowego do strony. Przed tym wywołaniem strona nie ma jeszcze żadnych elementów okna dialogowego.
Jeremy Wiebe
62

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.

Sampson
źródło
Tak, myślę, że to by działało, ale to jest opcja globalna. Zastanawiałem się, czy można to zrobić za pomocą opcji. Wydaje mi się, że mogę zrobić trochę wcześniejszego renderowania jquery'ness, aby usunąć div div, zanim się pojawi.
Loony2nz
2
Nie. Nie wierzę, że istnieje możliwość jej usunięcia. Domyślnie jest to przycisk zamknięcia, więc w pewnym sensie jest to prawie zły projekt.
Sampson,
3
Kiedy ludzie za dużo mówią o css, to się pisze zabawnie, prawda
bobobobo
Prawdopodobnie nie powinieneś go usuwać, ponieważ nie możesz już przesuwać okna dialogowego. Prawdopodobnie lepiej nie umieszczać w nim tekstu i zmienić go, aby był ciemny i cienki
bobobobo
Jeśli masz jakieś inne zdarzenie, które uruchamia metodę zamknięcia okna dialogowego, mogą zdarzyć się przypadki, w których nie potrzebujesz przycisku zamykania na pasku tytułu.
Carlos Pinto,
55

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();
Amirouche Douda
źródło
7
Jeszcze lepiej: usuń pasek tytułowy, ale nie przycisk zamykania. Zachowaj jego funkcjonalność. $(document).ready(function() { $('#video').click(function(){ $( "#dialog" ).dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header'); }); });
Adrian P.
$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove();to najlepsza odpowiedź moim zdaniem +1 dla tego wiersza kodu
Jaylen
Możesz też poszukać poprzedniego rodzeństwa, którym jest pasek tytułowy: .ui-dialog-tytułowy: $("#myDialog").prev().hide()lub $("#myDialog").prev(".ui-dialog-titlebar").hide().
Andrew,
Zwiększ głosowanie, ponieważ mam dwie dywizje i chciałem ukryć tylko jedną.
Marcus Becker,
15

To działało dla mnie:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },
Koder
źródło
1
To ukryje nagłówki we wszystkich oknach dialogowych. Moja sugestia poniżej (następna odpowiedź) zrobi to tylko dla aktualnie otwartego okna dialogowego.
ingredient_15939
Fajnie ... Oznacza to, że nie muszę ukrywać każdego okna dialogowego ze względu na podstawową klasę css ... oznacza to również, że nie muszę osobno konfigurować okna dialogowego, a następnie usunąć tytuł.
Gwasshoppa,
8

Spróbuj użyć

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

Ukryje to wszystkie tytuły okien dialogowych

$(".ui-dialog-titlebar").hide();
Firas Abd Alrahman
źródło
7

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.

odedbd
źródło
5

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.

składnik_15939
źródło
2
Jest to metoda, z którą skorzystałem, ale użyłem funkcji create:, aby zawsze była ukryta, nie tylko wtedy, gdy wyświetlane jest okno dialogowe. Zmieniłem go również na .remove () zamiast .hide (), aby upewnić się, że całkowicie zniknął z okna dialogowego.
Chris Porter
4

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.

Arun Vasudevan Nair
źródło
1
Tak, to było rozwiązanie mizara - opublikowane 6 miesięcy przed twoim.
Kirk Woll,
Zgadzam się, ale wtedy będziesz musiał dodać wpis CSS, który komplikuje rozwiązanie. Moja sugestia rozwiązuje problem przy użyciu tylko jQuery.
Arun Vasudevan Nair
4

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
});
Andrej Kaurin
źródło
4

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();
        }
    });
m4dd
źródło
3

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();
pdubbb1
źródło
2

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.

użytkownik616258
źródło
2

Spróbuj tego

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

zastąpić dividodpowiednimid

abdulkaderjeelani
źródło
2

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>

jcromeros1987
źródło
1

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

$(".ui-dialog-titlebar" ).css("display", "none" );
użytkownik1712742
źródło
1

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})
Programowanie Ninja
źródło
1
To działa i pomaga zrozumieć, że można to zrobić, ale jeśli masz wiele .dialogs()i tylko 1 lub mniej potrzebujesz tych ustawień, wówczas istnieją alternatywne trasy niż globalne zastosowanie ustawień w ten sposób.
Chef_Code
0

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 :(

controlZ
źródło
0

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"
});
Олег Всильдеревьев
źródło
-1

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');
     });
Jakub
źródło
-1

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

użytkownik2575051
źródło
Dokonywanie takich modyfikacji powoduje straszny ból aktualizacji.
usr