Создание «фильтруемого» портфолио с помощью jQuery

Если вы какое-то время работали в своей области, вполне вероятно, что у вас довольно обширное портфолио. Чтобы вам было легче ориентироваться, у вас, вероятно, возникнет соблазн разбить их на разные категории. В этом уроке я покажу вам, как сделать «фильтрацию по категориям» немного более интересной с помощью небольшого количества jQuery.

1. Разметка

Наше портфолио — не более чем простой неупорядоченный список:

Примечание: я ни в коем случае не участвовал в создании этих замечательных сайтов; Я просто использую их в качестве примеров.

2. Категоризация портфолио

Мы собираемся предположить, что наш портфель можно разбить на 5 категорий:

• дизайн
• развитие
• CMS
• интеграция
• Информационная архитектура

Чтобы использовать категории, которые мы определили, мы преобразуем их в нижний регистр и заменим все пробелы дефисами:

• Дизайн = дизайн
• Развитие = развитие
• CMS = CMS
• Интеграция = интеграция
• Информационная архитектура = информационная архитектура

Мы собираемся предположить, что каждый элемент портфолио может быть в одной или нескольких категориях, поэтому мы будем случайным образом добавлять наши вновь созданные категории в виде классов к элементам списка:

Добавление навигации по категориям

Теперь, когда у нас есть части портфолио, нам понадобится какой-то способ навигации по ним. Другой неупорядоченный список должен сделать:

Поскольку я хочу, чтобы в представлении по умолчанию портфеля отображались все элементы, я назначил класс current первому элементу списка.

Вы, вероятно, посмотрите на это и спросите меня о доступности этого примера. Я думаю, что у вас есть 3 варианта решения этой проблемы.

