Bảng điều khiển jQuery Mobile - kiểm tra xem nó có đang mở không.

Question

Tôi đang cố gắng kiểm tra xem bảng của tôi đang mở hay đóng.

tôi đã cố gắng như thế này:

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

nhưng có gì xảy ra.

Làm cách nào tôi có thể thiết lập trình xử lý sự kiện cho bảng điều khiển di động jQ?

Mở không phải là vấn đề, vì tôi sẽ chỉ thêm .panel('open') vào nút bấm và sau đó console.log(), nhưng còn gì nữa? Bảng điều khiển sẽ đóng khi tôi sẽ nhấp vào bên ngoài, làm thế nào để nắm bắt thời điểm đó?

Answer 1

Được rồi, tôi thấy điều này:

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

Vì vậy, những gì tôi cần là:

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

Answer 2

Tôi nghĩ bạn có thể muốn sự kiện pagebeforehide hoặc pagehide.

See here để biết thông tin sự kiện jquerymobile.

Answer 3

tôi sử dụng như thế này:

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

Hy vọng nó giúp .

Answer 5

Để kiểm tra ngay bây giờ kiểm tra Tôi đã sử dụng mã sau.

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

Nếu bạn có thể tôi muốn ràng buộc với các sự kiện như được hiển thị trong câu trả lời được chấp nhận.

Answer 6

CSS JQM áp dụng cho bảng điều khiển chỉ rõ trạng thái của nó. Đây là giải pháp vanilla JS rất đơn giản:

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

Dòng 2 trả về "true" nếu mở, "false" nếu không. Nó cũng dễ dàng hơn rất nhiều cho các nhà phát triển tiếp theo (hoặc bản thân bạn trong một vài tháng) để tìm ra những gì bạn đang làm.

Answer 7

gì bạn cần là để kiểm tra xem bảng điều khiển mở hoặc đóng bằng 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"); 
    } 
} 

Cách sử dụng:

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