2011-07-07 80 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請求。它說 -

政策允許來自同一站點發起的互相訪問的方法和屬性有沒有特殊的限制網頁上運行腳本,但阻止訪問跨不同網站上的網頁大多數方法和屬性。