Facebook 喜欢在没有 jQuery Mobile 的情况下使用 JavaScript 滑动菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16556665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Facebook like swipe menus in JavaScript without jQuery Mobile
提问by udexter
I'm developing an app with PhoneGapand jQuery Mobile.It is truly killing the performance of application.The only reason I'm using jQuery Mobile is because of the swipe lateral menus.
我正在使用PhoneGap和jQuery Mobile开发应用程序。它确实扼杀了应用程序的性能。我使用 jQuery Mobile 的唯一原因是因为滑动横向菜单。
There is any simplelibrary that does that implementation correctly? I only found jQuery Mobile related things.
是否有任何简单的库可以正确执行该实现？我只找到了 jQuery Mobile 相关的东西。
Thanks in advance!
提前致谢！
回答by Mifeng
You can try these two projects as well
你也可以试试这两个项目
https://github.com/jakiestfu/Snap.js
回答by GenieWanted
Here is a cool one written using Javascript. You can try this:
这是一个使用 Javascript 编写的很酷的程序。你可以试试这个：
回答by mpatel
Yes,You are right,They are causing many performance issues for the application mainly,
是的，你是对的，它们主要是为应用程序造成了许多性能问题，
1.Due to the fact that there are transitions effects for whenever we swipe something or change the current Page.Every mobile devices are not compatible enough for the transitions.So,to make it working smooth apply transitions to none everywhere in your application.
1.由于每当我们滑动某些东西或更改当前页面时都会有过渡效果。每个移动设备都不够兼容过渡。因此，为了使其工作顺畅，在您的应用程序中的任何地方都没有应用过渡。
Apply this into your index.html page.In head tag.
将此应用到您的 index.html page.In head 标签中。
<script>
$(document).on("mobileinit", function()
{
$.mobile.defaultPageTransition = 'none';
}
</script>
or
或者
you can apply data-transition="none"into your application.
I have similar issue in past.But this solution worked for me.
你可以申请data-transition="none"到你的应用程序中。我过去有类似的问题。但是这个解决方案对我有用。
2.I don't know any javascript library.but i have one solutions for this.Take one div and make it hide/show on mousemove/touchmoveor swipeleft/swiperightevents of jQuery Mobile.You can set the CSS of the div to show/hide anywhere in your page.
2.我不知道任何 javascript 库。但我对此有一个解决方案。取一个 div 并将其隐藏/显示在jQuery Mobilemousemove/touchmove或swipeleft/swiperight事件上。您可以将 div 的 CSS 设置为在您的任何位置显示/隐藏页。
Here is the link for the number of events of jQM. jQM Events
这是 jQM 事件数量的链接。 jQM 事件
e.g.
例如
<div id="xyz">
</div>
<a data-role="button" id="abc" href="#" data-theme="c" >Swiperight</a>
in javaScript
在 JavaScript 中
$('#abc').on('swipeleft',function()
{
var div = $('#xyz');
div.show();
}
Hope i have answered your question as per your requirements.
希望我已经按照您的要求回答了您的问题。
