Facebook 喜欢在没有 jQuery Mobile 的 JavaScript 中滑动菜单答案

【问题标题】：Facebook like swipe menus in JavaScript without jQuery MobileFacebook 喜欢在没有 jQuery Mobile 的 JavaScript 中滑动菜单
【发布时间】：2013-05-15 04:07:15
【问题描述】：

我正在使用 PhoneGap 和 jQuery Mobile 开发一个应用程序。 这确实会影响应用程序的性能。我使用 jQuery Mobile 的唯一原因是swipe lateral menus。

有任何 simple 库可以正确执行该实现吗？我只找到了 jQuery Mobile 相关的东西。

提前致谢！

【问题讨论】：

标签： javascript

【解决方案1】：

你也可以试试这两个项目

https://github.com/jakiestfu/Snap.js

http://www.berriart.com/sidr/

【讨论】：

Snap.js 看起来很漂亮。谢谢你的链接。
感谢您推荐我的图书馆 ;)
我们不能只使用 HTML 5。我不确定，但听到有人说这只能使用 HTML 5 来实现。如果是这样，为什么要使用任何外部库来增加项目的大小和依赖性？

【解决方案2】：

这是一个用 Javascript 编写的很酷的。你可以试试这个：

https://github.com/boxbreakout/menujs

【讨论】：

@udexter-你可以使用 Geeniewanted 建议的 javascript。

【解决方案3】：

是的，你是对的，它们主要是导致应用程序出现许多性能问题，

1.由于每当我们滑动某些东西或更改当前页面时都会有过渡效果。每个移动设备都不足以进行过渡。因此，为了使其顺利运行，请将过渡应用到您的任何地方申请。

将此应用到您的 index.html 页面中。在 head 标记中。

<script>
 $(document).on("mobileinit", function()
  {
        $.mobile.defaultPageTransition = 'none';
  }
</script>

或

您可以将data-transition="none" 应用到您的应用程序中。我过去也有类似的问题。但是这个解决方案对我有用。

2.我不知道任何 javascript 库。但我有一个解决方案。拿一个 div 并使其隐藏/显示在 jQuery Mobile 的 mousemove/touchmove 或 swipeleft/swiperight 事件上。您可以设置 CSS显示/隐藏页面中任何位置的 div。

这里是jQM事件数量的链接。 jQM Events

例如

 <div id="xyz">
 </div>

 <a data-role="button" id="abc" href="#" data-theme="c" >Swiperight</a>

在 JavaScript 中

 $('#abc').on('swipeleft',function()
 {
    var div = $('#xyz');
    div.show();
 }

希望我已按照您的要求回答了您的问题。

【讨论】：