Ajax загрузка контента jQuery / Скрипты / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Скрипты

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Вес файла: 4.8 Kb

Уникальный ID: 1166

Количество символов:

Посмотрели: 4122 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-1166-20

Скачали бесплатно: 152 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Скрипт, Script, Snippet, сниппет, Bootstrap, Ajax, jQuery, html

Поделился: BootstrapТема

Добавлено: 2016-07-11 в 18:08

Метка: 1581116094

⇄ ⇅

<h1 class="text-center">Ajax загрузка контента jQuery</h1>
<div class="row">

<div id="nav" class="col-xs-12">
<div class="col-sm-4"><a href="https://bootstraptema.ru/snippets/script/2016/ajax-jquery/home.html" class="btn btn-block col-sm-6">Описание</a></div>
<div class="col-sm-4"><a href="https://bootstraptema.ru/snippets/script/2016/ajax-jquery/script.html" class="btn btn-block col-sm-6">Скрипт</a></div>
<div class="col-sm-4"><a href="https://bootstraptema.ru/snippets/script/2016/ajax-jquery/info.html" class="btn btn-block col-sm-6">Дополнительно</a></div>
<div class="clearfix"></div>
<hr>
</div>

<div id="content" class="col-xs-12 well">
<p>Динамичная загрузка содержимого с другой страницы сайта без перезагрузки, контент может загружаться по ID соответствующего блока.</p>
<p>Используется Ajax jQuery для Bootstrap, загружается содержимое которое находится в id="content".</p>
<p>Добавлен индикатор загрузки и анимация.</p>
<p>Скачайте исходник в архиве, измените содержимое, добавьте страниц.</p>
</div>

</div>
</div>

$('#nav div a').click(function(){
 
 var toLoad = $(this).attr('href')+' #content';
 $('#content').hide('fast',loadContent);
 $('#load').remove();
 $('#wrap').append('<span id="load">Загрузка...</span>');
 $('#load').fadeIn('normal');
 window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
 function loadContent() {
 $('#content').load(toLoad,'',showNewContent())
 }
 function showNewContent() {
 $('#content').show('normal',hideLoader());
 }
 function hideLoader() {
 $('#load').fadeOut('normal');
 }
 return false;
 
 });

});
</script>

BootstrapTema

Ajax загрузка контента jQuery

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0