Подрузка контента из нескольких файлов по клику.
Доброго времени суток.
Есть скрипт:
$(document).ready(function(){
getLoad('/documentation.htm' , '#documentation');
getLoad('/top_predlojeiy.htm' , '#top_predlojeiy');
getLoad('/tpl/topmenu23.htm' , '#topmenu23');
getLoad('/text_na_static.htm' , '#text_na_static');
});
function getLoad (urlLoad, container) {
$.ajax({
url: urlLoad,
cache: false,
beforeSend: function() {
$(container).html('');
},
success: function(html){
$(container).html(html);
}
});
}
Он динамически подгружает контент из файлов в определенные дивы. К примеру, в div id="documentation" будет подгружен контент из файла "documentation.htm" и так далее. Причем все это происходит при загрузке страницы. Необходимо модернизировать скрипт таким образом, что бы скрипт подгружал контент в один див (Пусть это будет div id="centent") но с разных файлов и по клику по ссылке. К примеру, есть вот такое меню: <a href="#" id="documentation">Документация</a> <a href="#" id="top_predlojeiy">Топ предложений</a> <a href="#" id="topmenu23">Том меню</a> <a href="#" id="text_na_static">Текст на статику</a> У каждого пункта есть свой ID. При нажатии на ссылку "Документация" скрипт подружает контент в div id="content" из файла documentation.htm И так далее. Перерыл кучу сайтов и форумов, но безрезультатно. Очень надеюсь на вашу помощь. Заранее благодарен. |
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".link-load a").click(function () {
$("#divLoad").load($(this)[0].href);
return false;
});
});
</script>
<div id="divLoad"></div>
<div class="link-load">
<pre>
<a href="/documentation.htm">Документация</a>
<a href="/top_predlojeiy.htm">Топ предложений</a>
<a href="/topmenu23.htm">Том меню</a>
<a href="/text_na_static">Текст на статику</a>
</pre>
</div>
|
Спасибо! Все отлично работает! Очень благодарен.
Не подскажите еще как сделать так, что бы контент прогружался через определенное время, и пока он не прогружен выводился индикатор загрузки? На скока я понимаю нужно использовать setTimeout, а вместо индикатора подойдет простое gif изображение. Подскажите пожалуйста как это реализовать. |
думается мне вот так:
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".link-load a").click(function () {
$("#loader").html("<img src='...gif'>");
setTimeout(function(){
$("#loader").hide();
$("#divLoad").load($(this)[0].href);
},3000);
return false;
});
});
</script>
<div id="loader"></div>
<div id="divLoad"></div>
<div class="link-load">
<pre>
<a href="/documentation.htm">Документация</a>
<a href="/top_predlojeiy.htm">Топ предложений</a>
<a href="/topmenu23.htm">Том меню</a>
<a href="/text_na_static">Текст на статику</a>
</pre>
</div>
|
Перед вызововом $().load показать прелоадер, а в функции, переданной вторым параметром в $().load скрыть его:
$("#loader").show();
$("#divLoad").load($(this)[0].href, function(){ $("loader").hide() });
|
| Часовой пояс GMT +3, время: 10:12. |