小编BMa*_*Mac的帖子

jQuery 可滑动底部表

我正在尝试创建与 Material.io 底部工作表可用的类似功能,但使用 jQuery。

我发现为 React 编写的类似内容有一个很好的图像可以解释。 React 可滑动底板

我从一些 jQuery“触摸”模块开始,但发现@roko-c-buljan使用纯 jQuery 有一个很好的起始方法(如何创建可拖动的菜单 div(桌面和移动设备))。

我尝试使用该示例作为从底部不是顶部开始工作的起点,同时也让它优雅地对齐 - 就像在 React 图像中一样,但在两个不同的级别:距离底部 200px,并且也在底部对齐顶部 - 使用相同的过渡效果继续移动到相同方向的下一个捕捉点。

我基本上正在寻找使用具有触摸功能的 jQuery 的 Material.io 底部工作表设计。

在遇到许多障碍之后,我目前正处于代码中,并希望这比我想象的要接近得多。

请注意,此代码仅在浏览器中使用触摸模式时运行

$(document).ready(function () {
      
      var $MB = $('#menu_btn'),
          $M = $('#menu'),
          bheight = $(".container-fluid").height(),
          startBottom,
          startAtY = 10,
          endAtY = bheight-10,
          clickedAtY,
          clickEventType = document.ontouchstart !== null ? 'mousedown' : 'touchstart',
          moveEventType  = document.ontouchmove  !== null ? 'mousemove' : 'touchmove' ,
          endEventType   = document.ontouchend …
Run Code Online (Sandbox Code Playgroud)

javascript jquery bottom-sheet

5
推荐指数
0
解决办法
2241
查看次数

标签 统计

bottom-sheet ×1

javascript ×1

jquery ×1