- Обсуждение серии статей про виджеты.
- Range slider, демо. Вдохновение.
- Обсуждение шаблонизатора swig
Задача: сверстать меню кафе и сделать динамическую фильтрацию списка блюд по диапазону цены. Для этого взять данные, скрестить их с шаблонизатором, дописать код слайдеру и собрать демо.
- Возьмите список блюд и цены отсюда. Придумайте способ преобразовать его в json без повторяющихся действий руками. Если нужно, используйте электронные таблицы, экспорт в CSV, множественные курсоры в текстовых редакторах.
- Сверстайте одну строку меню.
- С помощью шаблонизатора swig превратите вёрстку в шаблон. Отрисуйте на странице json-данные через шаблон.
- Возьмите заготовку range slider за основу. Измените код так, чтобы функция value() возвращала текущее значение интервала.
- Добавьте на страницу кнопку "Фильтровать". При нажатии на эту кнопку считывается значение слайдера, по нему фильтруется массив данных, отфильтрованный json-список рендерится в поле меню.
- Реализуйте способ пользователю передавать формат надписи над лапками слайдера. Например: число с двумя знаками после запятой, число со знаком %/$.
- Добавьте пользователю возможность передать колбек, который вызывается при изменении значения слайдера. В колбеке сделайте то же, что происходит при нажатии кнопки "Фильтровать".
Выложите решение на JsFiddle, CodePen или Github Pages. Ссылку добавьте на вики-страницу для решений.
Выберите один виджет и реализуйте его так, как считаете нужным. Выложите его на CodePen. Ссылку добавьте на вики-страницу для решений.
Навигация
- Menu/dropdown
- Tabs
- Accordion
- Button group / pagination
- Image slider
- Tree (folders)
Компоненты форм
- Selectbox
- Multiple selection
- Autocomplete
- Range slider
- Slider
- Star rating
- Datepicker
- Colorpicker
Датчики и уведомления
- Alert
- Popup
- Progress bar
- Tooltip
- Badges
- Emmet - плагин для быстрого набора HTML и CSS: demo, cheat sheet
- Создание графических компонентов (виджетов)
- 10 правил хороших форм