如何在 jquery ui 选项卡中使用 iframe 而不是 div? [英] how to use iframe instead of div with jquery ui tabs?

查看：26
本文介绍了如何在 jquery ui 选项卡中使用 iframe 而不是 div?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有 4 个标签:

<div id="标签"><ul style="padding: 0; margin: 0;"><li class="context-tab" target="story-iframe"><a id="recent-tab" href="/canvas/getstories?context=recent">最近</a></li><li class="context-tab" target="story-iframe"><a id="popular-tab" href="/canvas/getstories?context=popularity" target="points-view">流行</a></li><li class="context-tab" target="story-iframe"><a id="random-tab" href="/canvas/getstories?context=random" target="points-view">随机</a></li><li class="context-tab" target="story-iframe"><a id="question-tab" href="/canvas/getstories?context=question">按问题</a><;/li>

当一个选项卡被点击时，它会进入 django 视图，并呈现这个页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"http://www.w3.org/TR/html4/loose.dtd"><头><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>{% 块包含 %}{% 包含 'story-div.html' %}{% 结束块 %}<脚本>$(document).ready(function(){$("#{{ div }}").empty();displayStoriesData("{{ div }}", {{ Responds|safe }}, {{ score }}, {{ votes|safe }}, "{{ STATIC_URL }}");votehandler_init({{ response_ids }}, []);voted_init({{ response_ids }}, []);});<身体><div id="{{ div }}"></div>

看起来很完美，但内容被加载到 div 中，而不是 iframe，因此，我不能使用重复的 id，我想这样做(因为我的其他一些代码依赖于 id以某种方式)

我在网上看到的是页面上的 iframe 标签，其中 srcs 和 ids 设置为匹配...但我不确定这是否/如何适合 django 视图.

所以我只是尝试在同一页面上的 iframe 中加载内容......不过，iframe 加载在其余内容下方......所以我不确定这会起作用.

它在其余内容之外加载，因为它在选项卡 div 之外……但是当我制作 4 个 iframe，每个选项卡一个，它们都按顺序一次性加载，而 lis 不是更长的单独标签......所以我觉得这有问题.

此编辑的代码如下所示:

<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">按问题</a></li><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>

解决方案

你的 href 放在了错误的元素上，LI 标签没有 href.

<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">按问题</a></li><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>

如果您希望它在加载选项卡内容之前等待用户单击，您可以在此 jsfiddle 上尝试类似的操作:http://jsfiddle.net/fordlover49/XHD5N/

标记如下:

 
<ul style="padding: 0; margin: 0;"><li class="context-tab"><a id="recent-tab" href="#ui-tabs-0">你好！</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><div id="ui-tabs-0">选择一个选项卡，然后观察它的加载情况！</div>

和 javascript

$(function() {$( "#tabs" ).tabs({panelTemplate: "<iframe style='width:100%'></iframe>",idPrefix: "ui-tabs-",选择:功能(事件，用户界面){if (!$("#ui-tabs-" + ui.index).prop("src")) {$("#ui-tabs-" + ui.index).attr("src", $.data(ui.tab, 'load.tabs'));}}});});

I have 4 tabs:

<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>

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>

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)

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.

EDIT: 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: 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>

解决方案

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>

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/

the markup for which would be something like: 

 <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>

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'));  
            } 
        }
    });
});

这篇关于如何在 jquery ui 选项卡中使用 iframe 而不是 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