Свежий взгляд на списки с сортировкой вместе с JQuery UI

В ходе работы над одним проектом пришел к одному интерфейсному решению, которым хочу со всеми поделиться.
Раз в несколько дней на сайте публикуются статьи из бумажной версии газеты. Сортировать их по дате или алфавиту нельзя. Все знают, что в газете статьи имеют разные приоритеты (первая полоса, колонки авторов и др.)

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

Обратимся к 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

В моем же конкретном случае данный пример используется в самом шаблоне дизайна главной страницы сайта, так что контент-менеджер сразу может видеть конечный результат.

_____________________
Об авторе: Ахметов Олег. И ждать нам Джанго на третьем Питоне столько же, сколько шестой ПХП.
  • +2

1 комментарий

avatar
  • MpaK
  • 0
Да, силён JQeury, силен… Сравниваю свои опыты на Prototypejs делать сортировки, помню это было не так кузяво и просто, а тут одна строка и особенно мощь по связыванию по классу! Шикарно!

Напомнило немного старую идею фотоальбома у Лебедева, копал как-то его код, там чистый JS был…
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.