Динамическая загрузка внешних файлов
http://www.ruseller.com/lessons/les255/example/index.html
Сегодня в уроке Вы узнаете как сделать загрузку внешних файлов в документ с помощью Ajax.
Будет происходить загрузка внешних файлов в три разные вкладки.
С самого начала документа подключаем фреймворк и функцию::
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
$("ul.css-tabs").tabs("div.css-panes > div", function(i) {
var pane = this.getPanes().eq(i);
if (pane.is(":empty")) {
pane.load(this.getTabs().eq(i).attr("href"));
}
});
});
</script>
Далее заботимся о таблице стилей:
<link rel="stylesheet" type="text/css" href="tabs-no-images.css"/>
Первые два блока кода обязательно должны быть между тегами <head></head>.
И в теле документа прописываем структуру вкладок + ссылки на внешние файлы:
<ul class="css-tabs">
<li><a href="ajax1.htm">Tab 1</a></li>
<li><a href="ajax2.htm">Second tab</a></li>
<li><a href="ajax3.htm">An ultra long third tab</a></li>
</ul>
<!-- panes -->
<div class="css-panes">
<div style="display:block"></div>
<div></div>
<div></div>
</div>
После таких нехитрых операций у Вас получатся интересные вкладки, на основе которых можно сделать простенький сайт. Кроме этого, Вы узнали как подгружать контент из внешних файлов.
Спасибо за внимание! Всего хорошего!