Pannello jQuery Mobile - controlla se è aperto

Question

Sto provando a controllare se il mio pannello è aperto o chiuso.

ho provato in questo modo:

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

ma non succede nulla.

Come posso impostare un listener di eventi per jQ mobile panel?

L'apertura non è un problema, perché aggiungerò semplicemente .panel('open') al clic del pulsante e quindi console.log(), ma con chiudi? Il pannello si chiuderà quando farò clic all'esterno, come catturare quel momento?

Answer 1

Va bene, ho trovato questo:

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

Quindi quello che serviva era:

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

Answer 2

Penso che si possa desiderare che l'evento pagebeforehide o pagehide venga visualizzato.

See here per informazioni sugli eventi jquerymobile.

Answer 3

io uso come questo:

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"); 
    }); 

Speranza che aiuta .

Answer 5

Per un controllare ora controllo Ho utilizzato il seguente codice.

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

Se è possibile che preferisce legarsi agli eventi come indicato nella risposta accettata.

Answer 6

Il JQM CSS si applica al pannello indica esplicitamente il suo stato. Ecco una soluzione molto semplice vaniglia JS:

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

Linea 2 restituisce "true" se è aperto, "false" se non lo è. È anche molto più facile per il prossimo dev (o te stesso in pochi mesi) capire cosa stavi facendo.

Answer 7

Quello che vi serve è quello di verificare se il pannello aperto o chiuso utilizzando 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"); 
    } 
} 

Usage:

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