2011-07-07 41 views
2

我正在玩jQueryUI,使用开发包,但遇到问题。所以我正在尝试另一种方法。jQueryUI ajax标签示例不起作用

退房这里的例子: http://jqueryui.com/demos/tabs/ajax.html

点击 “选项卡2” 和 “3个标签”。一切正常。

现在,我查看和复制的HTML源代码到本地文件,并替换为绝对路径都相对路径为这样:

<!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文件复制这个网站,贴吧,并在浏览器中查看它。

当我点击“选项卡2”和“选项卡3”为本地文件,它给出了“无法加载此选项卡”的错误,这意味着它无法找到那些content1.html和content2.html文件 - 但这些确实存在,并且有内容:

http://jqueryui.com/demos/tabs/ajax/content1.html (和content2.html)

我在这里采取疯狂的药丸?有人能解释我做错了什么吗?

在一个侧面说明:这个问题最初弹出的本地当仁不让jQueryUI的例子,我认为它不喜欢本地的HTML文件的相对路径。上面的这个例子表明它是别的。

p.s.我在Firefox(Ubuntu,Windows)和IE(Windows)中试过这个测试。同样的问题。

在此先感谢您的帮助。

回答

6

这是因为这两个选项卡正在由Ajax请求加载,并且您的本地副本没有权限/授权执行Ajax请求jQuery用户界面的网站。

一般情况下,你不能发送,因为same origin policy的跨域Ajax请求。它说 -

政策允许来自同一站点发起的互相访问的方法和属性有没有特殊的限制网页上运行脚本,但阻止访问跨不同网站上的网页大多数方法和属性。