01 апреля 2010
Свежий взгляд на списки с сортировкой вместе с JQuery UI
В ходе работы над одним проектом пришел к одному интерфейсному решению, которым хочу со всеми поделиться.
Раз в несколько дней на сайте публикуются статьи из бумажной версии газеты. Сортировать их по дате или алфавиту нельзя. Все знают, что в газете статьи имеют разные приоритеты (первая полоса, колонки авторов и др.)
Выходит, что необходимо добавить возможность изменения порядка статей на странице и их важности, в зависимости от которой она будет иметь свой стиль отображения. Можно просто создать в админке два поля: одно с уровнем важности и элемент управления сортировки.
Обратимся к JQuery UI. Вторая задача решена. Есть контрол для сортировки элементов списка:

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

Рабочий пример по ссылке: www.ufasite.ru/sortable/example.html
В моем же конкретном случае данный пример используется в самом шаблоне дизайна главной страницы сайта, так что контент-менеджер сразу может видеть конечный результат.
_____________________
Об авторе: Ахметов Олег. И ждать нам Джанго на третьем Питоне столько же, сколько шестой ПХП.
Раз в несколько дней на сайте публикуются статьи из бумажной версии газеты. Сортировать их по дате или алфавиту нельзя. Все знают, что в газете статьи имеют разные приоритеты (первая полоса, колонки авторов и др.)
Выходит, что необходимо добавить возможность изменения порядка статей на странице и их важности, в зависимости от которой она будет иметь свой стиль отображения. Можно просто создать в админке два поля: одно с уровнем важности и элемент управления сортировки.
Обратимся к JQuery UI. Вторая задача решена. Есть контрол для сортировки элементов списка:

Что же с уровнямя важности, так можно создать несколько списков для каждого из них, а используя опцию connectWith мы разрешим им обмениваться между собой элементами:
$(".lists").sortable({ connectWith: '.lists' });Но не будем останавливаться на этом и добавим каждому из списков свои правила в CSS. Изначально статья включает в себя фотографию, заголовок-ссылку и анонс. В зависимости от важности будем скрывать лишние элементы и манипулировать размерами фотографии:
#list .photo img { width: 40px; } /* в списке новостей мелкая превьюшка */
#list .announce { display: none; } /* и убрали текст анонса */
#issue .photo img { width: 200px; } /* на первой полосе огромные фотографии */
#news .photo img { width: 125px; } /* в новостях фотографии поменьше */
#news .full { display: none; } /* и сокращенный текст анонса */
#more .photo { display: none; } /* в ссылках фотографии убрали*/
#more .announce { display: none; } /* как и текст анонса */ В результате получаем это:

Рабочий пример по ссылке: www.ufasite.ru/sortable/example.html
В моем же конкретном случае данный пример используется в самом шаблоне дизайна главной страницы сайта, так что контент-менеджер сразу может видеть конечный результат.
_____________________
Об авторе: Ахметов Олег. И ждать нам Джанго на третьем Питоне столько же, сколько шестой ПХП.
- MpaK
- 01 апреля 2010, 16:04
- 0
Да, силён JQeury, силен… Сравниваю свои опыты на Prototypejs делать сортировки, помню это было не так кузяво и просто, а тут одна строка и особенно мощь по связыванию по классу! Шикарно!
Напомнило немного старую идею фотоальбома у Лебедева, копал как-то его код, там чистый JS был…
Напомнило немного старую идею фотоальбома у Лебедева, копал как-то его код, там чистый JS был…
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.
Комментарии:1