From 53d9080aad8e43be70a97088372d88f7b282d844 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sun, 8 Feb 2015 10:03:24 +0300 Subject: [PATCH] renovations --- .../15-metrics/metric-client-left-top-rtl.svg | 20 +-- .../15-metrics/metric-scroll-width-height.svg | 53 +++--- .../1-get-document-scrolls/solution.md | 24 +++ .../1-get-document-scrolls/task.md | 15 ++ .../solution.md | 0 .../solution.view/index.css | 0 .../solution.view/index.html | 0 .../task.md | 0 .../solution.md | 0 .../solution.view/index.css | 0 .../solution.view/index.html | 0 .../task.md | 0 2-ui/1-document/4-traversing-dom/article.md | 2 +- .../2-set-class-links/solution.md | 56 ++++++ .../solution.view/index.html | 36 ++++ .../2-set-class-links/task.md | 29 ++++ .../4-event-bubbling/article.md | 12 +- .../4-event-bubbling/capture.view/example.css | 5 + .../solution.view/index.html | 25 ++- .../solution.view/messages.css | 32 ++-- .../source.view/index.html | 24 +-- .../source.view/messages.css | 22 +-- .../1-hide-message-delegate/task.md | 2 +- .../2-sliding-tree/solution.md | 6 +- .../2-sliding-tree/solution.view/index.html | 20 +-- .../3-sort-table/solution.md | 1 - .../5-event-delegation/3-sort-table/task.md | 2 +- .../5-event-delegation/article.md | 56 ++++-- .../1-behavior-tooltip}/solution.md | 0 .../solution.view/index.html | 80 +++++++++ .../1-behavior-tooltip/source.view/index.html | 32 ++++ .../6-behavior/1-behavior-tooltip/task.md | 33 ++++ .../6-behavior/article.md | 62 ++++--- .../1-why-return-false-fails/solution.md | 8 +- .../1-why-return-false-fails/task.md | 2 +- .../solution.view/index.html | 23 ++- .../source.view/index.html | 11 +- .../2-catch-link-navigation/task.md | 4 +- .../3-image-gallery/solution.view/index.html | 5 +- .../3-image-gallery/source.view/index.html | 2 +- .../3-image-gallery/task.md | 2 - .../7-default-browser-action/article.md | 25 +-- .../8-dispatch-events/article.md | 161 ++++++++++++------ .../solution.md | 0 .../solution.view/index.html | 0 .../source.view/index.html | 0 .../task.md | 0 .../solution.view/index.html | 124 -------------- .../2-behavior-tooltip/source.view/index.html | 72 -------- .../2-behavior-tooltip/task.md | 36 ---- 50 files changed, 653 insertions(+), 471 deletions(-) create mode 100644 2-ui/1-document/18-coordinates-document/1-get-document-scrolls/solution.md create mode 100644 2-ui/1-document/18-coordinates-document/1-get-document-scrolls/task.md rename 2-ui/1-document/18-coordinates-document/{1-position-at-absolute => 2-position-at-absolute}/solution.md (100%) rename 2-ui/1-document/18-coordinates-document/{1-position-at-absolute => 2-position-at-absolute}/solution.view/index.css (100%) mode change 100755 => 100644 rename 2-ui/1-document/18-coordinates-document/{1-position-at-absolute => 2-position-at-absolute}/solution.view/index.html (100%) mode change 100755 => 100644 rename 2-ui/1-document/18-coordinates-document/{1-position-at-absolute => 2-position-at-absolute}/task.md (100%) rename 2-ui/1-document/18-coordinates-document/{2-position-at-2 => 3-position-at-2}/solution.md (100%) rename 2-ui/1-document/18-coordinates-document/{2-position-at-2 => 3-position-at-2}/solution.view/index.css (100%) mode change 100755 => 100644 rename 2-ui/1-document/18-coordinates-document/{2-position-at-2 => 3-position-at-2}/solution.view/index.html (100%) mode change 100755 => 100644 rename 2-ui/1-document/18-coordinates-document/{2-position-at-2 => 3-position-at-2}/task.md (100%) create mode 100644 2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.md create mode 100644 2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.view/index.html create mode 100644 2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/task.md rename 2-ui/{3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip => 2-events-and-interfaces/6-behavior/1-behavior-tooltip}/solution.md (100%) create mode 100644 2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/solution.view/index.html create mode 100644 2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/source.view/index.html create mode 100644 2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/task.md rename 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/{3-behavior-nested-tooltip => 2-behavior-nested-tooltip}/solution.md (100%) rename 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/{3-behavior-nested-tooltip => 2-behavior-nested-tooltip}/solution.view/index.html (100%) mode change 100755 => 100644 rename 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/{3-behavior-nested-tooltip => 2-behavior-nested-tooltip}/source.view/index.html (100%) mode change 100755 => 100644 rename 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/{3-behavior-nested-tooltip => 2-behavior-nested-tooltip}/task.md (100%) delete mode 100755 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/solution.view/index.html delete mode 100755 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/source.view/index.html delete mode 100644 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-behavior-tooltip/task.md diff --git a/2-ui/1-document/15-metrics/metric-client-left-top-rtl.svg b/2-ui/1-document/15-metrics/metric-client-left-top-rtl.svg index 1f1306d3..c23dccfd 100644 --- a/2-ui/1-document/15-metrics/metric-client-left-top-rtl.svg +++ b/2-ui/1-document/15-metrics/metric-client-left-top-rtl.svg @@ -16,6 +16,7 @@ + @@ -26,25 +27,6 @@ - - היא שפת תסריט - מפורשת מבוססת - אובייקטים המותאמת - לשילוב באתרי אינטרנט - ורצה על ידי דפדפן - האינטרנט בצד הלקוח. - השפה מרחיבה את - יכולות שפת התגיות - הבסיסית HTML - ומאפשרת בכך ליצור - יישומי אינטרנט - מתוחכמים יותר. - למעשה, כיום, רוב אתרי - האינטרנט המודרניים - משלבים שפה זו. היא - ידועה בעיקר כשפה - המוטבעת בדפ - diff --git a/2-ui/1-document/15-metrics/metric-scroll-width-height.svg b/2-ui/1-document/15-metrics/metric-scroll-width-height.svg index a169fee9..ce3c2b95 100644 --- a/2-ui/1-document/15-metrics/metric-scroll-width-height.svg +++ b/2-ui/1-document/15-metrics/metric-scroll-width-height.svg @@ -4,7 +4,7 @@ metric-scroll-width-height.svg Created with bin/sketchtool. - + @@ -19,26 +19,29 @@ originating technologies, the most well known being JavaScript (Netscape) and JScript (Microsoft). The language was - invented by Brendan Eich at Netscape and - first appeared in that company’s Navigator - 2.0 browser. It has appeared in all - subsequent browsers from Netscape and in - all browsers from Microsoft starting with - Internet Explorer 3.0. - The development of this Standard started in - November 1996. The first edition of this - Ecma Standard was adopted by the Ecma - General Assembly of June 1997. - That Ecma Standard was submitted to ISO/ - IEC JTC 1 for adoption under the fast-track - procedure, and approved as international - standard ISO/IEC 16262, in April 1998. - The Ecma General Assembly of June 1998 - approved the second edition of ECMA-262 - to keep it fully aligned with ISO/IEC - 16262. Changes between the first and the - second edition are editorial in nature. + invented by Brendan Eich at Netscape + and first appeared in that company’s + Navigator 2.0 browser. It has appeared in + all subsequent browsers from Netscape + and in all browsers from Microsoft + starting with Internet Explorer 3.0. + The development of this Standard started + in November 1996. The first edition of + this Ecma Standard was adopted by the + Ecma General Assembly of June 1997. + That Ecma Standard was submitted to + ISO/IEC JTC 1 for adoption under the + fast-track procedure, and approved as + international standard ISO/IEC 16262, in + April 1998. The Ecma General + Assembly of June 1998 approved the + second edition of ECMA-262 to keep it + fully aligned with ISO/IEC 16262. + Changes between the first and the second + edition are editorial in nature. + + @@ -51,12 +54,10 @@ 723px - - - - - - + + + + diff --git a/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/solution.md b/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/solution.md new file mode 100644 index 00000000..8cb08d4c --- /dev/null +++ b/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/solution.md @@ -0,0 +1,24 @@ +
    +
  • `top` -- это `pageYOffset`.
    • +
  • `bottom` -- это `pageYOffset` плюс высота видимой части `documentElement.clientHeight`.
    • +
  • `height` -- полная высота документа, её вычисление давно в главе [](/metrics-window).
    • +
