как использовать iframe вместо div с вкладками jquery ui? - PullRequest
Новая
       10

как использовать iframe вместо div с вкладками jquery ui?

1 голос
/ 28 января 2012

У меня есть 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 и отображает эту страницу: 

<!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, и поэтому я не могу использовать дублирующиеся идентификаторы, что я хотел бы сделать (поскольку некоторые другие мои коды зависят от того, являются ли идентификаторы определенным образом)

То, что я вижу в Интернете, - это теги iframe на странице с srcs и идентификаторами, которые совпадают ... но я не уверен, что / как это согласуется с представлениями django.попытался загрузить контент в iframe на той же странице ... iframe загрузил ниже остального контента, хотя ... поэтому я не уверен, что это будет работать.

EDIT2: это былозагрузка вне остального содержимого, потому что это было за пределами вкладок div ... но когда я делаю 4 фрейма, по одному для каждой вкладки, все они загружаются одновременно, последовательно, и список больше не является отдельными вкладками ....поэтому я чувствую, что с этим что-то не так.

Код для этогоРедактировать выглядит так: 

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

1 Ответ

9 голосов
/ 28 января 2012

У вас есть ссылки на неправильные элементы, теги LI не имеют ссылки. 

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