滑动时打开导航抽屉(Material Design Lite)
问题描述:
我正在使用Material Design Lite为Web视图中的应用创建UI,但是我遇到了一个问题,我无法在滑动中部署导航抽屉。滑动时打开导航抽屉(Material Design Lite)
我使用这个jQuery代码来识别刷卡事件
$(function() {
$("#test").swipe({
//Generic swipe handler for all directions
swipeRight:function(event, direction, distance, duration, fingerCount) {
$(this).text("Event Triggered");
},
});
});
从这里我不知道如何打开抽屉式导航栏。我宁愿让整个屏幕“可以滑动”,尤其是左边缘。如何在触发此刷卡处理程序时打开导航栏?
答
我试图在演示材料设计精简版http://www.getmdl.io/templates/dashboard/index.html中添加此效果。所以我找到的解决方案是通过材质设计精简版生成的类“mdl-layout_drawer-button”来模拟汉堡包按钮的点击事件。
$(function() {
$("#test").swipe({
//Generic swipe handler for all directions
swipeRight:function(event, direction, distance, duration, fingerCount) {
$(".mdl-layout__drawer-button").click();
},
});
});
答
打开/关闭sidenav document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
能不能请你重写你的答案适合开门红需求,而不只是应对自己的网站的一些代码。这将有助于揭幕战和其他读者,因为他们可以理解你的意思。 – bish
这个解决方案适用于一个款待,我编辑它以适应我在原始帖子中使用的示例。谢谢 – Isaacm
你如何使用MDL轻扫手势?像它这样的Loos不支持开箱即用的手势。 – mu3