6

我正在尝试检查我的面板是打开还是关闭。

我试过这样：

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

但什么也没发生。

如何为 jQ 移动面板设置事件侦听器？

Open 不是问题，因为我只会添加.panel('open')到按钮 click 然后console.log()，但是 close 呢？当我点击外部时面板会关闭，如何捕捉那个时刻？

4

8 回答 8

11

您需要检查面板是使用打开还是关闭hasClass

if( $(".ui-panel").hasClass("ui-panel-open") == true ){
   alert("OPENED");
}else{
   alert("CLOSED");
}
于 2014-03-14T22:10:47.470 回答
9

好的，我发现了这个：

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

所以我需要的是：

$( ".selector" ).on( "panelbeforeclose", function( event, ui ) {} );
于 2013-03-14T16:52:36.873 回答
4 
$(document).bind('panelopen', function (e, data) {
        $('body').css("overflow", "hidden");
    });

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

希望能帮助到你。

于 2013-07-03T18:36:22.257 回答
1

我这样使用：

if ($("#id").find("div").css("visibility") == "hidden") {
    alert("Closed");
} else {
    alert("Opened");
}
于 2013-05-13T00:20:25.517 回答
1

现在检查一下，我使用了以下代码。

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

如果可以的话，我更愿意绑定到已接受答案中显示的事件。

于 2013-08-08T07:43:31.987 回答
1 
 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>
于 2014-09-26T03:20:30.950 回答
0

我想你可能想要 pagebeforehide 或 pagehide 事件。

有关 jquerymobile 事件信息，请参见此处。

于 2013-01-22T21:52:36.483 回答
0

CSS JQM 应用于面板明确指示其状态。这是一个非常简单的香草 JS 解决方案：

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

第 2 行如果打开则返回“true”，否则返回“false”。下一个开发者（或几个月后的你自己）也更容易弄清楚你在做什么。

于 2014-02-02T23:55:42.720 回答