在 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屋！
