мета-данные страницы
Загрузка не удалась. Возможно, проблемы с правами доступа?
Различия
Показаны различия между двумя версиями страницы.
Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версияПоследняя версияСледующая версия справа и слева | ||
javascript:ex [08/11/2017 14:58] – [Урок 7: тайм-аут ;-)] Владимир Власов | javascript:ex [09/11/2017 12:21] – [Урок 5.1: Создаем свой спойлер] Владимир Власов | ||
---|---|---|---|
Строка 316: | Строка 316: | ||
и он появится! 8-) | и он появится! 8-) | ||
+ | ==== Урок 5.1: Создаем свой спойлер ==== | ||
+ | Сформулируем такую задачу: | ||
+ | Иными словами, | ||
+ | |||
+ | <code html> | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | ...здесь скрываемый текст... | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Для начала определим пару полезных нам функций: | ||
+ | |||
+ | <code javascript> | ||
+ | function getTagged(name, | ||
+ | return (elem || document).getElementsByTagName(name); | ||
+ | } | ||
+ | |||
+ | function getNext(elem) { | ||
+ | do { | ||
+ | elem = elem.nextSibling; | ||
+ | } while ( elem && elem.nodeType != 1 ); | ||
+ | return elem; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Здесь первая функция '' | ||
+ | |||
+ | Вторая функция '' | ||
+ | |||
+ | <code javascript> | ||
+ | elem.nodeType != 1 | ||
+ | </ | ||
+ | важна, если есть такой риск. | ||
+ | |||
+ | Теперь, | ||
+ | |||
+ | <code javascript> | ||
+ | var alldiv = getTagged(" | ||
+ | |||
+ | for (var j=0; j< | ||
+ | if(alldiv[j].className == " | ||
+ | { | ||
+ | alldiv[j].insertAdjacentHTML(' | ||
+ | alldiv[j].onclick = spoiling; | ||
+ | alldiv[j].onmouseover = function(){this.style.textDecoration=" | ||
+ | alldiv[j].onmouseout = function(){this.style.textDecoration=" | ||
+ | |||
+ | var nxt = getNext(alldiv[j]); | ||
+ | while ( nxt.className != " | ||
+ | nxt.style.border = " | ||
+ | nxt.style.backgroundColor = " | ||
+ | nxt.style.display = " | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | function spoiling() { | ||
+ | var nxt = getNext(this); | ||
+ | while ( nxt.className != " | ||
+ | console.log(nxt.id, | ||
+ | if (nxt.style.display == " | ||
+ | if (nxt.style.display == " | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | Прокомментируем программу. Условие | ||
+ | <code javascript> | ||
+ | if(alldiv[j].className == " | ||
+ | </ | ||
+ | делает отбор только тэгов, помеченных классом '' | ||
+ | <code javascript> | ||
+ | | ||
+ | </ | ||
+ | |||
+ | Строка | ||
+ | <code javascript> | ||
+ | alldiv[j].onclick = spoiling; | ||
+ | </ | ||
+ | создает обработчик события клика мышкой по содержимому контейнера. Заметим, | ||
+ | |||
+ | Строки | ||
+ | <code javascript> | ||
+ | alldiv[j].onmouseover = function(){this.style.textDecoration=" | ||
+ | alldiv[j].onmouseout = function(){this.style.textDecoration=" | ||
+ | </ | ||
+ | описывают поведение, | ||
+ | |||
+ | Далее, в блоке | ||
+ | <code javascript> | ||
+ | var nxt = getNext(alldiv[j]); | ||
+ | while ( nxt.className != " | ||
+ | nxt.style.border = " | ||
+ | nxt.style.backgroundColor = " | ||
+ | nxt.style.display = " | ||
+ | </ | ||
+ | во-первых, | ||
+ | <code javascript> | ||
+ | while ( nxt.className != " | ||
+ | </ | ||
+ | Для найденного элемента '' | ||
+ | <code javascript> | ||
+ | nxt.style.border = " | ||
+ | nxt.style.backgroundColor = " | ||
+ | nxt.style.display = " | ||
+ | </ | ||
+ | где самое главное для нас -- скрытое по умолчанию состояние спойлера: | ||
+ | |||
+ | И, наконец, | ||
+ | Строки вроде таких | ||
+ | <code javascript> | ||
+ | var nxt = getNext(this); | ||
+ | while ( nxt.className != " | ||
+ | </ | ||
+ | мы уже обсуждали. | ||
+ | |||
+ | Команда | ||
+ | <code javascript> | ||
+ | console.log(" | ||
+ | </ | ||
+ | позволяет нам осуществить запись в лог значения '' | ||
+ | Наконец, | ||
+ | <code javascript> | ||
+ | if (nxt.style.display == " | ||
+ | if (nxt.style.display == " | ||
+ | </ | ||
+ | состояние значения '' | ||
+ | |||
+ | Код базируется на примерах, | ||
===== Урок 6: динамическое изменение картинок и события задержки ===== | ===== Урок 6: динамическое изменение картинок и события задержки ===== | ||
Строка 336: | Строка 464: | ||
[[http:// | [[http:// | ||
+ | |||
+ | < | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | </ | ||
sic (на будущее) [[http:// | sic (на будущее) [[http:// | ||
- | |||
< | < | ||
+ | </ | ||
+ | |||
< | < | ||
var alldiv = getTagged(" | var alldiv = getTagged(" | ||
Строка 353: | Строка 487: | ||
var nxt = getNext(alldiv[j]); | var nxt = getNext(alldiv[j]); | ||
- | while ( nxt.className != " | + | while ( nxt.className != " |
nxt.style.border = " | nxt.style.border = " | ||
nxt.style.backgroundColor = " | nxt.style.backgroundColor = " |