Col*_*een 1 django jquery-ui django-views 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视图,并且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是某个特定的办法)
我在网上看到的是页面上的iframe标签与srcs和id设置匹配...但我不确定这是否适合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>
你的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'));
}
}
});
});