1. При создании такого портфеля существует большая вероятность, что он будет управляться базой данных. Таким образом, вы должны иметь возможность создать отдельную страницу для каждой категории. Поэтому, если у пользователя не включен JavaScript, он может перейти на отдельную страницу с отфильтрованным портфелем.
2. Вы можете использовать аналогичную технику из моего последнего урока : установка параметра в URL.
3. Вы всегда можете просто написать в навигации с помощью JavaScript перед элементами портфолио:

     $ (документ) .ready (function () {
      $ ('ul # портфолио'). before ('<ul id = "filter"> <li class = "current"> <a href="#"> все </a> </ li> <li> <a href = "#"> Дизайн </a> </ li> <li> <a href="#"> Разработка </a> </ li> <li> <a href="#"> CMS </ a > </ li> <li> <a href="#"> Интеграция </a> </ li> <li> <a href="#"> Информационная архитектура </a> </ li> </ ul> «);
    }); 

Хорошо, у вас есть мои заметки о доступности, так что не критикуйте меня за то, что я не думаю об этом.

3. CSS

Этот урок не предназначен для CSS, поэтому я собираюсь довольно быстро пробежаться по CSS.

Я всегда начинаю с некоторых базовых стилей в качестве своего рода фреймворка, поэтому сейчас я не буду переходить к этим стилям. Эти стили в основном просто служат для сброса и определяют некоторые стили для основных элементов.

Для начала я просто хочу отобразить категории вверху по горизонтали с границей между ними:

Далее я хочу удалить границу из последнего элемента списка (в браузерах, которые его поддерживают) и изменить отображение ссылок:

Я также хочу убедиться и дифференцировать выбранную категорию:

Хорошо, теперь, когда у нас есть стили навигации по категориям, давайте сосредоточимся на фактическом макете портфолио. Давайте планируем разместить 3 элемента списка рядом друг с другом с рамкой вокруг каждого:

Теперь нам просто нужно добавить некоторые базовые стили для изображений и ссылок:

Компенсация для Internet Explorer 6

Конечно, давайте не будем забывать о нашем друге IE6. Как только вы начинаете нажимать на некоторые из фильтров, макет становится немного сумасшедшим.

Из того, что я могу сказать, это страшная ошибка IE Double Margin . Я пытался применить display: inline к элементам списка после их фильтрации, но, похоже, это не помогло. Таким образом, мое лучшее решение состояло в том, чтобы просто наполовину уменьшить правильное поле

Мы, конечно, будем обслуживать эту специфическую таблицу стилей IE6 только с помощью условных комментариев:

Да, это выглядит не так хорошо, но вы знаете, что: мне все равно . Если вы используете IE6, вы это заслужили.

4. JQuery

Хорошо, теперь, когда у нас уже есть разметка и CSS, давайте не будем переходить к важной части этого урока: JavaScript .

Мы собираемся начать с включения последней версии jQuery в заголовок нашего документа.

Далее мы хотим выполнить наш код после загрузки документа.

  $ (документ) .ready (function () {

 }); 

Теперь мы не хотим ничего делать, пока не нажата одна из наших категорий. Мы также хотим убедиться, что мы не следуем значению href ссылки, поэтому нам нужно вернуть false :

  $ ('ul # filter a'). click (function () {
   вернуть ложь;
 }); 

После того, как ссылка категории нажата, я хочу сделать пару вещей: удалить схему в ссылке, по которой щелкнули, удалить класс current в элементе списка, который имеет ее, и добавить класс current в родительском элементе ссылки, по которой щелкнули :

  $ (Это) .css ( 'план', 'ни');
 $ ('ul # filter .current'). removeClass ('current');
 $ (Это) .parent () addClass ( 'ток'). 

Далее мы хотим получить текст внутри ссылки, по которой щелкнули, преобразовать его в нижний регистр и заменить любые пробелы дефисами (как и раньше, когда мы создавали классы категорий):

  var filterVal = $ (this) .text (). toLowerCase (). replace ('', '-'); 

Первый случай сценария — когда нажата ссылка « Все» . Когда это щелкнуло, мы хотим показать все элементы портфолио и удалить класс скрытого:

  if (filterVal == 'all') {
   $ ('ul # portfolio li.hidden'). fadeIn ('slow'). removeClass ('hidden');
 } 

В противном случае была нажата одна из актуальных категорий. Итак, мы хотим просмотреть каждый элемент портфолио и проверить, есть ли у него класс, равный значению категории, по которой щелкнули. Если у него нет класса, мы хотим затемнить элемент списка и добавить класс скрытого. Если у него есть класс, мы хотим добавить его и удалить класс hidden:

  еще {
   $ ('ul # portfolio li'). each (function () {
     if (! $ (this) .hasClass (filterVal)) {
       $ (Это) .fadeOut ( 'нормальный') addClass ( 'скрытый').
     } еще {
       $ (Это) .fadeIn ( 'медленно') removeClass ( 'скрытый').
     }
   });
 } 

Готовый сценарий

Давайте посмотрим на весь скрипт:

  $ (документ) .ready (function () {
   $ ('ul # filter a'). click (function () {
     $ (Это) .css ( 'план', 'ни');
     $ ('ul # filter .current'). removeClass ('current');
     $ (Это) .parent () addClass ( 'ток').
    
     var filterVal = $ (this) .text (). toLowerCase (). replace ('', '-');
        
     if (filterVal == 'all') {
       $ ('ul # portfolio li.hidden'). fadeIn ('slow'). removeClass ('hidden');
     } еще {
       $ ('ul # portfolio li'). each (function () {
         if (! $ (this) .hasClass (filterVal)) {
           $ (Это) .fadeOut ( 'нормальный') addClass ( 'скрытый').
         } еще {
           $ (Это) .fadeIn ( 'медленно') removeClass ( 'скрытый').
         }
       });
     }
    
     вернуть ложь;
   });
 }); 

Некоторым людям, возможно, не понравится этот эффект, но я думаю, это здорово, как они все танцуют вокруг. Это определенно не единственный способ сделать что-то подобное, и его можно легко использовать для других целей.

Этот метод фактически развился из кодирования, которое я сделал для портфеля моей компании .

5. Одна быстрая заметка

Возможно, вы заметили, что я добавлял и удалял класс скрытого для элементов, так как переключал видимость. Хотя я ничего не делал с классом, я стараюсь добавлять и удалять классы, чтобы обозначать состояние, в котором они находятся. Вы можете использовать его не сразу, но это может помочь вам в этом. с в будущем.

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