如何在普通的javascript中实现jQuery Mobile Animated Ajax页面导航(转换)
我一直在使用基于CSS3的动画在单页面应用程序中使用javascript为页面设置动画。 最近我使用jQuery mobile。 对于所有链接,默认情况下,jQuery Mobile使用ajax加载页面并为其设置动画。
我可以做的一种方法是添加url hash(这就是gmail的工作原理)。 但是我不想使用哈希,我想像jQuery Mobile那样改变完整的URL。
我们可以使用javascript为单页面应用程序实现相同的function。
非常需要帮助。
要更改Url,您可以使用以下内容:
window.history.pushState("object or string", "Title", "/new-url");
有关更多信息,请参阅此链接: 使用新URL更新地址栏,不使用哈希或重新加载页面
如果你想使用AJAX将一些内容加载到DOM中(这允许你进行视图渐变等),你可以这样做:
$('.ajax_content').load( //The Url + Only fetch this div from the page. $(this).attr('href') + ' #someDiv', function() { //Do something when it's complete. } );
.ajax_content
将是您.ajax_content
内容加载到的div。
注意: + ' #someDiv'
是可选的。 它允许您只加载正在加载的Url中的某个div(这样您就可以避免再次将所有正文加载到DOM中)。
有关.load()
更多信息,请访问: https : //api.jquery.com/load/
我建议使用jQuery Address插件
它可以通过ajax加载页面,并且可以根据需要自定义URL。