我想检查我的面板是打开还是关闭状态。
我尝试了以下方法:
$(document).on('open', '.ui-panel', function(){
console.log('open');
})
但是什么也没有发生。
我如何为jQ移动面板设置事件监听器?
打开不是问题,因为我只需在按钮单击时添加.panel('open')
,然后console.log()
,但关闭呢?当我点击外部时面板会关闭,如何捕捉那一刻?
我想检查我的面板是打开还是关闭状态。
我尝试了以下方法:
$(document).on('open', '.ui-panel', function(){
console.log('open');
})
但是什么也没有发生。
我如何为jQ移动面板设置事件监听器?
打开不是问题,因为我只需在按钮单击时添加.panel('open')
,然后console.log()
,但关闭呢?当我点击外部时面板会关闭,如何捕捉那一刻?
你需要做的是使用 hasClass
检查面板是否打开或关闭。
if( $(".ui-panel").hasClass("ui-panel-open") == true ){
alert("OPENED");
}else{
alert("CLOSED");
}
好的,我找到了这个:
http://api.jquerymobile.com/panel/#event-beforeclose
所以我需要的是:
$( ".selector" ).on( "panelbeforeclose", function( event, ui ) {} );
$(document).bind('panelopen', function (e, data) {
$('body').css("overflow", "hidden");
});
$(document).bind('panelclose', function (e, data) {
$('body').css("overflow", "auto");
});
function isSideNavVisible() {
var sidenav = $("#sidenav");
var sideNavHidden = sidenav.css("visibility") == "hidden" || sidenav.css("overflow-x") == "hidden" || sidenav.css("overflow-y") == "hidden";
return !sideNavHidden;
}
if ($("#id").find("div").css("visibility") == "hidden") {
alert("Closed");
} else {
alert("Opened");
}
function OpenPanel(panel) {
if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
$(panel).panel("open");
}else{
$(panel).panel("close");
}
}
使用方法:
<div onclick='OpenPanel("#ui-panel1");'>Click Here</div>
CSS JQM应用于面板明确指示其状态。这里是一个非常简单的原生JS解决方案:
1 var document.getElementById("name-of-panel") = my_panel;
2 my_panel.classList.contains("ui-panel-open");
第二行返回“true”如果它是打开的,“false”如果它没有。这也让下一个开发人员(或几个月后的你自己)更容易弄清楚你正在做什么。