Panel jQuery Mobile - sprawdź, czy jest otwarty

Question

Próbuję sprawdzić, czy mój panel jest otwarty lub zamknięty.

Próbowałem tak:

$(document).on('open', '.ui-panel', function(){ 
    console.log('open');  
}) 

ale nic się nie dzieje.

Jak skonfigurować odbiornik zdarzeń dla panelu mobilnego jQ?

Otwarty nie jest problemem, bo po prostu dodaję .panel('open') do kliknięcia przycisku, a następnie console.log(), ale co z zamknięciem? Panel zamknie się, gdy kliknę na zewnątrz, jak złapać ten moment?

Answer 1

Dobra, znalazłem to:

http://api.jquerymobile.com/panel/#event-beforeclose

Więc co mi było potrzebne:

$(".selector").on("panelbeforeclose", function(event, ui) {}); 

Answer 2

Myślę, że możesz chcieć zdarzenia pagebeforehide lub pagehide.

See here dla informacji o zdarzeniach jquerymobile.

Answer 3

używam tak:

if ($("#id").find("div").css("visibility") == "hidden") { 
    alert("Closed"); 
} else { 
    alert("Opened"); 
} 

Answer 4

$(document).bind('panelopen', function (e, data) { 
     $('body').css("overflow", "hidden"); 
    }); 

    $(document).bind('panelclose', function (e, data) { 
     $('body').css("overflow", "auto"); 
    }); 

Nadzieję, że to pomaga .

Answer 5

Dla sprawdź teraz sprawdź Użyłem następującego kodu.

function isSideNavVisible() { 
    var sidenav = $("#sidenav"); 
    var sideNavHidden = sidenav.css("visibility") == "hidden" || sidenav.css("overflow-x") == "hidden" || sidenav.css("overflow-y") == "hidden"; 
    return !sideNavHidden; 
} 

Jeśli możesz, wolałbym wiązać się ze zdarzeniami, jak pokazano w zaakceptowanej odpowiedzi.

Answer 6

Kod CSS JQM dotyczy panelu jawnie wskazuje jego stan. Oto bardzo proste rozwiązanie wanilia JS:

1 var document.getElementById("name-of-panel") = my_panel; 
2 my_panel.classList.contains("ui-panel-open"); 

Linia 2 zwraca „true”, jeśli jest otwarty, „false”, jeśli tak nie jest. Dla następnego dewelopera (lub dla ciebie w ciągu kilku miesięcy) o wiele łatwiej jest zorientować się, co robisz.

Answer 7

Co potrzebne jest, aby sprawdzić, czy panel otwarty lub zamknięty za pomocą hasClass

if($(".ui-panel").hasClass("ui-panel-open") == true){ 
    alert("OPENED"); 
}else{ 
    alert("CLOSED"); 
} 

Answer 8

function OpenPanel(panel) { 
    if ($(".ui-page-active").jqmData("panel") !== "open") { 
     $(panel).panel("open"); 

    }else{ 
     $(panel).panel("close"); 
    } 
} 

Zastosowanie:

<div onclick='OpenPanel("#ui-panel1");'>Click Here</div>