Вкладки пользовательского интерфейса jquery с содержимым ajax: содержимое не отображается - PullRequest
Новая
       11

Вкладки пользовательского интерфейса jquery с содержимым ajax: содержимое не отображается

0 голосов
/ 21 августа 2011

Возможно ли, чтобы содержимое для вкладки jquery-ui было другим HTML-документом? 

         <div id='tabs' class="ui-tabs">

             <ul>

    <li><a href="Text.html" ><span>Text</span>/a></li>
    <li><a href="Notes.html" ><span>Notes</span></a></li>
    <li><a href="Glossary.html" >Glossary</span></a></li>

              </ul>

        </div>

Я думаю, что моя страница настроена так, как описано здесь: http://jqueryui.com/demos/tabs/#Ajax_mode

$(document).ready(function()
{

   $("#tabs").tabs();



});

но мои страницы не отображаются.В отладчике я вижу, что внешний документ действительно загружен (и на вкладке есть сообщение о загрузке ... кратко), но содержимое не отображается .Требуется ли дополнительная javascripting для отображения внешних страниц?

Ответы [ 2 ]

0 голосов
/ 21 августа 2011

РЕДАКТИРОВАТЬ: обновленный рабочий код. У предыдущего было несколько опечаток. 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
    var tabContainers = $('div#bodyTabs div');
    tabContainers.hide().filter(':first').show();
    $('div#tabs ul a').click(function ()
    {
        if(this.hash == '#tab2')
        {
                // do something different for tab2
            }else
            {
            tabContainers.hide();
            tabContainers.filter(this.hash).show();
            $('div#tabs ul li').removeClass('selected');
            $(this).parent().addClass('selected');
            }                                                           
            return false;
    });
}).filter(':first').click();
window.getSelection().removeAllRanges();
</script>
</body>
<html>
<div id='tabs' class="ui-tabs">
    <ul>
        <li><a href="#tab1" ><span>Text</span></a></li>
        <li><a href="#tab2" ><span>Notes</span></a></li>
        <li><a href="#tab3" ><span>Glossary</span></a></li>
    </ul>
</div>
<div id="bodyTabs">
    <div id="tab1" style="display:none;">
        <iframe src="Text.html"></iframe>
    </div>
    <div id="tab2" style="display:none;">
        <iframe src="Notes.html"></iframe>
    </div>
    <div id="tab3" style="display:none;">
        <iframe src="Glossary.html"></iframe>
    </div>
</div>
</body>
</html>

Для новых HTML-документов вам необходимо загрузить их в iframe. Вы даже можете использовать if и изменить источник только одного кадра (но таким образом вы можете увидеть изменения в предыдущем кадре, если вы переключаете вкладки)

EDIT:

Добавлен код для jsfiddle

0 голосов
/ 21 августа 2011

Кажется, все в порядке, за исключением ошибки разметки во втором и третьем элементе li: вы закрываете тег span, который не был открыт ... 

     <div id='tabs' class="ui-tabs">
         <ul>
          <li><a href="Text.html" ><span>Text</span>/a></li>
          <li><a href="Notes.html" >Notes**</span>**</a></li>
          <li><a href="Glossary.html" >Glossary**</span>**</a></li>
         </ul>
    </div>
...