» » Створюємо Ajax-віджет вкладки контенту за допомогою jQuery

Створюємо Ajax-віджет вкладки контенту за допомогою jQuery

Частенько блоги повні безліччю корисної інформації на абсолютно різні тематики. Часто буває так, що читачі не знають і не розуміють, як їм знайти схожі статті на сайті без того, аби використовувати рядок пошуку. У таких ситуаціях вам допоможе спеціальний невеликий віджет, вбудований прямо в сторінку, що пропонує користувачам схожий контент.

У даній настанові ми хотіли б розповісти вам про те, яким чином можна створити ajax-віджет вкладки з контентом, який ховатиметься в бічній панелі і представлятиме користувачам мініатюри постів, а також додаткові мета-дані на зразок автора статті і дати публікації. Ми постаралися зберегти все наскільки це можливо мінімалістичним, і більше уваги приділили jQuery-анімаціям. Аби зрозуміти, про що ми сьогодні говоритимемо, погляньте на представлене демо.
Створюємо Ajax-віджет вкладки контенту за допомогою jQuery


Приступаємо


Спершу ми створюємо порожній HTML-документ з декількома прикріпленими файлами. Один з них - локальною копією jQuery, а другий - таблиці стилів styles.css. Він складається з декількох скидань стилів, а також з базового оформлення.

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Tabbed Ajax Content Widget - SpyreStudios Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://spyrestudios.com/favicon.ico">
  <link rel="icon" href="http://spyrestudios.com/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>


В цілому, сторінка оформлена в стилі дуже простого веб-блогу. Зліва замість контенту використовується випадковий текст. А в бічній панелі можна бачити невеликий віджет з 3 вкладками: на нові статті, популярні статті і випадковий контент.

<div id="tabbed-posts">
      <header class="navlinks">
        <a href="#" id="newpostslink" class="active">Newest</a>
        <a href="#" id="popularpostslink">Popular</a>
        <a href="#" id="randompostslink">Random</a>
      </header>


Нам дуже подобається цей дизайн, оскільки він вийшов досить приємним, і відмінно поєднується з шаблоном. Вам не доведеться сильно працювати, аби розвинути концепцію дизайну в щось серйозніше для ваших майбутніх проектів. Ми також використовуємо координований CSS-клас .active, який перевіряє, яка вкладка контенту відображується на даний момент.

CSS-стилі сторінки

Окрім базових скидань стилів, ми також використовуємо новий веб-шрифт Google під назвою Crete Round для наших заголовків. Div id #left і #sidebar фіксують ширину всередині контейнеру clearfix. Це також означає, що сам віджет не має фіксованої ширини. Варто відзначити, що мобільні користувачі можливо навіть не захочуть використовувати цей віджет, тому вам варто розглянути варіант з його приховуванням для певних розмірів екрану за допомогою media queries.

#w {
  display: block;
  margin: 0 auto;
  width: 800px;
  padding: 11px 16px;
  background: #fff;
  border: 7px solid rgba(0,0,0,0.35);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#left {
  display: block;
  float: left;
  width: 460px;
  padding: 0 7px;
  margin-right: 14px;
}

#sidebar {
  display: block;
  float: left;
  width: 280px;
}


Самі навігаційні посилання центровані в їх власному елементі heading. Якщо вам захочеться використовувати вкладки, доведеться додати які-небудь рамки, або тінь блоку довкола посилань. Ми у свою чергу вирішили використовувати простий ефект для фону при наведенні курсора. Також варто відзначити, що для нашого демо віджету ми використовуємо фіксовану ширину 250 пікселів.

/** tabber widget **/
#tabbed-posts {
  display: block;
  width: 250px;
  margin: 0 auto;
  padding-top: 25px;
}

#tabbed-posts .navlinks {
  display: block;
  padding: 14px 0;
  font-size: 1.4em;
  text-align: center;
}
#tabbed-posts .navlinks a {
  text-decoration: none;
  font-weight: normal;
  margin-right: 5px;
  color: #588bc4;
  padding: 5px 7px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
#tabbed-posts .navlinks a:hover, #tabbed-posts .navlinks a.active:hover {
  background: #dde8f4;
}

#tabbed-posts .navlinks a.active {
  font-weight: bold;
  background: #e8f0f9;
}


Тепер цей фрагмент коду не повинен вас дивувати. Все можна без зусиль привабливо оформити, якщо скористатися плаваючими елементами з контейнером clearfix. Головна відмінність спостерігається в кожному розділі контенту на сторінці. Ми використовуємо 3 div-елементи з класом .tabcontent, оскільки вони містять ненумеровані списки посилань.

.tabcontent ul li {
  padding-bottom: 5px;
  padding-top: 7px;
  border-bottom: 1px solid #cbcbcb;
}

.tabcontent ul li h3 {
  font-size: 1.5em;
  line-height: 1.4em;
  font-weight: normal;
}

.tabcontent ul li h3 a {
  display: block;
  width: 100%;
  color: #6a6e7a;
  padding: 3px 0;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 1px 1px 0 #fff;
}
.tabcontent ul li h3 a:hover {
  background: #dde8f4;
}

.tabcontent ul li h3 .featuredpic {
  display: block; 
  float: left;
  margin: 0;
  margin-right: 3px;
  padding: 3px 4px;
}
.tabcontent ul li h3 .featuredpic img {
  display: block;
}


Перший div завжди відображується при події pageload, оскільки він зосереджений на найсвіжіших публікаціях. Коли ви переходите по посиланнях, віджет автоматично приховує основний контент, аби показати вам новий список. Зазвичай для цього потрібні додаткові класи, але ми вирішили скористатися рядковими CSS-стилями display:none. Це зручно при роботі з jQuery-методами fadeIn() і fadeOut(), які у будь-якому випадку використовують рядкові стилі.

Контент у вкладках з використанням jQuery

Насправді, даний віджет буде неробочим якщо не застосувати javascript для динамічного перемикання контенту. Зробити це не так складно, і кожен, хто вміє працювати з jQuery, повинен зуміти вирішити це завдання. Ми розділили наш фрагмент тексту на два блоки, аби його було легко зрозуміти.

$(function(){
  $('#tabbed-posts .navlinks a').on('click', function(e){
    e.preventDefault();
    
    if($(this).hasClass('active')) {
      return;
    }


Коли хтось клацає по будь-якому анкорному елементу в .navlinks, ми спочатку запобігаємо стандартній поведінці браузера. Нам просто не потрібно, аби значення href завантажувалося в адресний рядок. Потім ми перевіряємо, чи має посилання, що було тільки що натиснене, клас .active. Якщо з'ясовується, що має, то нічого не відбувається. Якщо посилання вже активне, jQuery просто закінчує команду, і нічого не відбувається.

  else {
      var currentitm = $('#tabbed-posts .navlinks a.active').attr('id');
      if(currentitm == 'newpostslink') { var currentlist = $('#tabbed-posts-new'); }
      if(currentitm == 'popularpostslink') { var currentlist = $('#tabbed-posts-popular'); }
      if(currentitm == 'randompostslink') { var currentlist = $('#tabbed-posts-random'); }
      
      var newitm = $(this).attr('id');
      if(newitm == 'newpostslink') { var newlist = $('#tabbed-posts-new'); }
      if(newitm == 'popularpostslink') { var newlist = $('#tabbed-posts-popular'); }
      if(newitm == 'randompostslink') { var newlist = $('#tabbed-posts-random'); }
      
      $('#tabbed-posts .navlinks a').removeClass('active');
      $(this).addClass('active');
      
      $(currentlist).fadeOut(320, function(){
        $(newlist).fadeIn(200);
      });
    } // end if/else logic
    
  }); // end event handler
});


Якщо ж посилання не активне на даний момент, то ми запускаємо процес переходу. Наш віджет заснований на id, які ми вписали в код. Вам потрібно оновлювати значення id залежно від вашого коду. Currentitm - це змінна, що вказує на поточне посилання, а currentlist вказує на поточний активний div-контейнер .tabcontent, кожен з яких використовують власні унікальні ідентифікатори.

Потім ми генеруємо нові змінні, які повинні відображуватися після того, як анімація завершить приховувати старий контент. Netitm відноситься до нового посилання, а newlist визначає новий div-контейнер. Процес переходу досить простий, - він є використанням addClass() і removeClass() вкупі з методами затемнення в jQuery.

Важливо відзначити один момент: метод fadeOut() повинен завершитися до того, як буде запущена анімація fadeIn(). Аби реалізувати це, ми написали callback-функцію, яка запускається лише після того, як завершується затемнення. Потім, всередині callback-функції, ми запускаємо відображення списку нової вкладки контенту. На всю анімацію потрібно виділити не більше 60 секунд.

На завершення
Нам подобається зустрічати подібні віджети на інших сайтах, оскільки вони в значній мірі спрощують процес пошуку потрібної вам інформації в блогах. CMS-движки типу Wordpress пропонують доступні API, які дозволяють вам створювати подібні віджети за допомогою власних SQL-запитів. Нам здається, що такі допоміжні елементи мають бути використані на всіх сучасних веб-сайтах.


1245 05.02.14



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру