如何使用iframe而不是div與jquery ui選項卡？

我有4個選項卡：如何使用iframe而不是div與jquery ui選項卡？

<script type="text/javascript"> 

    $(document).ready(function(){ 
     $("#tabs").tabs({cache: true}); 

    }); 

</script> 

<div id="tabs"> 
    <ul style="padding: 0; margin: 0;"> 
     <li class="context-tab" target="story-iframe"><a id="recent-tab" href="/canvas/getstories?context=recent">Recent</a></li> 
     <li class="context-tab" target="story-iframe"><a id="popular-tab" href="/canvas/getstories?context=popularity" target="points-view">Popular</a></li> 
     <li class="context-tab" target="story-iframe"><a id="random-tab" href="/canvas/getstories?context=random" target="points-view">Random</a></li> 
     <li class="context-tab" target="story-iframe"><a id="question-tab" href="/canvas/getstories?context=question">By Question</a></li> 
    </ul> 
</div>

當點擊一個標籤，它關係到Django的視圖，renders_to_response此頁：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
     "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <link rel="stylesheet" href="{{ STATIC_URL }}css/custom-theme/jquery-ui-1.8.16.custom.css"> 
    <link rel="stylesheet" href="{{ STATIC_URL }}css/ui.slider.extras.css"> 
    <link rel="stylesheet" href="{{ STATIC_URL }}css/style.css" type="text/css"> 
    <link rel="stylesheet" href="{{ STATIC_URL }}css/facebook.css" type="text/css"> 
    <script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery-ui-1.8.16.custom.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/vote.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}js/chart.js"></script> 
    <script src="/canvas/schoolsAndMajors.js"></script> 

{% block include %} 
    {% include 'story-div.html' %} 
{% endblock %} 

    <script> 
     $(document).ready(function(){ 
      $("#{{ div }}").empty(); 

      displayStoriesData("{{ div }}", {{ responses|safe }}, {{ scores }}, {{ votes|safe }}, "{{ STATIC_URL }}"); 
      votehandler_init({{ response_ids }}, []); 
      voted_init({{ response_ids }}, []); 
     }); 

    </script> 
</head> 
<body> 


    <div id="{{ div }}"></div> 

</body> 
</html>

這看起來很完美，但內容被裝入div，而不是一個iframe，因此，我不能使用重複ID，我想這樣做（因爲我的其他代碼是依賴於ID是某種方式）

我在網上看到的是帶有srcs和ids的頁面上的iframe標記設置爲匹配...但我不確定這是否符合django視圖。

編輯：所以我只是試圖加載在同一頁上的iframe中的內容... iframe加載下面的其餘內容，雖然...所以我不知道這是行不通的。

EDIT2：它在內容的其餘部分之外加載，因爲它在標籤div之外......但是當我爲每個標籤製作4個iframe時，它們都會一次加載，順序加載，而lis是不再分開標籤....所以我覺得有什麼不對勁。

這個編輯的代碼如下所示：

<div id="tabs"> 
    <ul style="padding: 0; margin: 0;"> 
     <li class="context-tab" href="#iframe1"><a id="recent-tab" >Recent</a></li> 
     <li class="context-tab" href="#iframe2"><a id="popular-tab">Popular</a></li> 
     <li class="context-tab" href="#iframe3"><a id="random-tab">Random</a></li> 
     <li class="context-tab" href="#iframe4"><a id="question-tab">By Question</a></li> 
    </ul> 

    <iframe id="iframe1" src="/canvas/getstories?context=recent" style="width:100%;"> 
     </iframe> 

    <iframe id="iframe2" src="/canvas/getstories?context=popularity" style="width:100%;"> 
     </iframe> 

    <iframe id="iframe3" src="/canvas/getstories?context=random" style="width:100%;"> 
     </iframe> 

    <iframe id="iframe4" src="/canvas/getstories?context=question" style="width:100%;"> 
     </iframe> 
</div>

來源

2012-01-28 Colleen

您對錯誤的元素您的href的，LI標籤不具有href。

<div id="tabs"> 
    <ul style="padding: 0; margin: 0;"> 
        <li class="context-tab"><a id="recent-tab" href="#iframe1">Recent</a></li> 
        <li class="context-tab"><a id="popular-tab" href="#iframe2">Popular</a></li> 
        <li class="context-tab"><a id="random-tab" href="#iframe3">Random</a></li> 
        <li class="context-tab"><a id="question-tab" href="#iframe4">By Question</a></li> 
    </ul> 

    <iframe id="iframe1" src="/canvas/getstories?context=recent" style="width:100%;"> 
        </iframe> 

    <iframe id="iframe2" src="/canvas/getstories?context=popularity" style="width:100%;"> 
        </iframe> 

    <iframe id="iframe3" src="/canvas/getstories?context=random" style="width:100%;"> 
        </iframe> 

    <iframe id="iframe4" src="/canvas/getstories?context=question" style="width:100%;"> 
        </iframe> 
</div>

如果你想讓它等待，直到用戶加載一個標籤內容之前點擊，你可以嘗試一些像這樣的jsfiddle：http://jsfiddle.net/fordlover49/XHD5N/

標記爲這將是這樣的：

<div id="tabs"> 
    <ul style="padding: 0; margin: 0;"> 
     <li class="context-tab"><a id="recent-tab" href="#ui-tabs-0">Hola!</a></li> 
     <li class="context-tab"><a id="popular-tab" href="http://jqueryui.com/demos/tabs">jQuery</a></li> 
     <li class="context-tab"><a id="random-tab" href="http://www.jsfiddle.net">jsfiddle</a></li> 
     <li class="context-tab"><a id="question-tab" href="http://www.bing.com">Bing</a></li> 
    </ul> 

    <div id="ui-tabs-0"> Select a tab, and watch it load!</div>  
</div>

和JavaScript

$(function() { 
    $("#tabs").tabs({ 
     panelTemplate: "<iframe style='width:100%'></iframe>", 
     idPrefix: "ui-tabs-", 
     select: function(event, ui) { 
      if (!$("#ui-tabs-" + ui.index).prop("src")) { 
       $("#ui-tabs-" + ui.index).attr("src", $.data(ui.tab, 'load.tabs')); 
      } 
     } 
    }); 
});

來源

2012-01-28 05:06:33 PriorityMark

* headdesk *我無法相信我所做的塔噸。謝謝！ – Colleen 2012-01-29 20:42:53

嗨！我看到這個例子，它就像一個魅力。但我不明白你如何避免跨域錯誤。 – 2014-01-31 02:17:00

如何使用iframe而不是div與jquery ui選項卡？

回答

相關問題