滑動時打開導航抽屜（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"); 
     }, 
     }); 
    });

從這裏我不知道如何打開抽屜式導航欄。我寧願讓整個屏幕「可以滑動」，尤其是左邊緣。如何在觸發此刷卡處理程序時打開導航欄？

來源

2015-07-11 Isaacm

我試圖在演示材料設計精簡版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();       
     }, 
    }); 
});

來源

2015-07-13 05:20:02 user3257770

能不能請你重寫你的答案適合開門紅需求，而不只是應對自己的網站的一些代碼。這將有助於揭幕戰和其他讀者，因爲他們可以理解你的意思。 – bish

這個解決方案適用於一個款待，我編輯它以適應我在原始帖子中使用的示例。謝謝 – Isaacm

你如何使用MDL輕掃手勢？像它這樣的Loos不支持開箱即用的手勢。 – mu3

打開/關閉sidenav document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();

來源

2018-02-23 11:58:54 ivanproskuryakov

滑動時打開導航抽屜（Material Design Lite）

回答

相關問題