+ +Итого: + +```js +function getDocumentScroll() { + var scrollHeight = Math.max( + document.body.scrollHeight, document.documentElement.scrollHeight, + document.body.offsetHeight, document.documentElement.offsetHeight, + document.body.clientHeight, document.documentElement.clientHeight + ); + + return { + top: pageYOffset, + bottom: pageYOffset + document.documentElement.clientHeight, + height: scrollHeight + }; +} +``` + diff --git a/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/task.md b/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/task.md new file mode 100644 index 00000000..d82bc669 --- /dev/null +++ b/2-ui/1-document/18-coordinates-document/1-get-document-scrolls/task.md @@ -0,0 +1,15 @@ +# Область видимости для документа + +[importance 5] + +Напишите функцию `getDocumentScroll()`, которая возвращает объект с информацией о текущей прокрутке и области видимости. + +Свойства объекта-результата: + +
    +
  • `top` -- координата верхней границы видимой части (относительно документа).
    • +
  • `bottom` -- координата нижней границы видимой части (относительно документа).
    • +
  • `height` -- полная высота документа, включая прокрутку.
    • +
+ +В этой задаче учитываем только вертикальную прокрутку: горизонтальная делается аналогично, а нужна сильно реже. \ No newline at end of file diff --git a/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.md b/2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.md similarity index 100% rename from 2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.md rename to 2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.md diff --git a/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.view/index.css b/2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.view/index.css old mode 100755 new mode 100644 similarity index 100% rename from 2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.view/index.css rename to 2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.view/index.css diff --git a/2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.view/index.html b/2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.view/index.html old mode 100755 new mode 100644 similarity index 100% rename from 2-ui/1-document/18-coordinates-document/1-position-at-absolute/solution.view/index.html rename to 2-ui/1-document/18-coordinates-document/2-position-at-absolute/solution.view/index.html diff --git a/2-ui/1-document/18-coordinates-document/1-position-at-absolute/task.md b/2-ui/1-document/18-coordinates-document/2-position-at-absolute/task.md similarity index 100% rename from 2-ui/1-document/18-coordinates-document/1-position-at-absolute/task.md rename to 2-ui/1-document/18-coordinates-document/2-position-at-absolute/task.md diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.md b/2-ui/1-document/18-coordinates-document/3-position-at-2/solution.md similarity index 100% rename from 2-ui/1-document/18-coordinates-document/2-position-at-2/solution.md rename to 2-ui/1-document/18-coordinates-document/3-position-at-2/solution.md diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.view/index.css b/2-ui/1-document/18-coordinates-document/3-position-at-2/solution.view/index.css old mode 100755 new mode 100644 similarity index 100% rename from 2-ui/1-document/18-coordinates-document/2-position-at-2/solution.view/index.css rename to 2-ui/1-document/18-coordinates-document/3-position-at-2/solution.view/index.css diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-2/solution.view/index.html b/2-ui/1-document/18-coordinates-document/3-position-at-2/solution.view/index.html old mode 100755 new mode 100644 similarity index 100% rename from 2-ui/1-document/18-coordinates-document/2-position-at-2/solution.view/index.html rename to 2-ui/1-document/18-coordinates-document/3-position-at-2/solution.view/index.html diff --git a/2-ui/1-document/18-coordinates-document/2-position-at-2/task.md b/2-ui/1-document/18-coordinates-document/3-position-at-2/task.md similarity index 100% rename from 2-ui/1-document/18-coordinates-document/2-position-at-2/task.md rename to 2-ui/1-document/18-coordinates-document/3-position-at-2/task.md diff --git a/2-ui/1-document/4-traversing-dom/article.md b/2-ui/1-document/4-traversing-dom/article.md index 8ec504b8..70734b0a 100644 --- a/2-ui/1-document/4-traversing-dom/article.md +++ b/2-ui/1-document/4-traversing-dom/article.md @@ -282,7 +282,7 @@ elem.lastElementChild === body.children[body.children.length-1] Это может привести к сюрпризам при использовании свойства `children`, поэтому HTML-комментарии либо убирают либо используют фреймворк, к примеру, jQuery, который даёт свои методы перебора и отфильтрует их. [/warn] -## Особые ссылки для таблиц +## Особые ссылки для таблиц [#dom-navigation-tables] У конкретных элементов DOM могут быть свои дополнительные ссылки для большего удобства навигации. diff --git a/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.md b/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.md new file mode 100644 index 00000000..85150af6 --- /dev/null +++ b/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/solution.md @@ -0,0 +1,56 @@ + +Сначала можно найти ссылки, например, при помощи `document.querySelectorAll('a')`, а затем выбрать из них нужные. + +Затем определимся -- что использовать для проверки адреса ссылки: свойство `href` или атрибут `getAttribute('href')`? + +Различие между ними заключается в том, что свойство будет содержать полный путь ссылки, а атрибут -- значение, указанное в HTML. + +Если открыть страницу локально, на диске, то для `` значения будут такими: +
    +
  • `a.getAttribute('href') == "/tutorial"`.
    • +
  • `a.href == "file:///tutorial"` (возможно, в пути будет также буква диска).
    • +
