如何使用iframe代替div与jquery ui选项卡？ [英] how to use iframe instead of div with jquery ui tabs?
问题描述
我有4个标签：
<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视图，并渲染此页面：
When a tab is clicked, it goes to the django view, and renders_to_response this page:
<!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，我想做（因为我的一些其他代码取决于ids是某种方式）
which looks perfect, but the content is loaded into a div, not an iframe, and as such, I can't use duplicate ids, which I would like to do (as some of my other code is dependent upon the ids being a certain way)
我在网上看到什么是在页面上的iframe标签与srcs和ids设置为匹配...但我不知道如何/如何适应django视图。
What I see online is iframe tags on the page with srcs and ids set to match... but I'm not sure if/how this fits in with the django views.
编辑：所以我只是试图将内容加载到同一页面上的iframe ... iframe加载到其余的内容之下，但是...所以我不确定这是否正常。
So I just tried to load the content in an iframe on the same page... the iframe loaded below the rest of the content, though... so I'm not sure that's going to work.
EDIT2：它正在加载到其余的内容之外，因为它在标签div之外...但是当我制作4个iframe时，每个选项卡都有一个，它们都是按顺序加载的，而且lis不再是单独的选项卡....所以我觉得有些事情是错误的。
it was loading outside of the rest of the content because it was outside the tabs div... but when I make 4 iframes, one for each tab, they all load at once, sequentially, and the lis are no longer separate tabs.... so I feel like something is wrong with that.
此编辑的代码如下所示：
The code for this edit looks like:
<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>
推荐答案
您的href有错误的元素， LI 标签没有href。
You have your href's on the wrong elements, LI tags don't have an 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/
If you want it to wait until the user clicks before you load a tabs content, you can try something like on this 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
and the 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'));
}
}
});
});
这篇关于如何使用iframe代替div与jquery ui选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
