如何在普通的javascript中实现jQuery Mobile Animated Ajax页面导航(转换)

我一直在使用基于 CSS3的动画在单页面应用程序中使用javascript为页面设置动画.最近我和jQuery mobile合作过.对于所有链接,默认情况下,jQuery Mobile使用ajax加载页面并为其设置动画.

我可以做的一种方法是添加url hash(这就是gmail的工作原理).但我不想使用哈希,我想像jQuery Mobile那样改变完整的URL.

我们可以使用javascript为单页面应用程序实现相同的功能.

非常需要帮助.

解决方法

要更改网址,您可以使用以下内容：

window.history.pushState("object or string","Title","/new-url");

有关更多信息,请参阅此链接：Updating address bar with new URL without hash or reloading the page

如果你想使用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将是您要将内容加载到的div.

注意：’#someDiv’是可选的.它允许您只加载正在加载的Url中的某个div(这样您就可以避免再次将所有正文加载到DOM中).

有关.load()的更多信息,请访问：https://api.jquery.com/load/