问题描述
我一直在使用基于CSS3动画,动画中的单页面应用程序中使用的JavaScript的网页。最近,我曾与jQuery Mobile的。在默认情况下所有链接jQuery Mobile的加载与AJAX网页和动画它们。
I have been using CSS3 based animations to animate the pages using javascript in Single page applications. Recently I worked with jQuery mobile. For all links by default jQuery Mobile loads the pages with ajax and animates them.
我可以做的一种方法是通过添加URL哈希(这是Gmail中是如何工作的)。但我不想使用哈希值,我想改变的完整URL像jQuery Mobile的做它的方式。
可以只使用的JavaScript,我们实现了单页的应用程序相同的功能。
Can we implement the same functionality for Single page application using just javascript.
需要的帮助非常糟糕。
推荐答案
要更改URL,你可以使用这样的:
To change the Url, you can use something like this:
window.history.pushState("object or string", "Title", "/new-url");
请参阅此链接了解更多信息:Updating与新的URL地址栏没有哈希或重新加载页面
See this link for more information: Updating address bar with new URL without hash or reloading the page
如果你想使用AJAX(它允许你做你的视野中消失等),你会做这样的事情来加载一些内容到DOM:
If you want to load some content into the DOM using AJAX (Which allows you to do your view fading etc) you would do something like this:
$('.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。
.ajax_content
would be the div you are loading the content into.
注: +#someDiv
是可选的。它可以让你只加载某个分区中的地址要装入(这样就可以避免加载所有的身体到DOM了。
Note: + ' #someDiv'
is optional. It allows you to only load a certain div in the Url you are loading (so you can avoid loading all the body into your DOM again.
有关更多信息.load()
可以在这里找到:的
More information about .load()
can be found here: https://api.jquery.com/load/
这篇关于如何实现jQuery Mobile的动画Ajax页面导航(过渡)在普通的JavaScript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!