jQueryUI ajax选项卡示例不起作用 [英] The jQueryUI ajax tabs example doesn't work
问题描述
我正在使用jQueryUI和开发包，但是有问题.因此，我正在尝试另一种方法.
I'm playing with jQueryUI, with the development-bundle, but having issues. So instead I'm trying another approach.
在此处查看示例: http://jqueryui.com/demos/tabs/ajax.html
单击选项卡2"和选项卡3".一切正常.
Click "Tab 2" and "Tab 3". Everything works fine.
现在，我查看了html源代码并将其复制到本地文件中，并将所有相对路径替换为绝对路径，如下所示:
Now, I viewed and copied the html source code into a local file, and replaced all relative paths to absolute paths as such:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<script src="http://jqueryui.com/jquery-1.5.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content1.html">Tab 1</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content2.html">Tab 2</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content3-slow.php">Tab 3 (slow)</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content4-broken.php">Tab 4 (broken)</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>
<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p>
</div><!-- End demo-description -->
</body>
</html>
现在复制此HTML，将其粘贴到本地.html文件中，然后在浏览器中查看.
Now copy this HTML, paste it in a local .html file, and view it in your browser.
当我单击本地文件的制表2"和制表3"时，出现无法加载此选项卡"错误，这意味着它找不到那些content1.html和content2.html文件-但是这些确实存在并具有内容:
When I click "Tab 2" and "Tab 3" for the local file, it gives the "can't load this tab" error, which means it can't find those content1.html and content2.html files - but these really do exist and have content:
http://jqueryui.com/demos/tabs/ajax/content1.html (和content2.html)
http://jqueryui.com/demos/tabs/ajax/content1.html (and content2.html)
我在这里服用疯药吗?有人可以解释我在做什么错吗?
Am I taking crazy pills here? Can somebody please explain what I'm doing wrong?
附带说明:这个问题最初是在本地执行我的jQueryUI示例时弹出的，我认为它不喜欢本地html文件的相对路径.上面的示例显示了其他内容.
On a side note: This issue originally popped-up doing my jQueryUI examples locally, and I thought it didn't like relative paths to local html files. This example above shows that it's something else.
p.s.我在Firefox(Ubuntu，Windows)和IE(Windows)中尝试了该测试.同样的问题.
p.s. I tried this test in Firefox (Ubuntu, Windows) and IE (Windows). Same issue.
预先感谢您的帮助.
推荐答案
这是因为这两个选项卡是由ajax请求加载的，并且您的本地副本没有获得对jquery ui站点执行ajax请求的权限/授权.
That's because these two tabs are being loaded by ajax request, and your local copy doesn't have permission/authorization to perform an ajax request to jquery ui's site.
通常，由于 相同的来源政策 .它说-
Generally, you cannot send a cross-domain ajax request because of the same origin policy. It says -
该策略允许运行在源自同一站点的页面上的脚本不受特定限制地访问彼此的方法和属性，但是阻止跨不同站点上的页面访问大多数方法和属性.
The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.
这篇关于jQueryUI ajax选项卡示例不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
