Используя замечательный плагин jFlow

* Извините за неудовлетворительное качество звука. Я собирался взять конденсаторный микрофон на этой неделе, но я был очень занят. Я обещаю позаботиться об этом как можно скорее. Кроме того, если вы заинтересованы в создании видеоуроков для нас, напишите мне по адресу [email protected].

Вы можете просмотреть и купить тему Джастина здесь .

Скачать плагин

Как всегда с новым плагином, первый шаг должен посетить веб-сайт создателя и загрузить плагин. Все, что вам нужно, это крошечный файл Javascript — и, конечно, копия базовой библиотеки jQuery. Пока вы на сайте, потратьте несколько минут, чтобы ознакомиться с концепциями. Вы будете удивлены тем, насколько проста реализация, условно говоря (или печатая?).

Реализация

После сохранения файла Javascript на жестком диске, импортируйте его в новое веб-приложение следующим образом.

* Обратите внимание, что вы должны импортировать основную библиотеку до jFlow. В противном случае вы получите некоторые очевидные ошибки!

Чтобы использовать плагин jFlow, вам нужно понять функцию некоторых идентификаторов и классов.

• div # controller: этот элемент будет служить нашим «крючком» при вызове нашего jQuery.
• .jFlowControl: эти промежутки будут дочерними для элемента div #controller. Для такого количества слайдов вы должны создать связанные теги span с этим классом. Например, если у меня было пять слайдов, у меня должно быть пять тегов с классом .jFlowControl. Вскоре вы поймете это больше на примере.
• div # slides: внутри div слайдов вам нужно вложить дополнительные div, содержащие желаемый контент для каждого «слайда». Подробнее об этом позже.
• .jFlowPrev, .jFlowNext: эти два класса позволяют перейти к следующему слайду или наоборот.

Образец HTML-документа

Давайте пройдемся по этому немного.

• Как и на большинстве страниц, мы завернули все содержимое в элемент «wrap». Это чисто по эстетическим соображениям. Это не обязательно.
• В моем контроллере div (который является ловушкой для jFlow) я добавил три тега span с классом «jFlowControl». Думайте об этих промежутках как вкладки. Если вы нажмете «Нет 3», он быстро перейдет к третьему связанному «слайду» . Помните, что количество тегов span, которые у вас есть, должно быть равно количеству div в вашем div «слайда». Обратите внимание, что у обоих есть три.
• Двигаясь дальше, мы теперь подходим к div с идентификатором «prevNext». Это не ключевой идентификатор, я мог бы назвать его Рик, если бы захотел. Это просто div-обертка, так что я могу контролировать, куда попадают мои кнопки «Далее» и «Предыдущий» на странице. Однако, имя класса изображений важно: ‘jFlowPrev’, ‘jFlowNext’.
• Наконец, мы подошли к разделу «слайды». В этом div мы разместим детские div. Каждый из этих детей будет служить одной «вкладкой». Еще раз, обратите внимание, что если бы я хотел добавить четвертое изображение, мне также понадобился бы дополнительный тег span «jFlowControl» внутри контроллера div.

JQuery

Код, который мы должны написать, довольно прост. Сначала просмотрите окончательный сценарий, а затем я перейду к каждой строке.

Это оно! , Во-первых, мы ждем, когда документ будет готов к прохождению. Затем мы берем наш контроллер div и вызываем метод «jFlow». Нам доступно много параметров, но мы будем использовать только несколько.

• Слайды: он спрашивает: «Как называется элемент div, который содержит каждый слайд — или вкладку? Мы свяжем его с соответствующим div« слайдов », который я создал ранее. Но вы можете изменить его, если хотите.
• Ширина, Высота: это необходимо. В этом примере я использую только изображения. В результате я установил значения ширины и высоты, равные значениям изображений.
• Длительность: в миллисекундах, как долго вы хотите перейти от слайда к слайду? Я установил 600 — что составляет около половины секунды.

Вы закончили

Единственное, что вы захотите реализовать, это стилизация CSS. Тем не менее, jFlow будет отлично работать без него. Это было бы очевидно только по эстетическим причинам. Если вам нужна дополнительная информация, я немного подробнее расскажу о стилевом оформлении.

Единственное, что вы захотите реализовать, это стилизация CSS. Тем не менее, jFlow будет отлично работать без него. Это было бы очевидно только по эстетическим причинам. Если вам нужна дополнительная информация, я немного подробнее расскажу о стилевом оформлении.

Схема, которая видна выше, преднамеренно проста. Я оставлю это вам, чтобы представить все различные варианты использования!

Несколько недель назад Крис Койер создал учебник по похожему плагину — «codaSlider». Я лично использовал плагин в нескольких проектах, однако обнаружил, что jFlow намного проще и проще в использовании. В любом случае, оба являются мощными плагинами. Используйте их с умом.

Подпишитесь на еженедельные скринкасты

Вы можете добавить наш канал RSS в свои подкасты ITUNES, выполнив следующие действия:

1. Как только ITUNES загрузится, нажмите «Advanced Tab»
2. Выберите «Подписаться на подкаст»
3. Введите «http://feeds.feedburner.com/NETTUTSVideos»

Это должно сделать это! Скринкаст также будет доступен для поиска на ITUNES в ближайшие двадцать четыре часа.

Дополнительные ресурсы

• 

  Плагин jFlow

  Это домашний сайт плагина jFlow. Это поможет вам начать работу с файлом Javascript вместе с некоторыми полезными примерами.

  Посетить вебсайт

• 

  ThemeForest

  Если вы хотите узнать больше или просто заработать немного денег, обязательно посетите ThemeForest.net.

  Посетить вебсайт

• 

  Dynamic Fun с простым пирогом и jQuery — учебник по слайдеру Coda

  Проверьте другой плагин jQuery, который выполняет аналогичную функцию. В этом уроке Крис Койер покажет вам, как вы можете реализовать плагин Coda Slider, чтобы создать красивый блогролл.

  Читать статью

• Подпишитесь на RSS-канал NETTUTS, чтобы узнать о ежедневных новостях и статьях о веб-разработке.