Главная » Файлы » Прочие скрипты » jQuery

Простая динамическая подгрузка страниц через плагин AJAX Pagination на jQuery для uCoz
23.06.14, 15:00:47

Скачать файл




Замечательное решение для тех, кто хочет подгружать нужный контент не переходя с одной страницы на другую. В качестве примера я использовал подгрузку страниц профилей пользователей

Для начала посмотрите ДЕМО

Установка:

После /head вставляйте:
Код
<link rel="stylesheet" type="text/css" media="screen" href="/css/css.css" />
  <script type="text/javascript">
  $(document).ready(function(){  
  function showLoader(){  
  $('.search-background').fadeIn(200);  
  }  

  function hideLoader(){  
  $('.search-background').fadeOut(200);  
  };  

  $("#paging_button li").click(function(){  
  showLoader();  

  $("#paging_button li").css({'background-color' : ''});  
  $(this).css({'background-color' : '#006699'});  

  $("#content").load("/index/8-" + this.id, hideLoader);  
  return false;  
  });  

  $("#1").css({'background-color' : '#006699'});  
  showLoader();  
  $("#content").load("/index/8-1", hideLoader);  

  });  
  </script>


Следующий код в то место, где будет сам блок подгрузки:
Код
<div class="search-background">
  <label><img src="/images/loader.gif" alt="" /></label>
  </div>
  <div id="content">
   
  </div>

  <div id="paging_button" align="center">
  <ul>
  <li id="1">1</li><li id="2">2</li><li id="3">3</li><li id="4">4</li><li id="5">5</li><li id="6">6</li><li id="7">7</li><li id="8">8</li>  
  </ul>
  </div>

  <br clear="all" /><br clear="all" />
  <br clear="all" /><br clear="all" />
  <br clear="all" /><br clear="all" />


Залейте стиль из прикреплённого архива в папку css и картинку в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: страниц, Pagination, Через, Простая, Подгрузка, на, плагин, JQuery, AJAX, динамическая
Просмотров: 776 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: