Post on 11-Jun-2015
description
Произвольная смена дизайнасистемного скроллбара
Кузнецов Дмитрий, разработчик интерфейсов, 2GIS Online
Структура доклада1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
2
Зачем кастомизировать скроллбар?• Видение дизайнера
• Стратегическая возможность
• Одностраничные приложения
3
4
5
6
1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
7
CSS• Только webkit
• Ограничения по расположению скроллбара
• Непростой синтаксис
::-webkit-scrollbar-button:horizontal:decrement:hover {
}
01.
02.
8
ECMAScript: эмуляция скролла• 40+ готовых решений
• Поддержка всех браузеров
• Подмена механизма скролла
• Трата ресурсов на эмуляцию
9
ECMAScript: только замена скроллбара• 3 готовых решения
• Большой размер + проблемы с производительностью
• Модификация DOM и манипуляция стилями
• Ограничения по положению скроллбара
10
1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
11
Расчитываем ширину нативногоскроллбара
DHTML: offsetWidth
Δ = offsetWidth - clientWidth
12
Прячем нативный рисуем свой
13
Максимально свободная кастомизация<div class="clipper">
<div class="scroller">
Content
</div>
</div>
01.
02.
03.
04.
05.
14
Минимальное вмешательство в DOM• Атрибуты data-*
• Самые необходимые инлайн-стили
• Максимизация управления UI через CSS
15
Максимальное использование CSS• Барон знает о:
DOM-элементах; CSS-классах; событиях; координатах
• Барон ничего не знает о:
opacity; linear-gradient; box-shadow; position
...и других свойствах CSS
16
Оптимизация кодаwidth = scroller.offsetWidth
height = scroller.offsetHeight
offset = ['offsetWidth', 'offsetHeight']
size = scroller[offset[direction]]
01.
02.
03.
04.
17
Независимость$: function(selector, context) {
return bonzo(qwery(selector, context));
},
event: function(elem, event, func, mode) {
if (mode == 'trigger') mode = 'fire';
bean[mode || 'on'](elem, event, func);
}
01.
02.
03.
04.
05.
06.
07.
18
Расширяемость плагинами$('.clipper').
baron().fix().pull().controls().test().
dispose();
01.
02.
03.
19
1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
20
Плагин fix
scroller: '.scroller',
bar: '.scroller__bar',
barOnCls: 'baron'
elements: '.header__title',
outside: 'header__title_state_fixed',
before: 'header__title_position_top',
after: 'header__title_position_bottom'
});
.header__title_state_fixed {
position: absolute;
z-index: 1;
}
The title was quite common
in most European countries
often in a slightly modified
form. In Italian, the word
used was Barone. The
corresponding title in the
Holy Roman Empire was
Freiherr.
21
html Sticky footer
$('.clipper_fix').baron({
}).fix({
CSS
Плагин controls
scroller: '.scroller',
bar: '.scroller__bar',
barOnCls: 'baron'
elements: '.header__title',
outside: 'header__title_state_fixed',
before: 'header__title_position_top',
after: 'header__title_position_bottom'
track: '.scroller__track',
forward: '.scroller__up',
backward: '.scroller__down'
});
22
CSS
html
$('.clipper_fix').baron({
}).fix({
}).controls({
Плагин test
scroller: '.scroller',
bar: '.scroller__bar',
barOnCls: 'baron'
elements: '.header__title',
outside: 'header__title_state_fixed',
before: 'header__title_position_top',
after: 'header__title_position_bottom'
track: '.scroller__track',
forward: '.scroller__up',
backward: '.scroller__down'
23
$('.clipper_fix').baron({
}).fix({
}).controls({
}).test()
Плагин pull
scroller: '.scroller',
bar: '.scroller__bar',
barOnCls: 'baron'
elements: '.header__title',
outside: 'header__title_state_fixed',
before: 'header__title_position_top',
after: 'header__title_position_bottom'
track: '.scroller__track',
forward: '.scroller__up',
backward: '.scroller__down'
24
}).test()
}).pull({
$('.clipper_fix').baron({
}).fix({
}).controls({
1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
25
Baron vs jScrollPane
Baron is a title of nobility. In the
kingdom of England, the medieval Latin
word baro, baronis was used originally
to denote a tenant-in-chief of the early
Norman kings who held his lands by the
feudal tenure of "barony" (in Latin per
baroniam), and who was entitled to
attend the Great Council which by the
13th century had developed into the
Parliament of England.
The title was quite common in most
European countries often in a slightly
modified form. In Italian, the word used
was Barone. The corresponding title in
the Holy Roman Empire was Freiherr.
The word baron comes from the Old French
baron, from a Late Latin baro "man;
servant, soldier, mercenary" (so used in
Baron is a title of nobility. In the
kingdom of England, the medieval
Latin word baro, baronis was used
originally to denote a tenant-in-
chief of the early Norman kings who
held his lands by the feudal tenure
of "barony" (in Latin per baroniam),
and who was entitled to attend the
Great Council which by the 13th
century had developed into the
Parliament of England.
The title was quite common in most
European countries often in a
slightly modified form. In Italian,
the word used was Barone. The
corresponding title in the Holy Roman
Empire was Freiherr.
The word baron comes from the Old
26
Baron
Etymology
Baron
Etymology
На самом деле нет
27
Что можно сравнитьBaron jScrollPane
Общий размер (gzip, kB) 2.11 + 4.47 4.52 + 30.1
DOM 0 +9
Расположение скроллбара Свободное Фиксированное
Механизм Нативный Эмуляция
Поддержка overflow: scroll все браузеры
Быстрый старт Сложнее Просто
28
1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
29
HTML<div class="clipper">
<div class="scroller">
Content
</div>
</div>
<div class="scroller__bar"></div>
01.
02.
03.
04.
05.
06.
30
CSS.clipper {
overflow: hidden;
position: relative;
}
.scroller {
overflow-y: scroll;
}
.scroller::-webkit-scrollbar {
width: 0;
}
.scroller__bar {
position: absolute;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
31
Код$('.profit').baron({
scroller: '.scroller',
bar: $('.profit .scroller__bar'),
barOnCls: 'baron'
});
01.
02.
03.
04.
05.
32
Profit
Baron is a title of nobility. In the kingdom of England, the
medieval Latin word baro, baronis was used originally to denote a
tenant-in-chief of the early Norman kings who held his lands by the
feudal tenure of "barony" (in Latin per baroniam), and who was
entitled to attend the Great Council which by the 13th century had
developed into the Parliament of England.
The title was quite common in most European countries often in a
slightly modified form. In Italian, the word used was Barone. The
corresponding title in the Holy Roman Empire was Freiherr.
The word baron comes from the Old French baron, from a Late Latin
baro "man; servant, soldier, mercenary" (so used in Salic Law;
Alemannic Law has barus in the same sense). Isidore in the 7th
century thought the word was from Greek βαρύς "heavy" (because ofthe "heavy work" done by mercenaries), but the word is presumably of
Old Frankish origin, cognate with Old English beorn meaning
"warrior, nobleman"). Cornutus in the first century already reports
a word barones which he took to be of Gaulish origin. He glosses it
as meaning servos militum and explains it as meaning "stupid", by
33
Baron
Etymology
Итого• Свободная CSS-кастомизация скроллбара
• Автоматическая поддержка всего где есть overflow: scroll
• Fallback - нативный скроллбар
• Размер с зависимостями: от 6 кБ в gzip
• Система плагинов + 4 плагина в коробке
34
Работает на API 2GISЛицензионное соглашение
Видимые на карте рейтинг Открыто
Учителей, 6Пив & Ко, сеть магазинов разливного пива
34 филиала
8 отзывов
Серафимы Дерябиной, 43аЖивое Разливное, магазин разливного пива
1 отзыв
Луначарского, 81Пивная лавка, сеть магазинов
10 филиалов
3 отзыва
Ляпустина, 8Beerlife, сеть магазинов живого пива
6 филиалов
3 отзыва
Пальмиро Тольятти, 19Пивная коллекция, магазин разливного пива
2 филиала
4 отзыва
Сыромолотова, 16BeerHall, сеть магазинов разливного пива
15 филиалов
Организации 506 Расширенный поиск
Справочник Проезд
пиво
35
В планах• Плагин для мега-быстрого старта
• Плагин для ликвидации зависимостей
• Ваши идеи?
• Автоматическое тестирование
36
Автотесты (Phantom JS)
37
• Прогон всех тестов при коммите
• Отнимает 3-5 секунд + 5 минут просмотра тестов в реальных
браузерах
• Невозможно просмотреть или забыть тест
About
Кузнецов Дмитрий, разработчик интерфейсов 2GIS Online
dm.kuznecov@2gis.ru
github.com/Diokuz/baron
habrahabr.ru/company/2gis
38