Jquery Asual地址-返回按钮状态
我正在尝试使用插件,以便我的后退按钮可以在ajax调用中工作。我很困惑这是如何工作的,我找到的每一个教程都说实现它是不同的。我没能让他们中的任何一个工作 我有一个简单的ajax页面。它只是在图像中调用: Javascript:Jquery Asual地址-返回按钮状态,jquery,history,pushstate,Jquery,History,Pushstate,我正在尝试使用插件,以便我的后退按钮可以在ajax调用中工作。我很困惑这是如何工作的,我找到的每一个教程都说实现它是不同的。我没能让他们中的任何一个工作 我有一个简单的ajax页面。它只是在图像中调用: Javascript: <script type="text/javascript"> $("a").live("click", function(event) { url = $(this).attr("href"); $.address.
<script type="text/javascript">
$("a").live("click", function(event) {
url = $(this).attr("href");
$.address.value($(this).attr('href'));
event.preventDefault();
$.ajax({
type: "get",
url: "/"+url+".php",
data: "",
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
},
})
});
</script>
$(“a”).live(“单击”),函数(事件){
url=$(this.attr(“href”);
$.address.value($(this.attr('href'));
event.preventDefault();
$.ajax({
键入:“获取”,
url:“/”+url+“.php”,
数据:“,
数据类型:“html”,
成功:函数(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
},
})
});
我的Html如下所示:
<body>
<a href="push1" onclick="return false;" >Image 1</a>
<a href="push2" onclick="return false;">Image 2</a>
<div id="Right_Content"></div>
</body>
使用上面的代码,当我单击一个链接时,它会进行ajax调用,加载图片并更改url。这很好用。我的问题是后退按钮。单击“后退”按钮时,url将更改为上一个url,但页面上的内容保持不变。我认为这与“popstate”有关,并将其添加到我的js中。我只是不知道该怎么做
有人能给我解释一下popstate是如何工作的,以及我是如何将它添加到我上面的代码中,这样我的后退按钮就可以工作了。多谢各位
整页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="/JS_Functions/jquery-ui-1.8.17.custom/js/jquery-1.7.1.min.js"></script>
<script src="/JS_Functions/jquery-ui-1.8.17.custom/js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="JS_Functions/jquery.address-1.4/jquery.address-1.4.min.js"></script>
<script type="text/javascript">
$.address.init(function(event) {
// All elements with the "history" class will be "addressed". When they get clicked
// the href will get used as the new #part of the URL
$('a').address();
$('a').live("click", function(){
var href = $(this).attr( "href" );
$.ajax({
type: "get",
url: "/"+href+".php",
data: "",
dataType: "html",
success: function(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
},
})
})
}).change(function(event) {
//Every time the url part changes this will be called.
// As an example here I determine the # part of the URL and default to 'home'
var hash = event.path.substring(1);
hash = hash? hash.toLowerCase(): 'push1';
//.. do the stuff here that you need to do when hash has a certain value
});
</script>
</head>
<body>
<a href="push1" >Image 1</a>
<a href="push2" >Image 2</a>
<div id="Right_Content"></div>
</body>
</html>
无标题文件
$.address.init(函数(事件){
//具有“history”类的所有元素都将被“寻址”。当它们被单击时
//href将用作URL的新部分
$('a').address();
$('a').live(“单击”,函数(){
var href=$(this.attr(“href”);
$.ajax({
键入:“获取”,
url:“/”+href+“.php”,
数据:“,
数据类型:“html”,
成功:函数(html){
jQuery('#Right_Content').hide().html(html).fadeIn(1000);
},
})
})
}).更改(功能(事件){
//每次url部分更改时,都将调用此函数。
//这里的一个例子是,我确定URL的#部分并默认为“home”
var hash=event.path.substring(1);
hash=hash?hash.toLowerCase():'push1';
//…在这里做你需要做的事情,当散列有一定的值时
});
这是我在上使用的
我这里有一个HTML:
<div id="main-menu">
<a class="history" href="#home">Home</a>
<a class="history" href="#who">who</a>
<a class="history" href="#what"></a>
<a class="history" href="#where"></a>
</div>
我的任务是允许用户返回某些页面,并防止用户在没有消息会丢失其他页面的数据的情况下返回。我是这样结束的:
$(".-step-1-").click(function () {
$.address.value("");
});
$(".-step-2-").click(function () {
$.address.value("finances");
});
$(".-step-3-").click(function () {
$.address.value("cofirmation");
});
global.previousPage = null;
$.address.init(function () {
}).change(function () {
}).externalChange(function (event) {
if (global.previousPage == null) {
$.address.value("");
} else {
showPageExternal(event.pathNames);
}
}).internalChange(function (event) {
global.previousPage = event.pathNames;
showPage(event.pathNames);
});
var showPageExternal = function (pathName) {
if (global.previousPage == null ||
("").localeCompare(global.previousPage) === 0 ||
("finances").localeCompare(global.previousPage) === 0) {
showPage(pathName);
}
else {
//This mean is coming from "confirmation" page
global.blockUI($("#browserBackMessage"));
}
};
var showPage = function (pathName) {
if (("").localeCompare(pathName) === 0) {
$(".step").hide();
$(".-step-1").show();
}
if (("finances").localeCompare(pathName) === 0) {
$(".step").hide();
$("#finances").show();
}
if (("confirmation").localeCompare(pathName) === 0) {
$(".step").hide();
$("#confirm").show();
}
};
global = function globalVariable() {
return (function () { return this; })();
};
谢谢。:)你最新的最小代码+html是什么?您在控制台中看到任何错误吗?我已经用我的整个页面更新了上面的代码,以便您可以看到发生了什么。它可以很好地运行ajax并更改哈希值,但当我点击后退按钮时,它不会一步一步地遍历状态,而是直接跳回到第一页。因此,后退按钮在插件中无法正常工作。再次感谢您的帮助。如果您在de.change处理程序中添加console.log,当您单击链接时,它是否会显示在日志中?如果没有,那么你就没有正确地使用address()。我给ASUAL发了一封电子邮件,表达了我对无法解决这个问题的不满。我在邮件中附上了我的代码,在一天结束之前,我收到了他们的回复邮件,其中有我代码的工作版本。我很感动,他们回复并修复了我的代码,我捐款了。谢谢你的帮助,你上面的回答与他们发给我的代码非常接近。很高兴听到。如果您发布解决方案,以便其他人也可以看到该解决方案,这将有利于stackoverflow。我使用了一些“历史/后退按钮”插件,ASUAL是迄今为止我使用的最好的插件
$(".-step-1-").click(function () {
$.address.value("");
});
$(".-step-2-").click(function () {
$.address.value("finances");
});
$(".-step-3-").click(function () {
$.address.value("cofirmation");
});
global.previousPage = null;
$.address.init(function () {
}).change(function () {
}).externalChange(function (event) {
if (global.previousPage == null) {
$.address.value("");
} else {
showPageExternal(event.pathNames);
}
}).internalChange(function (event) {
global.previousPage = event.pathNames;
showPage(event.pathNames);
});
var showPageExternal = function (pathName) {
if (global.previousPage == null ||
("").localeCompare(global.previousPage) === 0 ||
("finances").localeCompare(global.previousPage) === 0) {
showPage(pathName);
}
else {
//This mean is coming from "confirmation" page
global.blockUI($("#browserBackMessage"));
}
};
var showPage = function (pathName) {
if (("").localeCompare(pathName) === 0) {
$(".step").hide();
$(".-step-1").show();
}
if (("finances").localeCompare(pathName) === 0) {
$(".step").hide();
$("#finances").show();
}
if (("confirmation").localeCompare(pathName) === 0) {
$(".step").hide();
$("#confirm").show();
}
};
global = function globalVariable() {
return (function () { return this; })();
};