b-form-button.css и b-form-button.js                       История одной кнопки                       Елена Глухова       ...
2Tuesday, April 3, 12
3                 Цветовая адаптацияTuesday, April 3, 12
4Tuesday, April 3, 12
Что и Зачем?Tuesday, April 3, 12
6                 Все сервисыTuesday, April 3, 12
6                 Все сервисы                     браузерыTuesday, April 3, 12
6                 Все сервисы                     операционные системы                     браузерыTuesday, April 3, 12
7               БраузерыTuesday, April 3, 12
8                 Цветовая адаптацияTuesday, April 3, 12
8                 Цветовая адаптацияTuesday, April 3, 12
9                 Все состоянияTuesday, April 3, 12
9                 Все состоянияTuesday, April 3, 12
9                 Все состоянияTuesday, April 3, 12
9                 Все состоянияTuesday, April 3, 12
9                 Все состоянияTuesday, April 3, 12
10                Кнопка в тексте                Скачать Яндекс.НавигаторTuesday, April 3, 12
11                ТемыTuesday, April 3, 12
АнатомияTuesday, April 3, 12
13                Элемент формыTuesday, April 3, 12
14                  <span>                          <input type=”submit”/>                  </span>                    <sp...
15                Ссылка                Скачать Яндекс.НавигаторTuesday, April 3, 12
16                  <a href=”ya.ru”>                       ...                  </a>                  <!-- без <input/> вн...
Верстаем по БЭМ!Tuesday, April 3, 12
18                Что такое БЭМ?                       bit.ly/vXZRjxTuesday, April 3, 12
19                Репозиторий с кнопкой на                       bit.ly/HfIAHcTuesday, April 3, 12
20                Кнопка это блок                  <span class=”b-form-button”>                     ...                  <...
21                Блок на файловой системе                  b-form-button/                     b-form-button.cssTuesday, A...
22                Элемент формыTuesday, April 3, 12
23                Элемент input                  <span class=”b-form-button”>                       <span class=”b-form-bu...
24                  b-form-button/                    b-form-button.css                    __input/                       ...
25                  .b-form-button__input                  {                     opacity: 0;                     ...      ...
26Tuesday, April 3, 12
27                Идея в картинкахTuesday, April 3, 12
27Tuesday, April 3, 12
27Tuesday, April 3, 12
27Tuesday, April 3, 12
27Tuesday, April 3, 12
27Tuesday, April 3, 12
27Tuesday, April 3, 12
27Tuesday, April 3, 12
28                Режем на кусочкиTuesday, April 3, 12
29                 Левая частьTuesday, April 3, 12
30           <span class=”b-form-button”>              <span class=”b-form-button__left”>              </span>            ...
31                  .b-form-button__left                  {                      ...                       background: no-...
32                Правая частьTuesday, April 3, 12
33                  .b-form-button                  {                       ...                    /* background-image зад...
34                СерединаTuesday, April 3, 12
35                  <span class=”b-form-button”>                      ...                     <span class=”b-form-button__...
36                  .b-form-button__content                  {                      ...                  /* background-ima...
37                       Размер имеет значениеTuesday, April 3, 12
38                Размер — это модификатор                  <span class=”b-form-button                               b-for...
39                  b-form-button/                     b-form-button.css                     _size/                       ...
40             .b-form-button_size_m {                 height: 26px;             }             .b-form-button_size_m .b-fo...
41                Тема — это модификатор                  <span class=”b-form-button                               b-form-...
42                  b-form-button/                     _theme/                        b-form-button_theme_grey-m.css      ...
43              .b-form-button_theme_grey-m,              .b-form-button_theme_grey-m .b-form-button__left,              ....
44                Новая темаTuesday, April 3, 12
45                Состояния — это модификаторы                  <span class=”b-form-button                               b...
45                Состояния — это модификаторы                  <span class=”b-form-button                               b...
45                Состояния — это модификаторы                  <span class=”b-form-button                               b...
46                 Несколько состояний одновременноTuesday, April 3, 12
46                 В фокусеTuesday, April 3, 12
47                 В фокусе и наведеннаяTuesday, April 3, 12
48                  .b-form-button_focused_yes                  {                      background-position: 100% -570px;  ...
49                  b-form-button/                     _theme/                     _size/                     _hovered/   ...
50                 Нажатая                           _pressed_yesTuesday, April 3, 12
51             <span class=”b-form-button ...”>                 ...                <span class=”b-form-button__content”>  ...
52                  .b-form-button_pressed_yes                  {                      background-position: 100% -399px;  ...
53                 РезультатTuesday, April 3, 12
b-form-button.jsTuesday, April 3, 12
55               Требования к функциональности                Различные состояния кнопки                       — фокус и н...
56               Как браузерный контролTuesday, April 3, 12
56               Как браузерный контрол                — управление с клавиатурыTuesday, April 3, 12
56               Как браузерный контрол                — управление с клавиатуры                — событияTuesday, April 3,...
56               Как браузерный контрол                — управление с клавиатуры                — события                —...
57                  b-form-button/                      ...                      b-form-button.cssTuesday, April 3, 12
57                  b-form-button/                      ...                      b-form-button.css                      b-...
58                Документация к блоку i-bem                       bit.ly/HbUcZTTuesday, April 3, 12
59                Мастер-классы про JavaScript                       bit.ly/HKyEWa                       bit.ly/nkQbWFTues...
Особенный JavaScriptTuesday, April 3, 12
61               Особенный JavaScriptTuesday, April 3, 12
61               Особенный JavaScript                ООП-представление                       — class & instanceTuesday, Ap...
61               Особенный JavaScript                ООП-представление                       — class & instance           ...
62               Особенный JavaScriptTuesday, April 3, 12
62               Особенный JavaScript                Блок — это                       — BEM-объект                        ...
62               Особенный JavaScript                Блок — это                       — BEM-объект                        ...
Декларативный стильTuesday, April 3, 12
64                b-form-button.jsTuesday, April 3, 12
64                b-form-button.js                  BEM.DOM.decl(b-form-button, {                        /* Динамические с...
64                b-form-button.js                  BEM.DOM.decl(b-form-button, {                        /* Динамические с...
На языке состоянийTuesday, April 3, 12
На языке модификаторовTuesday, April 3, 12
67Tuesday, April 3, 12
68Tuesday, April 3, 12
69Tuesday, April 3, 12
70                       JavaScriptTuesday, April 3, 12
71                  BEM.DOM.decl(b-form-button, {                       onSetMod : {                            mod : func...
72                  BEM.DOM.decl(b-form-button, {                       onSetMod : {                           mod : {    ...
focusedTuesday, April 3, 12
74                 В фокусе                            <input type=”submit”/>Tuesday, April 3, 12
75               focused: ‘yes’Tuesday, April 3, 12
75               focused: ‘yes’                — Связь с браузерным контролом                  input — в фокусеTuesday, Ap...
75               focused: ‘yes’                — Связь с браузерным контролом                  input — в фокусе           ...
76                  BEM.DOM.decl(b-form-button, {                      onSetMod : {Tuesday, April 3, 12
76                  BEM.DOM.decl(b-form-button, {                      onSetMod : {                       focused : {     ...
76                  BEM.DOM.decl(b-form-button, {                      onSetMod : {                       focused : {     ...
77                  /**                   * @protected                   * @param {Object} [elem] вложенный элемент       ...
78                  BEM.DOM.decl(b-form-button, {                      onSetMod : {                       focused : {     ...
79                  /**                   * @protected                   * @param {jQuery|String} [elem] элемент          ...
80                 В фокусе                            <input type=”submit”/>Tuesday, April 3, 12
81                  BEM.DOM.decl(b-form-button, {                      onSetMod : {                       focused : {     ...
82                  /**                   * @protected                   * @param {String} names имя (или через пробел    ...
83                  BEM.DOM.decl(b-form-button, {                      onSetMod : {                       focused : {     ...
disabledTuesday, April 3, 12
85                 Неактивная                              <input type=”submit”/>Tuesday, April 3, 12
86               disabled: ‘yes’Tuesday, April 3, 12
86               disabled: ‘yes’                — Отсутствие реакцииTuesday, April 3, 12
86               disabled: ‘yes’                — Отсутствие реакции                — Связь с браузерным контролом        ...
87                  BEM.DOM.decl(b-form-button, { onSetMod : {                  disabled : function() {                   ...
88Tuesday, April 3, 12
88                  BEM.DOM.decl(b-form-button, { onSetMod : {Tuesday, April 3, 12
88                  BEM.DOM.decl(b-form-button, { onSetMod : {                  disabled : function() {                   ...
88                  BEM.DOM.decl(b-form-button, { onSetMod : {                  disabled : function() {                   ...
89                 this.domElemTuesday, April 3, 12
89                 this.domElemTuesday, April 3, 12
90                  BEM.DOM.decl(b-form-button, {                       onSetMod : { ... },                       isDisabl...
pressed и hoveredTuesday, April 3, 12
92                 Наведенная и нажатаяTuesday, April 3, 12
93               hovered и pressedTuesday, April 3, 12
93               hovered и pressed                — С событиямиTuesday, April 3, 12
93               hovered и pressed                — С событиями                — Не для неактивной кнопкиTuesday, April 3,...
94                  BEM.DOM.decl(b-form-button, { onSetMod : {                  pressed : function() {                    ...
95                  /**                   * @protected                   * @param {String} e имя события                  ...
96Tuesday, April 3, 12
97                  BEM.DOM.decl(b-form-button, { onSetMod : {                  hovered : {                        : funct...
98                  /**                   * @protected                   * @param {Object} [elem] вложенный элемент       ...
99                  BEM.DOM.decl(b-form-button, { onSetMod : {                  * : function(modName) {                   ...
liveTuesday, April 3, 12
live-событияTuesday, April 3, 12
102                jQuery.live()                       bit.ly/6B9eykTuesday, April 3, 12
103                 Event delegationTuesday, April 3, 12
103                 Event delegationTuesday, April 3, 12
103                 Event delegationTuesday, April 3, 12
103                 Event delegation                                    handlerTuesday, April 3, 12
104                 Event delegationTuesday, April 3, 12
104                 Event delegation                                    handlerTuesday, April 3, 12
105Tuesday, April 3, 12
105Tuesday, April 3, 12
106Tuesday, April 3, 12
106Tuesday, April 3, 12
live-инициализацияTuesday, April 3, 12
108                  BEM.DOM.decl(b-form-button, { ... },                  {                       live: function() {     ...
109                  BEM.DOM.decl(b-form-button, { ... },                  {                       live: function() {     ...
110                  /**                   * @static                   * @protected                   * @param {String|Obj...
111                  BEM.DOM.decl(b-form-button, { ... },                  {                      live: function() {      ...
112                  var eventsToMods = {                       mouseover   :   {   name   :   hovered, val : yes },      ...
113Tuesday, April 3, 12
114                Репозиторий с кнопкой на                       bit.ly/HfIAHcTuesday, April 3, 12
Реализация CSS3Tuesday, April 3, 12
116                 Все меняетсяTuesday, April 3, 12
116Tuesday, April 3, 12
116Tuesday, April 3, 12
116Tuesday, April 3, 12
117                Модификатор _type                  b-form-button/                     _type/Tuesday, April 3, 12
117                Модификатор _type                  b-form-button/                     _type/                         b-...
117                Модификатор _type                  b-form-button/                     _type/                         b-...
118                b-form-button_type_complex.css          .b-form-button_type_complex.b-form-button_hovered_yes          ...
119                b-form-button.css                  .b-form-button                  {                      position: rel...
120                Меньше разметкиTuesday, April 3, 12
120                   <span class=”b-form-button                                b-form-button_type_normal”>               ...
120                   <span class=”b-form-button                                b-form-button_type_normal”>               ...
120                   <span class=”b-form-button                                b-form-button_type_normal”>               ...
121                b-form-button_type_normal.cssTuesday, April 3, 12
121      .b-form-button_type_normal      {          border-radius: 3px;          -moz-border-radius: 3px;          -webkit...
122                Тема для css3                  b-form-button/                     _theme/                        b-form...
123Tuesday, April 3, 12
124                b-form-button_theme_normal-grey.cssTuesday, April 3, 12
124                  .b-form-button_theme_normal-grey                  {                      color: #000;                ...
Что не так?Tuesday, April 3, 12
126               Что не так?!Tuesday, April 3, 12
126Tuesday, April 3, 12
126                — не пиксель в пиксельTuesday, April 3, 12
126                — не пиксель в пиксель                — новая темаTuesday, April 3, 12
127                Новая темаTuesday, April 3, 12
128               Что сделалиTuesday, April 3, 12
128               Что сделали                — сверстали в картинкахTuesday, April 3, 12
128               Что сделали                — сверстали в картинках                — написали JavaScriptTuesday, April 3,...
128               Что сделали                — сверстали в картинках                — написали JavaScript                —...
ВыводыTuesday, April 3, 12
130               CSS3Tuesday, April 3, 12
130               CSS3                — масштабируемостьTuesday, April 3, 12
130               CSS3                — масштабируемость                — меньше разметкиTuesday, April 3, 12
130               CSS3                — масштабируемость                — меньше разметки                — минус запросTue...
131               PNGTuesday, April 3, 12
131               PNG                — пиксель в пиксельTuesday, April 3, 12
131               PNG                — пиксель в пиксель                — создание темTuesday, April 3, 12
131               PNG                — пиксель в пиксель                — создание тем                — рендерингTuesday, ...
132                       Three years remainingTuesday, April 3, 12
Варвара Степанова                       toivonen@yandex-team.ru                       Елена Глухова                       ...
Upcoming SlideShare
Loading in...5
×

История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)

1,632

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,632
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

История одной кнопки или b-form-button.css и b-form-button.js (Елена Глухова, Варвара Степанова)

  1. 1. b-form-button.css и b-form-button.js История одной кнопки Елена Глухова #БЭМ Варвара Степанова РИТ-2012, Москва, 2 апреля 2012 годаTuesday, April 3, 12
  2. 2. 2Tuesday, April 3, 12
  3. 3. 3 Цветовая адаптацияTuesday, April 3, 12
  4. 4. 4Tuesday, April 3, 12
  5. 5. Что и Зачем?Tuesday, April 3, 12
  6. 6. 6 Все сервисыTuesday, April 3, 12
  7. 7. 6 Все сервисы браузерыTuesday, April 3, 12
  8. 8. 6 Все сервисы операционные системы браузерыTuesday, April 3, 12
  9. 9. 7 БраузерыTuesday, April 3, 12
  10. 10. 8 Цветовая адаптацияTuesday, April 3, 12
  11. 11. 8 Цветовая адаптацияTuesday, April 3, 12
  12. 12. 9 Все состоянияTuesday, April 3, 12
  13. 13. 9 Все состоянияTuesday, April 3, 12
  14. 14. 9 Все состоянияTuesday, April 3, 12
  15. 15. 9 Все состоянияTuesday, April 3, 12
  16. 16. 9 Все состоянияTuesday, April 3, 12
  17. 17. 10 Кнопка в тексте Скачать Яндекс.НавигаторTuesday, April 3, 12
  18. 18. 11 ТемыTuesday, April 3, 12
  19. 19. АнатомияTuesday, April 3, 12
  20. 20. 13 Элемент формыTuesday, April 3, 12
  21. 21. 14 <span> <input type=”submit”/> </span> <span class=”b-form-button”> ... <input class=”b-form-button__input” type=”submit” value=””/> </span> или <span> <input type=”button”/> </span>Tuesday, April 3, 12
  22. 22. 15 Ссылка Скачать Яндекс.НавигаторTuesday, April 3, 12
  23. 23. 16 <a href=”ya.ru”> ... </a> <!-- без <input/> внутри -->Tuesday, April 3, 12
  24. 24. Верстаем по БЭМ!Tuesday, April 3, 12
  25. 25. 18 Что такое БЭМ? bit.ly/vXZRjxTuesday, April 3, 12
  26. 26. 19 Репозиторий с кнопкой на bit.ly/HfIAHcTuesday, April 3, 12
  27. 27. 20 Кнопка это блок <span class=”b-form-button”> ... </span>Tuesday, April 3, 12
  28. 28. 21 Блок на файловой системе b-form-button/ b-form-button.cssTuesday, April 3, 12
  29. 29. 22 Элемент формыTuesday, April 3, 12
  30. 30. 23 Элемент input <span class=”b-form-button”> <span class=”b-form-button”> ... ... <input class=”b-form-button__input” type=”submit” value=””/> <input class=”b-form-button__input” </span> type=”submit” value=””/> </span>Tuesday, April 3, 12
  31. 31. 24 b-form-button/ b-form-button.css __input/ b-form-button__input.cssTuesday, April 3, 12
  32. 32. 25 .b-form-button__input { opacity: 0; ... /* визуально прячем инпут и натягиваем его поверх всей кнопки */ }Tuesday, April 3, 12
  33. 33. 26Tuesday, April 3, 12
  34. 34. 27 Идея в картинкахTuesday, April 3, 12
  35. 35. 27Tuesday, April 3, 12
  36. 36. 27Tuesday, April 3, 12
  37. 37. 27Tuesday, April 3, 12
  38. 38. 27Tuesday, April 3, 12
  39. 39. 27Tuesday, April 3, 12
  40. 40. 27Tuesday, April 3, 12
  41. 41. 27Tuesday, April 3, 12
  42. 42. 28 Режем на кусочкиTuesday, April 3, 12
  43. 43. 29 Левая частьTuesday, April 3, 12
  44. 44. 30 <span class=”b-form-button”> <span class=”b-form-button__left”> </span> ... </span>Tuesday, April 3, 12
  45. 45. 31 .b-form-button__left { ... background: no-repeat 0 2px; }Tuesday, April 3, 12
  46. 46. 32 Правая частьTuesday, April 3, 12
  47. 47. 33 .b-form-button { ... /* background-image задаётся в _theme */ background-repeat: no-repeat; background-position: 100% -55px; }Tuesday, April 3, 12
  48. 48. 34 СерединаTuesday, April 3, 12
  49. 49. 35 <span class=”b-form-button”> ... <span class=”b-form-button__content”> Универсальная кнопка </span> ... </span>Tuesday, April 3, 12
  50. 50. 36 .b-form-button__content { ... /* background-image задаётся в _theme */ background: repeat-x 0 -112px; }Tuesday, April 3, 12
  51. 51. 37 Размер имеет значениеTuesday, April 3, 12
  52. 52. 38 Размер — это модификатор <span class=”b-form-button b-form-button_size_m”> ... </span>Tuesday, April 3, 12
  53. 53. 39 b-form-button/ b-form-button.css _size/ b-form-button_size_s.css b-form-button_size_m.css b-form-button_size_l.css b-form-button_size_xl.cssTuesday, April 3, 12
  54. 54. 40 .b-form-button_size_m { height: 26px; } .b-form-button_size_m .b-form-button__content { font-size: 13px; padding: 0 10px; line-height: 25px; }Tuesday, April 3, 12
  55. 55. 41 Тема — это модификатор <span class=”b-form-button b-form-button_size_m b-form-button_theme_grey-m”> ... </span>Tuesday, April 3, 12
  56. 56. 42 b-form-button/ _theme/ b-form-button_theme_grey-m.css b-form-button_theme_grey-m.png b-form-button_theme_grey-l.css b-form-button_theme_grey-l.png ...Tuesday, April 3, 12
  57. 57. 43 .b-form-button_theme_grey-m, .b-form-button_theme_grey-m .b-form-button__left, .b-form-button_theme_grey-m .b-form-button__content { color: #000; background-image: url(b-form-button_theme_grey-m.png); }Tuesday, April 3, 12
  58. 58. 44 Новая темаTuesday, April 3, 12
  59. 59. 45 Состояния — это модификаторы <span class=”b-form-button b-form-button_size_m b-form-button_theme_grey-mTuesday, April 3, 12
  60. 60. 45 Состояния — это модификаторы <span class=”b-form-button b-form-button_size_m b-form-button_theme_grey-m b-form-button_focused_yes b-form-button_hovered_yes”>Tuesday, April 3, 12
  61. 61. 45 Состояния — это модификаторы <span class=”b-form-button b-form-button_size_m b-form-button_theme_grey-m b-form-button_focused_yes b-form-button_hovered_yes”> ... Важно: Состояния переключает JavaScriptTuesday, April 3, 12
  62. 62. 46 Несколько состояний одновременноTuesday, April 3, 12
  63. 63. 46 В фокусеTuesday, April 3, 12
  64. 64. 47 В фокусе и наведеннаяTuesday, April 3, 12
  65. 65. 48 .b-form-button_focused_yes { background-position: 100% -570px; } .b-form-button_focused_yes .b-form-button__left { background-position: 0 -513px; } ...Tuesday, April 3, 12
  66. 66. 49 b-form-button/ _theme/ _size/ _hovered/ _focused/ _pressed/ _disabled/ ...Tuesday, April 3, 12
  67. 67. 50 Нажатая _pressed_yesTuesday, April 3, 12
  68. 68. 51 <span class=”b-form-button ...”> ... <span class=”b-form-button__content”> <span class=”b-form-button__text”> Универсальная кнопка </span> </span> ... </span>Tuesday, April 3, 12
  69. 69. 52 .b-form-button_pressed_yes { background-position: 100% -399px; } ... .b-form-button_pressed_yes .b-form-button__text { padding-top: 1px; }Tuesday, April 3, 12
  70. 70. 53 РезультатTuesday, April 3, 12
  71. 71. b-form-button.jsTuesday, April 3, 12
  72. 72. 55 Требования к функциональности Различные состояния кнопки — фокус и наведение мыши — нажатость — неактивностьTuesday, April 3, 12
  73. 73. 56 Как браузерный контролTuesday, April 3, 12
  74. 74. 56 Как браузерный контрол — управление с клавиатурыTuesday, April 3, 12
  75. 75. 56 Как браузерный контрол — управление с клавиатуры — событияTuesday, April 3, 12
  76. 76. 56 Как браузерный контрол — управление с клавиатуры — события — неактивнаяTuesday, April 3, 12
  77. 77. 57 b-form-button/ ... b-form-button.cssTuesday, April 3, 12
  78. 78. 57 b-form-button/ ... b-form-button.css b-form-button.jsTuesday, April 3, 12
  79. 79. 58 Документация к блоку i-bem bit.ly/HbUcZTTuesday, April 3, 12
  80. 80. 59 Мастер-классы про JavaScript bit.ly/HKyEWa bit.ly/nkQbWFTuesday, April 3, 12
  81. 81. Особенный JavaScriptTuesday, April 3, 12
  82. 82. 61 Особенный JavaScriptTuesday, April 3, 12
  83. 83. 61 Особенный JavaScript ООП-представление — class & instanceTuesday, April 3, 12
  84. 84. 61 Особенный JavaScript ООП-представление — class & instance Предметная область БЭМ — оперируем БЭМ-сущностями — не работаем с CSS-классами и DOM-деревомTuesday, April 3, 12
  85. 85. 62 Особенный JavaScriptTuesday, April 3, 12
  86. 86. 62 Особенный JavaScript Блок — это — BEM-объект – DOM nodeTuesday, April 3, 12
  87. 87. 62 Особенный JavaScript Блок — это — BEM-объект – DOM node Хелперы — для работы с модификаторами — для работы со структурой блока — для работы с событиямиTuesday, April 3, 12
  88. 88. Декларативный стильTuesday, April 3, 12
  89. 89. 64 b-form-button.jsTuesday, April 3, 12
  90. 90. 64 b-form-button.js BEM.DOM.decl(b-form-button, { /* Динамические свойства и методы */ },{Tuesday, April 3, 12
  91. 91. 64 b-form-button.js BEM.DOM.decl(b-form-button, { /* Динамические свойства и методы */ },{ /* Статические свойства и методы */ })Tuesday, April 3, 12
  92. 92. На языке состоянийTuesday, April 3, 12
  93. 93. На языке модификаторовTuesday, April 3, 12
  94. 94. 67Tuesday, April 3, 12
  95. 95. 68Tuesday, April 3, 12
  96. 96. 69Tuesday, April 3, 12
  97. 97. 70 JavaScriptTuesday, April 3, 12
  98. 98. 71 BEM.DOM.decl(b-form-button, { onSetMod : { mod : function() { // Реакция на установку // модификатора } }Tuesday, April 3, 12
  99. 99. 72 BEM.DOM.decl(b-form-button, { onSetMod : { mod : { val : function() { // Реакция на установку // значения модификатора } } }Tuesday, April 3, 12
  100. 100. focusedTuesday, April 3, 12
  101. 101. 74 В фокусе <input type=”submit”/>Tuesday, April 3, 12
  102. 102. 75 focused: ‘yes’Tuesday, April 3, 12
  103. 103. 75 focused: ‘yes’ — Связь с браузерным контролом input — в фокусеTuesday, April 3, 12
  104. 104. 75 focused: ‘yes’ — Связь с браузерным контролом input — в фокусе — Неактивная кнопка — без фокусаTuesday, April 3, 12
  105. 105. 76 BEM.DOM.decl(b-form-button, { onSetMod : {Tuesday, April 3, 12
  106. 106. 76 BEM.DOM.decl(b-form-button, { onSetMod : { focused : { yes : function() {Tuesday, April 3, 12
  107. 107. 76 BEM.DOM.decl(b-form-button, { onSetMod : { focused : { yes : function() { if(this.hasMod(disabled, yes)) return false; } }Tuesday, April 3, 12
  108. 108. 77 /** * @protected * @param {Object} [elem] вложенный элемент * @param {String} modName имя модификатора * @param {String} [modVal] значение модификатора * @returns {Boolean} */ hasMod : function( elem, modName, modVal)Tuesday, April 3, 12
  109. 109. 78 BEM.DOM.decl(b-form-button, { onSetMod : { focused : { yes : function() { ... this .bindTo(keydown, this._onKeyDown)Tuesday, April 3, 12
  110. 110. 79 /** * @protected * @param {jQuery|String} [elem] элемент * @param {String} event имя события * @param {Function} fn функция-обработчик, будет выполнена в контексте блока * @returns {BEM} */ bindTo : function(elem, event, fn)Tuesday, April 3, 12
  111. 111. 80 В фокусе <input type=”submit”/>Tuesday, April 3, 12
  112. 112. 81 BEM.DOM.decl(b-form-button, { onSetMod : { focused : { yes : function() { ... this .bindTo(keydown, this._onKeyDown) .elem(input).focus();Tuesday, April 3, 12
  113. 113. 82 /** * @protected * @param {String} names имя (или через пробел имена) вложенных элементов * @param {String} [modName] имя модификатора * @param {String} [modVal] значение модификатора * @returns {jQuery} DOM-элементы */ elem : function( names, modName, modVal)Tuesday, April 3, 12
  114. 114. 83 BEM.DOM.decl(b-form-button, { onSetMod : { focused : { yes: ..., : function() { this .unbindFrom(keydown) .elem(input).blur();Tuesday, April 3, 12
  115. 115. disabledTuesday, April 3, 12
  116. 116. 85 Неактивная <input type=”submit”/>Tuesday, April 3, 12
  117. 117. 86 disabled: ‘yes’Tuesday, April 3, 12
  118. 118. 86 disabled: ‘yes’ — Отсутствие реакцииTuesday, April 3, 12
  119. 119. 86 disabled: ‘yes’ — Отсутствие реакции — Связь с браузерным контролом input — disabledTuesday, April 3, 12
  120. 120. 87 BEM.DOM.decl(b-form-button, { onSetMod : { disabled : function() { var disable = modVal == yes; this.elem(input).attr(disabled, disable);Tuesday, April 3, 12
  121. 121. 88Tuesday, April 3, 12
  122. 122. 88 BEM.DOM.decl(b-form-button, { onSetMod : {Tuesday, April 3, 12
  123. 123. 88 BEM.DOM.decl(b-form-button, { onSetMod : { disabled : function() { ... this._href && (disable? this.domElem.removeAttr(href) : this.domElem.attr(href, this._href));Tuesday, April 3, 12
  124. 124. 88 BEM.DOM.decl(b-form-button, { onSetMod : { disabled : function() { ... this._href && (disable? this.domElem.removeAttr(href) : this.domElem.attr(href, this._href)); disable && this.domElem.keyup();Tuesday, April 3, 12
  125. 125. 89 this.domElemTuesday, April 3, 12
  126. 126. 89 this.domElemTuesday, April 3, 12
  127. 127. 90 BEM.DOM.decl(b-form-button, { onSetMod : { ... }, isDisabled : function() { return this.hasMod(disabled, yes); } })Tuesday, April 3, 12
  128. 128. pressed и hoveredTuesday, April 3, 12
  129. 129. 92 Наведенная и нажатаяTuesday, April 3, 12
  130. 130. 93 hovered и pressedTuesday, April 3, 12
  131. 131. 93 hovered и pressed — С событиямиTuesday, April 3, 12
  132. 132. 93 hovered и pressed — С событиями — Не для неактивной кнопкиTuesday, April 3, 12
  133. 133. 94 BEM.DOM.decl(b-form-button, { onSetMod : { pressed : function() { this.isDisabled() || this.trigger(modVal == yes? press : release);Tuesday, April 3, 12
  134. 134. 95 /** * @protected * @param {String} e имя события * @param {Object} [data] дополнительные данные * @returns {BEM} */ trigger : function(e, data)Tuesday, April 3, 12
  135. 135. 96Tuesday, April 3, 12
  136. 136. 97 BEM.DOM.decl(b-form-button, { onSetMod : { hovered : { : function() { this.delMod(pressed); }Tuesday, April 3, 12
  137. 137. 98 /** * @protected * @param {Object} [elem] вложенный элемент * @param {String} modName имя модификатора * @returns {BEM} */ delMod : function(elem, modName)Tuesday, April 3, 12
  138. 138. 99 BEM.DOM.decl(b-form-button, { onSetMod : { * : function(modName) { if(this.isDisabled() && hovered pressed.indexOf(modName) > -1) return false; }Tuesday, April 3, 12
  139. 139. liveTuesday, April 3, 12
  140. 140. live-событияTuesday, April 3, 12
  141. 141. 102 jQuery.live() bit.ly/6B9eykTuesday, April 3, 12
  142. 142. 103 Event delegationTuesday, April 3, 12
  143. 143. 103 Event delegationTuesday, April 3, 12
  144. 144. 103 Event delegationTuesday, April 3, 12
  145. 145. 103 Event delegation handlerTuesday, April 3, 12
  146. 146. 104 Event delegationTuesday, April 3, 12
  147. 147. 104 Event delegation handlerTuesday, April 3, 12
  148. 148. 105Tuesday, April 3, 12
  149. 149. 105Tuesday, April 3, 12
  150. 150. 106Tuesday, April 3, 12
  151. 151. 106Tuesday, April 3, 12
  152. 152. live-инициализацияTuesday, April 3, 12
  153. 153. 108 BEM.DOM.decl(b-form-button, { ... }, { live: function() { /* методы инициализации */ } }Tuesday, April 3, 12
  154. 154. 109 BEM.DOM.decl(b-form-button, { ... }, { live: function() { this .liveBindTo(leftclick, function(e) { this._onClick(e); }) } }Tuesday, April 3, 12
  155. 155. 110 /** * @static * @protected * @param {String|Object} [to] описание * @param {String} event имя события * @param {Function} callback обработчик */ liveBindTo : function(to, event, callback, invokeOnInit)Tuesday, April 3, 12
  156. 156. 111 BEM.DOM.decl(b-form-button, { ... }, { live: function() { this .liveBindTo( mouseover mouseout ... focusin ..., function(e) { var mod = eventsToMods[e.type]; this.setMod(mod.name, mod.val || ); }Tuesday, April 3, 12
  157. 157. 112 var eventsToMods = { mouseover : { name : hovered, val : yes }, mouseout : { name : hovered }, mousedown : { name : pressed, val : yes }, mouseup : { name : pressed }, focusin : { name : focused, val : yes }, focusout : { name : focused } };Tuesday, April 3, 12
  158. 158. 113Tuesday, April 3, 12
  159. 159. 114 Репозиторий с кнопкой на bit.ly/HfIAHcTuesday, April 3, 12
  160. 160. Реализация CSS3Tuesday, April 3, 12
  161. 161. 116 Все меняетсяTuesday, April 3, 12
  162. 162. 116Tuesday, April 3, 12
  163. 163. 116Tuesday, April 3, 12
  164. 164. 116Tuesday, April 3, 12
  165. 165. 117 Модификатор _type b-form-button/ _type/Tuesday, April 3, 12
  166. 166. 117 Модификатор _type b-form-button/ _type/ b-form-button_type_complex.cssTuesday, April 3, 12
  167. 167. 117 Модификатор _type b-form-button/ _type/ b-form-button_type_complex.css b-form-button_type_normal.cssTuesday, April 3, 12
  168. 168. 118 b-form-button_type_complex.css .b-form-button_type_complex.b-form-button_hovered_yes { background-position: ... } $block_type_complex.$block_hovered_yes .$block__left { background-position: ... } ...Tuesday, April 3, 12
  169. 169. 119 b-form-button.css .b-form-button { position: relative; display: inline-block; outline: 0; cursor: default; ...Tuesday, April 3, 12
  170. 170. 120 Меньше разметкиTuesday, April 3, 12
  171. 171. 120 <span class=”b-form-button b-form-button_type_normal”> </span>Tuesday, April 3, 12
  172. 172. 120 <span class=”b-form-button b-form-button_type_normal”> <span class=”b-form-button__text”> Кнопка на css3 </span> </span>Tuesday, April 3, 12
  173. 173. 120 <span class=”b-form-button b-form-button_type_normal”> <span class=”b-form-button__text”> Кнопка на css3 </span> <input class=”b-form-button__input”/> </span>Tuesday, April 3, 12
  174. 174. 121 b-form-button_type_normal.cssTuesday, April 3, 12
  175. 175. 121 .b-form-button_type_normal { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; ... } .b-form-button_type_normal.b-form-button_disabled_yes { opacity: 0.35; }Tuesday, April 3, 12
  176. 176. 122 Тема для css3 b-form-button/ _theme/ b-form-button_theme_normal-grey.css ...Tuesday, April 3, 12
  177. 177. 123Tuesday, April 3, 12
  178. 178. 124 b-form-button_theme_normal-grey.cssTuesday, April 3, 12
  179. 179. 124 .b-form-button_theme_normal-grey { color: #000; border-color: rgba(192,192,192,0.5) rgba(192,192,192,0.3) rgba(49,49,49,0.45); background: linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(216,216,216,0.66) 75%,rgba(193,193,193,0.66) 92%,rgba(168,168,168,0.66) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 10%, rgba(216,216,216,0.66) 75%, rgba(193,193,193,0.66) 92%, rgba(168,168,168,0.66) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(255,255,255,0.9)), color-stop(75%,rgba(216,216,216,0.66)), color- stop(92%,rgba(193,193,193,0.66)), color-stop(100%,rgba(168,168,168,0.66))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(216,216,216,0.66) 75%,rgba(193,193,193,0.66) 92%,rgba(168,168,168,0.66) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(216,216,216,0.66) 75%,rgba(193,193,193,0.66) 92%,rgba(168,168,168,0.66) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(216,216,216,0.66) 75%,rgba(193,193,193,0.66) 92%,rgba(168,168,168,0.66) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#e6ffffff, endColorstr=#a8d6d6d6,GradientType=0 ); /* IE6-9 */ } body .b-form-button_theme_normal-grey.b-form-button_hovered_yes { border-top-style: solid; background: linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(206,206,206,0.61) 59%,rgba(193,193,193,0.66) 87%,rgba(198,198,198,0.66) 88%,rgba(255,255,255,1) 100%); background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 10%, rgba(206,206,206,0.61) 59%, rgba(193,193,193,0.66) 87%, rgba(198,198,198,0.66) 94%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(255,255,255,0.9)), color-stop(59%,rgba(206,206,206,0.61)), color- stop(87%,rgba(193,193,193,0.66)), color-stop(88%,rgba(198,198,198,0.66)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(206,206,206,0.61) 59%,rgba(193,193,193,0.66) 87%,rgba(198,198,198,0.66) 94%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(206,206,206,0.61) 59%,rgba(193,193,193,0.66) 87%,rgba(198,198,198,0.66) 94%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.9) 10%,rgba(206,206,206,0.61) 59%,rgba(193,193,193,0.66) 87%,rgba(198,198,198,0.66) 94%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#e6f7f7f7, endColorstr=#a8d4d4d4,GradientType=0 ); /* IE6-9 */ } .b-form-button_theme_normal-grey.b-form-button_focused_yes { box-shadow: 0 0 0.1em #ffd438, 0 0 0.13em #ffd438, 0 0 0.2em #ffd438, 0 0 0.3em #ffd438; -moz-box-shadow: 0 0 0.1em #ffd438, 0 0 0.13em #ffd438; -webkit-box-shadow: 0 0 0.25em #ffd438, 0 0 0.25em #ffd438; } ...Tuesday, April 3, 12
  180. 180. Что не так?Tuesday, April 3, 12
  181. 181. 126 Что не так?!Tuesday, April 3, 12
  182. 182. 126Tuesday, April 3, 12
  183. 183. 126 — не пиксель в пиксельTuesday, April 3, 12
  184. 184. 126 — не пиксель в пиксель — новая темаTuesday, April 3, 12
  185. 185. 127 Новая темаTuesday, April 3, 12
  186. 186. 128 Что сделалиTuesday, April 3, 12
  187. 187. 128 Что сделали — сверстали в картинкахTuesday, April 3, 12
  188. 188. 128 Что сделали — сверстали в картинках — написали JavaScriptTuesday, April 3, 12
  189. 189. 128 Что сделали — сверстали в картинках — написали JavaScript — сверстали на CSS3Tuesday, April 3, 12
  190. 190. ВыводыTuesday, April 3, 12
  191. 191. 130 CSS3Tuesday, April 3, 12
  192. 192. 130 CSS3 — масштабируемостьTuesday, April 3, 12
  193. 193. 130 CSS3 — масштабируемость — меньше разметкиTuesday, April 3, 12
  194. 194. 130 CSS3 — масштабируемость — меньше разметки — минус запросTuesday, April 3, 12
  195. 195. 131 PNGTuesday, April 3, 12
  196. 196. 131 PNG — пиксель в пиксельTuesday, April 3, 12
  197. 197. 131 PNG — пиксель в пиксель — создание темTuesday, April 3, 12
  198. 198. 131 PNG — пиксель в пиксель — создание тем — рендерингTuesday, April 3, 12
  199. 199. 132 Three years remainingTuesday, April 3, 12
  200. 200. Варвара Степанова toivonen@yandex-team.ru Елена Глухова lento4ka@yandex-team.ruTuesday, April 3, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×