Javascript JQuery 移动页面幻灯片,新的 Facebook 菜单
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7794689/
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
JQuery mobile pageslide, new facebook menu
提问by Kevin Vermaat
Here my story:
这是我的故事:
I want something like the new facebook menu on the left side of the screen. It's really nice and I hope to add this to my webapp, but the problem is, I am really not good in css and even worse in css3.
我想要屏幕左侧的新 facebook 菜单之类的东西。这真的很好,我希望将它添加到我的 webapp 中,但问题是,我在 css 方面真的很差,在 css3 中更糟。
After few hours searching I found out this link:
经过几个小时的搜索,我找到了这个链接:
https://github.com/perezd/jquery-pageslide
https://github.com/perezd/jquery-pageslide
It is exactly what i want, it's perfect. But it doesn't work (not yet) for mobile. When the link is pressed, it opens a whole new page, instead of the div sliding into the view.
这正是我想要的,非常完美。但它不适用于移动设备(尚未)。当链接被按下时,它会打开一个全新的页面,而不是 div 滑入视图。
Any ideas how to get this working?
任何想法如何让这个工作?
回答by aldomatic
I also wanted to implement this new FaceBook style menu and this is what I came up with. Hope it helps. I am sure this could be done better but this was my attempt.
我还想实现这个新的 FaceBook 风格的菜单,这就是我想出的。希望能帮助到你。我相信这可以做得更好,但这是我的尝试。
回答by chip
This topic is old but here is a working solution for mobile devices :
这个话题很旧,但这里有一个适用于移动设备的有效解决方案:
it's working on Windows phone, iOs and Android Devices.
它适用于 Windows 手机、iO 和 Android 设备。
I've tried to keep the code as simple as possible, it's easy to understand and modifiy.
我尽量保持代码简单,易于理解和修改。
http://apptitudes.github.com/SlidingMenuJS/
http://apptitudes.github.com/SlidingMenuJS/
Check the file menu_nav.js it's less than 100 lines.
检查文件 menu_nav.js 它少于 100 行。
回答by Phill Pafford
Not fully working but should point you in the right direction:
没有完全工作,但应该指向正确的方向:
- http://jsfiddle.net/LwrqY/5/
- http://jsfiddle.net/LwrqY/5/embedded/result/(for mobile testing)
The slide pages don't load the text but the slide transition works, Also you might have to tweak the close transition as well.
幻灯片页面不加载文本,但幻灯片过渡有效,您可能还需要调整关闭过渡。
Hope this help
希望这有帮助