在AJAX样式的jQuery UI选项卡中加载的jQuery UI对话框窗口 [英] jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs
问题描述
AJAX选项卡运行良好.这部分非常简单.但是，获取AJAX UI对话框模态窗口以触发链接失败是不成功的.
The AJAX tabs work perfectly well. It's pretty straightforward with that part. However, getting the AJAX UI Dialog modal window to trigger off of a link has been unsuccessful.
在此方面的任何帮助将不胜感激.
Any help in this would be appreciated.
推荐答案
没有什么比那个男人容易的了.试试这个:
Nothing easier than that man. Try this one:
<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<style>
.loading { background: url(/img/spinner.gif) center no-repeat !important}
</style>
</head>
<body>
<a class="ajax" href="http://www.google.com">
Open as dialog
</a>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
// show a spinner or something via css
var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
// open the dialog
dialog.dialog({
// add a close listener to prevent adding multiple divs to the document
close: function(event, ui) {
// remove div with all data and events
dialog.remove();
},
modal: true
});
// load remote content
dialog.load(
url,
{}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
function (responseText, textStatus, XMLHttpRequest) {
// remove the loading class
dialog.removeClass('loading');
}
);
//prevent the browser to follow the link
return false;
});
});
</script>
</body>
</html>
请注意，您无法从本地加载远程文件，因此您必须将其上传到服务器或其他任何设备.另请注意，您无法从外部域加载，因此您应将链接的href替换为位于同一域(以及
Note that you can't load remote from local, so you'll have to upload this to a server or whatever. Also note that you can't load from foreign domains, so you should replace href of the link to a document hosted on the same domain (and here's the workaround).
欢呼
这篇关于在AJAX样式的jQuery UI选项卡中加载的jQuery UI对话框窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