+ +Здесь нужен именно атрибут, хотя бы потому, что в свойстве все ссылки уже с хостом и протоколом, а нам надо понять, был ли протокол в `href` или нет. + +Правила определения: +
    +
  • Cсылки без `href` и без протокола `://` являются заведомо внутренними.
    • +
  • Там, где протокол есть -- проверяем, начинается ли адрес с `http://internal.com`.
    • +
+ +Итого, код может быть таким: +```js +var links = document.querySelectorAll('a'); + +for(var i=0; i + + + + + + + + +список + + + + + + + \ No newline at end of file diff --git a/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/task.md b/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/task.md new file mode 100644 index 00000000..59b9649b --- /dev/null +++ b/2-ui/1-document/9-attributes-and-custom-properties/2-set-class-links/task.md @@ -0,0 +1,29 @@ +# Поставьте класс ссылкам + +[importance 3] + +Сделайте желтыми внешние ссылки, добавив им класс `external`. + +Все ссылки без `href`, без протокола и начинающиеся с `http://internal.com` считаются внутренними. + +```html + + + +список + +``` + + +Результат: +[iframe border=1 height=180 src="solution"] + diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/article.md b/2-ui/2-events-and-interfaces/4-event-bubbling/article.md index 45da4ab2..3c74a2a3 100644 --- a/2-ui/2-events-and-interfaces/4-event-bubbling/article.md +++ b/2-ui/2-events-and-interfaces/4-event-bubbling/article.md @@ -189,9 +189,9 @@ for(var i=0; i -Далее в учебнике мы будем использовать стандартные свойства и вызовы, поскольку добавление этих строк, обеспечивающих совместимость -- достаточно простая и очевидная задача. +Далее в учебнике мы будем использовать стандартные свойства и вызовы, поскольку добавление этих строк, обеспечивающих совместимость -- достаточно простая и очевидная задача. Кроме того, никто не мешает подключить полифилл. -Ещё раз хотелось бы заметить -- эти отличия понадобятся при написании JS-кода с поддержкой IE8- без фреймворков. Почти все JS-фреймворки обеспечивают кросс-браузерную поддержку `target`, `currentTarget` и `stopPropagation()`. +Ещё раз хотелось бы заметить -- эти отличия нужно знать при написании JS-кода с поддержкой IE8- без фреймворков. Почти все JS-фреймворки обеспечивают кросс-браузерную поддержку `target`, `currentTarget` и `stopPropagation()`. ## Итого @@ -254,8 +254,8 @@ event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true); Этому есть две причины:
    -
  1. Историческая, так как IE лишь с версии 9 в полной мере поддерживает современный стандарт.
    2. -
  2. Разумная -- когда происходит событие, то разумно дать возможность первому сработать обработчику на самом элементе, поскольку он наиболее конкретен. Код, который поставил обработчик именно на этот элемент, знает максимум деталей о том, что это за элемент, чем он занимается, и обработчик через замыкание, скорее всего, имеет к ним доступ. +
  3. Историческая -- так как IE лишь с версии 9 в полной мере поддерживает современный стандарт.
    4. +
  4. Разумная -- когда происходит событие, то разумно дать возможность первому сработать обработчику на самом элементе, поскольку он наиболее конкретен. Код, который поставил обработчик именно на этот элемент, знает максимум деталей о том, что это за элемент, чем он занимается. Далее имеет смысл передать обработку события родителю -- он тоже понимает, что происходит, но уже менее детально, далее -- выше, и так далее, до самого объекта `document`, обработчик на котором реализовывает самую общую функциональность уровня документа.
