jquery обзор плагинов

Источник

• sorgalla.com/jcarousel

Скачать

• 
• Исходный код

Примеры

• jCarosel, jQuery прокрутка текста и картинок

Описание

Для работы jQuery-карусели необходимо в html-файле создать следующую структуру:

1
2
3

<ul id="mycarousel" class="jcarousel-skin-name">
   <!-- The content goes in here -->
</ul>

Плагин автоматически создаст необходимую HTML-обертку вокруг элемента <ul>. Атрибут class используется для указания скина карусели. После инициализации плагина HTML код будет выглядеть так:

1
2
3
4
5
6
7
8
9
10
11
12

<div class="jcarousel-skin-name">
   <div class="jcarousel-container">
      <div class="jcarousel-clip">
         <ul class="jcarousel-list">
            <li class="jcarousel-item-1">First item</li>
            <li class="jcarousel-item-2">Second item</li>
         </ul>
      </div>
      <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
      <div class="jcarousel-next"></div>
   </div>
</div>

Установка

Для использования плагина jCarousel, вам необходимо подключить библиотеку jQuery, плагин и скин для него ( css файл)

1
2
3

<script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

Инициализация jQuery карусели

1
2
3
4
5

jQuery(document).ready(function() {
   jQuery('#mycarousel').jcarousel({
      // Configuration goes here
   });
});

Настройка

В архиве с плагином имеется несколько готовых скинов (css файлы), так же вы можете создать свой скин на основе одного из них.

Динамическая загрузка контента

Используя callback-функцию itemLoadCallback вы можете динамически создавать элементы <li>

1
2
3
4
5

jQuery(document).ready(function() {
   jQuery('#mycarousel').jcarousel({
      itemLoadCallback: itemLoadCallbackFunction
   });
});

itemLoadCallbackFunction это JavaScript функция, которая будет вызвана, когда необходимые элементы карусели будут загружены. Функции передаетя два параметра: ссылка на экземпляр карусели и флаг, которые указывает текущее состояние карусели (‘init’, ‘prev’ или ‘next’).

1
2
3
4
5
6
7
8
9

function itemLoadCallbackFunction(carousel, state){
   for (var i = carousel.first; i <= carousel.last; i++) {
      // Check if the item already exists
      if (!carousel.has(i)) {
         // Add the item
         carousel.add(i, "I'm item #" + i);
      }
   }
};

jCarousel имеет метод add(), позволяющий указывать индекс создаваемого элемента и индекс элемемента для обновления содержимого. Если элемент уже существует, то его содержание будет обновлено. Вы можете использовать в качестве ссылки на первый и последний видимые элементы  переменные carousel.first и carousel.last.

jCarousel содержит множество параметров, позволяющих управлять видимостью и поведением карусели.

Параметры:

• параметр
  значение по умолчанию
  описание
• vertical
  false
  позволяет изменить способ показа с горизонтальной прокруткой на вертикальную
• start
  1
  Индекс элемента с которого начинается показ
• offset
  1
  Индекс элемента с которого будет происходить инициализация
• size
  количество элементов <li>, если размер не указан явно
  Количество элементов для работы плагина
• scroll
  3
  На сколько элементов будет происходить прокрутка
• visible
  null (число)
  Если задано, ширина/высота пунктов будет вычислена и установлена в зависимости от ширины/высоты обрыва, так, чтобы указанное число пунктов было видимо.
• animation
  «fast»
  Скорость прокрутки элементов. Возможны значения "slow","fast", 0 (без анимации)
• easing
  null (строка)
  Название эффекта (смотрите документацию jquery)
• auto
  0
  Задает интервал автоматической прокрутки содержимого. При значение 0 автопрокрутка отключена
• wrap
  null
  Определяет поведение по достижению первого и последнего пункта (зацикливать или нет). Возможны значения "first", "last" и "both"
• initCallback
  null (строка)
  Пользовательская функция, вызываемая при инициализации карусели. Передается два параметра: экземпляр карусели и состояние (init, reset или reload)
• itemLoadCallback
  null
  Пользовательская функция, вызываемая при загрузке объектов. Передается два параметра: экземпляр карусели и состояние (init, reset или reload)
• itemFirstInCallback
  null
  Пользовательская функция, вызываемая (по завершению анимации) когда элемент становится первым в зоне видимости поля карусели. Передается 4 параметра: экземпляр карусели, ссылка на элемент <li> этого объекта, индекс, указывающий позицию элемента в списке и состояние карусели (prev, next, init)
• itemFirstOutCallback
  null
  Пользовательская функция, вызываемая (по завершению анимации) когда элемент перестает быть первым в зоне видимости поля карусели. Передается 4 параметра: экземпляр карусели, ссылка на элемент <li> этого объекта, индекс, указывающий позицию элемента в списке и состояние карусели (prev, next, init)
• itemLastInCallback
  null
  Пользовательская функция, вызываемая (по завершению анимации) когда элемент становится последним в зоне видимости поля карусели. Передается 4 параметра: экземпляр карусели, ссылка на элемент <li> этого объекта, индекс, указывающий позицию элемента в списке и состояние карусели (prev, next, init)
• itemLastOutCallback
  null
  Пользовательская функция, вызываемая (по завершению анимации) когда элемент перестает быть последним в зоне видимости поля карусели. Передается 4 параметра: экземпляр карусели, ссылка на элемент <li> этого объекта, индекс, указывающий позицию элемента в списке и состояние карусели (prev, next, init)
• itemVisibleInCallback
  null
  Пользовательская функция, вызываемая (по завершению анимации) когда элемент находится в зоне видимости поля карусели. Передается 4 параметра: экземпляр карусели, ссылка на элемент <li> этого объекта, индекс, указывающий позицию элемента в списке и состояние карусели (prev, next, init)
• itemVisibleOutCallback
  null
  Пользовательская функция, вызываемая (по завершению анимации) когда элемент не входит в зону видимого поля карусели. Передается 4 параметра: экземпляр карусели, ссылка на элемент <li> этого объекта, индекс, указывающий позицию элемента в списке и состояние карусели (prev, next, init)
• buttonNextCallback
  null
  Пользовательская функция, вызываемая при изменение состояния кнопки «next». При помощи этой функции можно управлять поведением кнопки «next». Передается 3 параметра: экземпляр карусели, ссылка на элемент управления и флаг, показывающий состояние кнопки (enabled/disabled)
• buttonPrevCallback
  null
  Пользовательская функция, вызываемая при изменение состояния кнопки «prev». При помощи этой функции можно управлять поведением кнопки «prev». Передается 3 параметра: экземпляр карусели, ссылка на элемент управления и флаг, показывающий состояние кнопки (enabled/disabled)
• buttonNextHTML
  <div></div>
  HTML код генерируемый для кнопки «next». При значение null кнопка не будет создана
• buttonPrevHTML
  <div></div>
  HTML код генерируемый для кнопки «prev». При значение null кнопка не будет создана
• buttonNextEvent
  «click»
  Событие кнопки по которому карусель будет прокручена вперед
• buttonPrevEvent
  «click»
  Событие кнопки по которому карусель будет прокручена назад