2010-01-29 4 views
2

Я пытаюсь загрузить внешнюю страницу 1 в ui-tab (это не сложная часть), но в следующий раз я хочу автоматически загрузить 2-й уровень страница в DIV страницы 1.UI Tab загружает внешнюю страницу на внешнюю страницу (2 уровня)

Итак, у меня есть 3 HTML страницы: - index.html - external1.html - external1A.html

index.html JQuery загрузит external1. html в div 'tabcontent', а затем загрузите external1A.html в div-контент, определенный в external1.html (все jQueries должны быть определены в основном index.html).

Когда вы нажимаете на ссылки, определенные в файле external1.html, другой внешний 1B.html будет загружен в контент DIV, определенный в файле external1.html. Когда я загружаю tab-2, я загружу external2.html и т. Д.

Итак, загрузите index.html и загрузите содержимое первой вкладки (external1.html) и затем загрузите external1A.html в DIV 'content', определяемый в файле external1.html.

Мои страницы выглядит следующим образом:

index.html

<html> 
<head> 
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> 
    <script src="js/myscripts.js" type="text/javascript"></script> 
</head> 
<body> 
    <div id="tabs"> 
     <ul class="ui-tabs-content"> 
      <li><a href="external1.html" title="tabcontent"><span>external 1</span></a></li> 
      <li><a href="external2.html" title="tabcontent"><span>external 2</span></a></li> 
     </ul> 
    </div> 

    <div id="tabcontent"></div> 

</div> 
</body> 
</html> 

external1.html

<div class="menu"> 
    <a href="#" id="external1A">external 1A</a> | 
    <a href="#" id="external1B">external 1B</a> | 
    <a href="#" id="external1C">external 1C</a> 
</div> 

<div class="content"></div> 

external1B.html

<form name="form1"> 
    <input type="text" value="" name="name=""> 
    <input type="submit" value="submit" name="Submit"> 
</form> 

Наконец он должен выглядит следующим изображение: Tab loads external1 and loads external1A into DIV of external1 http://www.digi-d-sign.nl/external.into.external.png

Обычно я стараюсь поддерживать уровень страницы ровно, но в этом случае я должен загрузить его в этом направлении.

У вас есть идеи по работе с jQuery?

Большое спасибо!

ответ

1

Ok, после того, как я прочитал некоторую дополнительную документацию, становилось ясно, и я нашел решение:

При автоматической загрузки на вкладке, вы можете поместить больше событий в нагрузку, что должно запускаться после загрузки на вкладке. ..

$('#tabs').tabs({ 
    load: function(event, ui) { 
     $('.content').load('external1A.html'); 
    } 
}); 

И щелчком по ссылкам в external1.html загрузит другой HTML в сНу 'содержание' определено в external1.html:

$("#external1A").live('click', function() { 
    $('.content').load('external1A.html'); 
}); 

Th атакует его. Никогда не думал, что это так легко, даже для новичка jQuery!

Смежные вопросы