diff --git a/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/example.css b/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/example.css index 4fc1a986..0f58d912 100755 --- a/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/example.css +++ b/2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/example.css @@ -26,3 +26,8 @@ p { line-height: 50px; margin: 0; } + +body { + line-height: 25px; + font-size: 16px; +} \ No newline at end of file diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html index 3292ec43..9ae11315 100755 --- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html +++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html @@ -1,7 +1,7 @@ - + @@ -11,34 +11,33 @@

Лошадь

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

- +

Осёл

Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.

- +

Корова, а также пара слов о диком быке, о волах и о тёлках.

Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.

- +
+ + + - + \ No newline at end of file diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css index ad86dadf..a7386bfa 100755 --- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css +++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/messages.css @@ -2,34 +2,36 @@ body { margin: 10px auto; width: 470px; } + h3 { margin: 0; padding-bottom: .3em; + padding-right: 20px; font-size: 1.1em; } + p { margin: 0; padding: 0 0 .5em; } + .pane { - position: relative; + background: #edf5e1; padding: 10px 20px 10px; border-top: solid 2px #c4df9b; - background: #edf5e1; + position: relative; } - .remove-button { - position: absolute; - top: 10px; - right: 10px; - display: block; - width: 16px; - height: 16px; - background: url(http://js.cx/clipart/delete.gif) no-repeat; - cursor: pointer; -} - -h3 { - padding-right: 20px; + position: absolute; + font-size: 110%; + top: 0; + color: red; + right: 10px; + display: block; + width: 24px; + height: 24px; + border: none; + background: transparent; + cursor: pointer; } diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html index 6b9ed4a5..9a3b1364 100755 --- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html +++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html @@ -7,28 +7,22 @@ -
-
+Кнопка для удаления: + +
+

Лошадь

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

- -
-
+
+

Осёл

Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.

- -
-
+
+

Корова, а также пара слов о диком быке, о волах и о тёлках.

Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.

- -
+
- diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css index ed64b446..55f511a3 100755 --- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css +++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/messages.css @@ -2,31 +2,31 @@ body { margin: 10px auto; width: 470px; } + h3 { margin: 0; padding-bottom: .3em; - padding-right: 20px; font-size: 1.1em; } + p { margin: 0; padding: 0 0 .5em; } + .pane { background: #edf5e1; padding: 10px 20px 10px; border-top: solid 2px #c4df9b; - position: relative; } .remove-button { - position: absolute; - top: 10px; - right: 10px; - cursor: pointer; - display: block; - background: url(http://js.cx/clipart/delete.gif) no-repeat; - width: 16px; - height: 16px; + font-size: 110%; + color: red; + right: 10px; + width: 24px; + height: 24px; + border: none; + background: transparent; + cursor: pointer; } - diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/task.md b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/task.md index 7a045e62..8d99d7d5 100644 --- a/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/task.md +++ b/2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/task.md @@ -7,5 +7,5 @@ **Используйте делегирование событий. Один обработчик для всего.** В результате, должно работать вот так(кликните на крестик): -[iframe src="solution" height=500] +[iframe src="solution" height=400] diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md index 68df24dc..dd6daa3d 100644 --- a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md +++ b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.md @@ -95,12 +95,12 @@ tree.onclick = function(event) { var li = target.parentNode; // получить родительский LI // получить UL с потомками -- это первый UL внутри LI - var node = li.getElementsByTagName('ul')[0]; + var childrenContainer = li.getElementsByTagName('ul')[0]; - if (!node) return; // потомков нет -- ничего не надо делать + if (!childrenContainer) return; // потомков нет -- ничего не надо делать // спрятать/показать (можно и через CSS-класс) - node.style.display = node.style.display ? '' : 'none'; + childrenContainer.hidden = !childrenContainer.hidden; } ``` diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html index 4292b440..56e3e65e 100755 --- a/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html +++ b/2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html @@ -2,12 +2,12 @@ @@ -73,11 +73,11 @@ tree.onclick = function(event) { return; } - /* now we know SPAN is clicked */ - var node = target.parentNode.getElementsByTagName('ul')[0]; - if (!node) return; // no children + /* now we know the SPAN is clicked */ + var childrenContainer = target.parentNode.getElementsByTagName('ul')[0]; + if (!childrenContainer) return; // no children - node.style.display = node.style.display ? '' : 'none'; + childrenContainer.hidden = !childrenContainer.hidden; } diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.md b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.md index e47254ec..3d4c08c6 100644 --- a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.md +++ b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.md @@ -16,5 +16,4 @@
  • Добавляет `TR` из массива обратно в `TBODY`
    • -# Решение diff --git a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/task.md b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/task.md index 1e8cd20d..e07508fd 100644 --- a/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/task.md +++ b/2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/task.md @@ -5,7 +5,7 @@ Сделать сортировку таблицы при клике на заголовок. Демо: -[iframe border=1 src="solution"] +[iframe border=1 src="solution" height=180] Требования: