jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

beautify html

Browse source
This commit is contained in:
Ilya Kantor 2015-03-09 19:02:13 +03:00
parent ecf1478e7e
commit 5342f628da
354 changed files with 13965 additions and 9486 deletions
Download patch file Download diff file Expand all files Collapse all files

23
2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/solution.view/index.html
View file

@ -1,20 +1,23 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст"/>
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
<div id="text">Текст</div>
<div id="text">Текст</div>
<script>
// в этой задаче неважно, как именно прятать элемент
// например через style.display:
document.getElementById('hider').onclick = function() {
document.getElementById('text').style.display = 'none';
}
</script>
<script>
// в этой задаче неважно, как именно прятать элемент
// например через style.display:
document.getElementById('hider').onclick = function() {
document.getElementById('text').style.display = 'none';
}
</script>
</body>
</html>
</html>

15
2-ui/2-events-and-interfaces/1-introduction-browser-events/1-hide-other/source.view/index.html
View file

@ -1,16 +1,19 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст"/>
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
<div id="text">Текст</div>
<div id="text">Текст</div>
<script>
/* ваш код */
</script>
<script>
/* ваш код */
</script>
</body>
</html>
</html>

94
2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/solution.view/index.html
View file

@ -1,58 +1,58 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.menu ul {
margin: 0;
list-style: none;
padding-left: 20px;
display: none;
}
.menu .title {
font-size: 18px;
cursor: pointer;
}
.menu .title::before {
content: '▶ ';
font-size: 80%;
color: green;
}
.menu.open .title::before {
content: '▼ ';
}
.menu.open ul {
display: block;
}
</style>
<meta charset="utf-8">
<style>
.menu ul {
margin: 0;
list-style: none;
padding-left: 20px;
display: none;
}
.menu .title {
font-size: 18px;
cursor: pointer;
}
.menu .title::before {
content: '▶ ';
font-size: 80%;
color: green;
}
.menu.open .title::before {
content: '▼ ';
}
.menu.open ul {
display: block;
}
</style>
</head>
<body>
<div id="sweeties" class="menu">
<span class="title">Сладости (нажми меня)!</span>
<ul>
<li>Торт</li>
<li>Пончик</li>
<li>Пирожное</li>
</ul>
<div id="sweeties" class="menu">
<span class="title">Сладости (нажми меня)!</span>
<ul>
<li>Торт</li>
<li>Пончик</li>
<li>Пирожное</li>
</ul>
</div>
</div>
<script>
var menuElem = document.getElementById('sweeties');
var titleElem = menuElem.querySelector('.title');
<script>
var menuElem = document.getElementById('sweeties');
var titleElem = menuElem.querySelector('.title');
titleElem.onclick = function() {
menuElem.classList.toggle('open');
};
</script>
titleElem.onclick = function() {
menuElem.classList.toggle('open');
};
</script>
</body>
</html>
</html>

17
2-ui/2-events-and-interfaces/1-introduction-browser-events/4-sliding-menu/source.view/index.html
View file

@ -1,17 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
</head>
<body>
▶ ▼ Сладости (нажми меня)!
<ul>
<li>Торт</li>
<li>Пончик</li>
<li>Пирожное</li>
</ul>
▶ ▼ Сладости (нажми меня)!
<ul>
<li>Торт</li>
<li>Пончик</li>
<li>Пирожное</li>
</ul>
</body>
</html>

64
2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/solution.view/index.html
View file

@ -1,46 +1,46 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="messages.css">
<meta charset="utf-8">
<link rel="stylesheet" href="messages.css">
<meta charset="utf-8">
</head>
<body>
<div id="messages-container">
<div class="pane">
<h3>Лошадь</h3>
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
<button class="remove-button">[x]</button>
<div id="messages-container">
<div class="pane">
<h3>Лошадь</h3>
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Осёл</h3>
<p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
<button class="remove-button">[x]</button>
</div>
</div>
<div class="pane">
<h3>Осёл</h3>
<p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
<button class="remove-button">[x]</button>
</div>
</div>
<script>
<script>
var buttons = document.querySelectorAll('#messages-container .remove-button');
var buttons = document.querySelectorAll('#messages-container .remove-button');
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
for(var i=0; i<buttons.length; i++) {
var button = buttons[i];
button.onclick = function() {
var el = this.parentNode;
el.parentNode.removeChild(el);
};
}
</script>
button.onclick = function() {
var el = this.parentNode;
el.parentNode.removeChild(el);
};
}
</script>
</body>
</html>
</html>

40
2-ui/2-events-and-interfaces/1-introduction-browser-events/5-hide-message/source.view/index.html
View file

@ -1,28 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="messages.css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="messages.css">
<meta charset="utf-8">
</head>
<body>
Кнопка для удаления: <button class="remove-button">[x]</button>
Кнопка для удаления:
<button class="remove-button">[x]</button>
<div>
<div class="pane">
<h3>Лошадь</h3>
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
</div>
<div class="pane">
<h3>Осёл</h3>
<p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
</div>
</div>
<div>
<div class="pane">
<h3>Лошадь</h3>
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
</div>
<div class="pane">
<h3>Осёл</h3>
<p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
</div>
</div>
</body>
</html>
</html>

108
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
View file

@ -1,4 +1,5 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
@ -6,67 +7,66 @@
<body>
<div id="carousel" class="carousel">
<button class="arrow prev">⇦</button>
<div class="gallery">
<ul class="images">
<li><img src="https://js.cx/carousel/1.png">
<li><img src="https://js.cx/carousel/2.png">
<li><img src="https://js.cx/carousel/3.png">
<li><img src="https://js.cx/carousel/4.png">
<li><img src="https://js.cx/carousel/5.png">
<li><img src="https://js.cx/carousel/6.png">
<li><img src="https://js.cx/carousel/7.png">
<li><img src="https://js.cx/carousel/8.png">
<li><img src="https://js.cx/carousel/9.png">
<li><img src="https://js.cx/carousel/10.png">
</ul>
<div id="carousel" class="carousel">
<button class="arrow prev">⇦</button>
<div class="gallery">
<ul class="images">
<li><img src="https://js.cx/carousel/1.png">
<li><img src="https://js.cx/carousel/2.png">
<li><img src="https://js.cx/carousel/3.png">
<li><img src="https://js.cx/carousel/4.png">
<li><img src="https://js.cx/carousel/5.png">
<li><img src="https://js.cx/carousel/6.png">
<li><img src="https://js.cx/carousel/7.png">
<li><img src="https://js.cx/carousel/8.png">
<li><img src="https://js.cx/carousel/9.png">
<li><img src="https://js.cx/carousel/10.png">
</ul>
</div>
<button class="arrow next">⇨</button>
</div>
<button class="arrow next">⇨</button>
</div>
<script>
<script>
/* этот код помечает картинки, для удобства разработки */
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].style.position = 'relative';
var span = document.createElement('span');
// обычно лучше использовать CSS-классы,
// но этот код - для удобства разработки, так что не будем трогать стили
span.style.cssText = 'position:absolute;left:0;top:0';
span.innerHTML = i + 1;
lis[i].appendChild(span);
}
/* этот код помечает картинки, для удобства разработки */
var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++) {
lis[i].style.position='relative';
var span = document.createElement('span');
// обычно лучше использовать CSS-классы,
// но этот код - для удобства разработки, так что не будем трогать стили
span.style.cssText='position:absolute;left:0;top:0';
span.innerHTML = i+1;
lis[i].appendChild(span);
}
/* конфигурация */
var width = 130; // ширина изображения
var count = 3; // количество изображений
/* конфигурация */
var width = 130; // ширина изображения
var count = 3; // количество изображений
var carousel = document.getElementById('carousel');
var list = carousel.querySelector('ul');
var listElems = carousel.querySelectorAll('li');
var carousel = document.getElementById('carousel');
var list = carousel.querySelector('ul');
var listElems = carousel.querySelectorAll('li');
var position = 0; // текущий сдвиг влево
var position = 0; // текущий сдвиг влево
carousel.querySelector('.prev').onclick = function() {
if (position >= 0) return; // уже сдвинулись до упора
carousel.querySelector('.prev').onclick = function() {
if (position >= 0) return; // уже сдвинулись до упора
// сдвиг влево
// последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
position = Math.min(position + width * count, 0)
list.style.marginLeft = position + 'px';
};
// сдвиг влево
// последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
position = Math.min(position + width*count, 0)
list.style.marginLeft = position + 'px';
};
carousel.querySelector('.next').onclick = function() {
if (position <= -width * (listElems.length - count)) return; // уже до упора
carousel.querySelector('.next').onclick = function() {
if (position <= -width*(listElems.length-count)) return; // уже до упора
// сдвиг вправо
// последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
position = Math.max(position-width*count, -width*(listElems.length-count));
list.style.marginLeft = position + 'px';
};
</script>
// сдвиг вправо
// последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
position = Math.max(position - width * count, -width * (listElems.length - count));
list.style.marginLeft = position + 'px';
};
</script>
</body>
</html>
</html>

66
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html
View file

@ -1,4 +1,5 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
@ -6,43 +7,42 @@
<body>
<!-- ваша верстка виджета, ваши стили -->
<!-- ваша верстка виджета, ваши стили -->
<button class="arrow">⇦</button>
<button class="arrow">⇨</button>
<ul>
<li><img src="https://js.cx/carousel/1.png">
<li><img src="https://js.cx/carousel/2.png">
<li><img src="https://js.cx/carousel/3.png">
<li><img src="https://js.cx/carousel/4.png">
<li><img src="https://js.cx/carousel/5.png">
<li><img src="https://js.cx/carousel/6.png">
<li><img src="https://js.cx/carousel/7.png">
<li><img src="https://js.cx/carousel/8.png">
<li><img src="https://js.cx/carousel/9.png">
<li><img src="https://js.cx/carousel/10.png">
</ul>
<button class="arrow">⇦</button>
<button class="arrow">⇨</button>
<script>
/* этот код помечает картинки цифрами, для удобства разработки
его можно убрать, если не нужен */
var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++) {
lis[i].style.position='relative';
var span = document.createElement('span');
span.style.cssText='position:absolute;left:0;top:0';
span.innerHTML = i+1;
lis[i].appendChild(span);
}
</script>
<ul>
<li><img src="https://js.cx/carousel/1.png">
<li><img src="https://js.cx/carousel/2.png">
<li><img src="https://js.cx/carousel/3.png">
<li><img src="https://js.cx/carousel/4.png">
<li><img src="https://js.cx/carousel/5.png">
<li><img src="https://js.cx/carousel/6.png">
<li><img src="https://js.cx/carousel/7.png">
<li><img src="https://js.cx/carousel/8.png">
<li><img src="https://js.cx/carousel/9.png">
<li><img src="https://js.cx/carousel/10.png">
</ul>
<script>
// ваш код..
<script>
/* этот код помечает картинки цифрами, для удобства разработки
его можно убрать, если не нужен */
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].style.position = 'relative';
var span = document.createElement('span');
span.style.cssText = 'position:absolute;left:0;top:0';
span.innerHTML = i + 1;
lis[i].appendChild(span);
}
</script>
</script>
<script>
// ваш код..
</script>
</body>
</html>
</html>

131
2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.view/index.html
View file

@ -1,93 +1,92 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#field {
width: 200px;
height: 150px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
overflow: hidden;
cursor: pointer;
}
<style>
#field {
width: 200px;
height: 150px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
overflow: hidden;
cursor: pointer;
}
#ball {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
#ball {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
</style>
</head>
<body style="height:2000px">
Кликните на любое место поля, чтобы мяч перелетел туда.<br>
Кликните на любое место поля, чтобы мяч перелетел туда.
<br>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<script>
var field = document.getElementById('field');
var ball = document.getElementById('ball');
var field = document.getElementById('field');
var ball = document.getElementById('ball');
field.onclick = function(event) {
// координаты поля относительно окна
var fieldCoords = this.getBoundingClientRect();
field.onclick = function(event) {
// координаты левого-верхнего внутреннего угла поля
var fieldInnerCoords = {
top: fieldCoords.top + field.clientTop,
left: fieldCoords.left + field.clientLeft
};
// координаты поля относительно окна
var fieldCoords = this.getBoundingClientRect();
// разместить по клику,
// но сдвинув относительно поля (т.к. position:relative)
// и сдвинув на половину ширины/высоты
// (!) используются координаты относительно окна clientX/Y, как и в fieldCoords
var ballCoords = {
top: event.clientY - fieldInnerCoords.top - ball.clientHeight / 2,
left: event.clientX - fieldInnerCoords.left - ball.clientWidth / 2
};
// координаты левого-верхнего внутреннего угла поля
var fieldInnerCoords = {
top: fieldCoords.top + field.clientTop,
left: fieldCoords.left + field.clientLeft
};
// вылезает за верхнюю границу - разместить по ней
if(ballCoords.top < 0) ballCoords.top = 0;
// разместить по клику,
// но сдвинув относительно поля (т.к. position:relative)
// и сдвинув на половину ширины/высоты
// (!) используются координаты относительно окна clientX/Y, как и в fieldCoords
var ballCoords = {
top: event.clientY - fieldInnerCoords.top - ball.clientHeight / 2,
left: event.clientX - fieldInnerCoords.left - ball.clientWidth / 2
};
// вылезает за левую границу - разместить по ней
if(ballCoords.left < 0) ballCoords.left = 0;
// вылезает за верхнюю границу - разместить по ней
if (ballCoords.top < 0) ballCoords.top = 0;
// вылезает за левую границу - разместить по ней
if (ballCoords.left < 0) ballCoords.left = 0;
// вылезает за правую границу - разместить по ней
if(ballCoords.left + ball.clientWidth > field.clientWidth) {
ballCoords.left = field.clientWidth - ball.clientWidth;
// вылезает за правую границу - разместить по ней
if (ballCoords.left + ball.clientWidth > field.clientWidth) {
ballCoords.left = field.clientWidth - ball.clientWidth;
}
// вылезает за нижнюю границу - разместить по ней
if (ballCoords.top + ball.clientHeight > field.clientHeight) {
ballCoords.top = field.clientHeight - ball.clientHeight;
}
ball.style.left = ballCoords.left + 'px';
ball.style.top = ballCoords.top + 'px';
}
// вылезает за нижнюю границу - разместить по ней
if(ballCoords.top + ball.clientHeight > field.clientHeight) {
ballCoords.top = field.clientHeight - ball.clientHeight;
}
ball.style.left = ballCoords.left + 'px';
ball.style.top = ballCoords.top + 'px';
}
</script>
</body>
</html>
</html>

55
2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/source.view/index.html
View file

@ -1,37 +1,40 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
#field {
width: 200px;
height: 150px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
overflow: hidden;
}
#ball {
position: absolute;
top: 50%;
left: 50%;
margin-left: -20px;
margin-top: -20px;
}
</style>
<meta charset="utf-8">
<style>
#field {
width: 200px;
height: 150px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
overflow: hidden;
}
#ball {
position: absolute;
top: 50%;
left: 50%;
margin-left: -20px;
margin-top: -20px;
}
</style>
</head>
<body style="height:2000px">
Кликните на любое место поля, чтобы мяч перелетел туда.<br>
Мяч никогда не вылетит за границы поля.
Кликните на любое место поля, чтобы мяч перелетел туда.
<br> Мяч никогда не вылетит за границы поля.
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
</body>
</html>
</html>

13
2-ui/2-events-and-interfaces/4-event-bubbling/both.view/index.html
View file

@ -1,17 +1,20 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="example.css">
</head>
<body>
<form>FORM
<form>FORM
<div>DIV
<p>P</p>
<p>P</p>
</div>
</form>
</form>
<script src="script.js"></script>
<script src="script.js"></script>
</body>
</html>
</html>

15
2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/index.html
View file

@ -1,18 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="example.css">
</head>
<body>
Клик выведет <code>event.target</code> и <code>this</code>:
Клик выведет <code>event.target</code> и <code>this</code>:
<form id="form">FORM
<form id="form">FORM
<div>DIV
<p>P</p>
<p>P</p>
</div>
</form>
</form>
<script src="script.js"></script>
<script src="script.js"></script>
</body>
</html>
</html>

14
2-ui/2-events-and-interfaces/4-event-bubbling/capture.view/index.html
View file

@ -1,14 +1,16 @@
<!DOCTYPE HTML>
<html>
<body>
<link type="text/css" rel="stylesheet" href="example.css">
<link type="text/css" rel="stylesheet" href="example.css">
<form>FORM
<form>FORM
<div>DIV
<p>P</p>
<p>P</p>
</div>
</form>
</form>
<script src="script.js"></script>
<script src="script.js"></script>
</body>
</html>
</html>

55
2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/solution.view/index.html
View file

@ -1,43 +1,44 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="messages.css">
<meta charset="utf-8">
<link rel="stylesheet" href="messages.css">
<meta charset="utf-8">
</head>
<body>
<div id="messages-container">
<div class="pane">
<h3>Лошадь</h3>
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
<button class="remove-button">[x]</button>
<div id="messages-container">
<div class="pane">
<h3>Лошадь</h3>
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Осёл</h3>
<p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
<button class="remove-button">[x]</button>
</div>
</div>
<div class="pane">
<h3>Осёл</h3>
<p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
<button class="remove-button">[x]</button>
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
<button class="remove-button">[x]</button>
</div>
</div>
<script>
<script>
var container = document.getElementById('messages-container');
var container = document.getElementById('messages-container');
container.onclick = function(event) {
if (!event.target.classList.contains('remove-button')) return;
container.onclick = function(event) {
if (!event.target.classList.contains('remove-button')) return;
event.target.parentNode.hidden = !event.target.parentNode.hidden;
}
</script>
event.target.parentNode.hidden = !event.target.parentNode.hidden;
}
</script>
</body>
</html>

40
2-ui/2-events-and-interfaces/5-event-delegation/1-hide-message-delegate/source.view/index.html
View file

@ -1,28 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="messages.css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="messages.css">
<meta charset="utf-8">
</head>
<body>
Кнопка для удаления: <button class="remove-button">[x]</button>
Кнопка для удаления:
<button class="remove-button">[x]</button>
<div>
<div class="pane">
<h3>Лошадь</h3>
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
</div>
<div class="pane">
<h3>Осёл</h3>
<p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют тёлками.</p>
</div>
</div>
<div>
<div class="pane">
<h3>Лошадь</h3>
<p>Домашняя лошадь — животное семейства непарнокопытных, одомашненный и единственный сохранившийся подвид дикой лошади, вымершей в дикой природе, за исключением небольшой популяции лошади Пржевальского.</p>
</div>
<div class="pane">
<h3>Осёл</h3>
<p>Домашний осёл или ишак — одомашненный подвид дикого осла, сыгравший важную историческую роль в развитии хозяйства и культуры человека. Все одомашненные ослы относятся к африканским ослам.</p>
</div>
<div class="pane">
<h3>Корова, а также пара слов о диком быке, о волах и о тёлках. </h3>
<p>Коро́ва — самка домашнего быка, одомашненного подвида дикого быка, парнокопытного жвачного животного семейства полорогих. Самцы вида называются быками, молодняк — телятами, кастрированные самцы — волами. Молодых (до первой стельности) самок называют
тёлками.</p>
</div>
</div>
</body>
</html>
</html>

133
2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/solution.view/index.html
View file

@ -1,86 +1,89 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
.tree span:hover {
font-weight: bold;
}
.tree span {
cursor: pointer;
}
</style>
<meta charset="utf-8">
<style>
.tree span:hover {
font-weight: bold;
}
.tree span {
cursor: pointer;
}
</style>
<meta charset="utf-8">
</head>
<body>
<ul class="tree">
<ul class="tree">
<li>Животные
<ul>
<li>Млекопитающие
<ul>
<li>Коровы</li>
<li>Ослы</li>
<li>Собаки</li>
<li>Тигры</li>
</ul>
</li>
<li>Другие
<ul>
<li>Змеи</li>
<li>Птицы</li>
<li>Ящерицы</li>
</ul>
</li>
</ul>
<ul>
<li>Млекопитающие
<ul>
<li>Коровы</li>
<li>Ослы</li>
<li>Собаки</li>
<li>Тигры</li>
</ul>
</li>
<li>Другие
<ul>
<li>Змеи</li>
<li>Птицы</li>
<li>Ящерицы</li>
</ul>
</li>
</ul>
</li>
<li>Рыбы
<ul>
<li>Аквариумные
<ul>
<li>Гуппи</li>
<li>Скалярии</li>
</ul>
<ul>
<li>Аквариумные
<ul>
<li>Гуппи</li>
<li>Скалярии</li>
</ul>
</li>
<li>Морские
<ul>
<li>Морская форель</li>
</ul>
</li>
</ul>
</li>
<li>Морские
<ul>
<li>Морская форель</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
<script>
var tree = document.getElementsByTagName('ul')[0];
<script>
var tree = document.getElementsByTagName('ul')[0];
var treeLis = tree.getElementsByTagName('li');
var treeLis = tree.getElementsByTagName('li');
/* wrap all textNodes into spans */
for(var i=0; i<treeLis.length; i++) {
var li = treeLis[i];
/* wrap all textNodes into spans */
for (var i = 0; i < treeLis.length; i++) {
var li = treeLis[i];
var span = document.createElement('span');
li.insertBefore(span, li.firstChild);
span.appendChild(span.nextSibling);
}
var span = document.createElement('span');
li.insertBefore(span, li.firstChild);
span.appendChild(span.nextSibling);
}
/* catch clicks on whole tree */
tree.onclick = function(event) {
var target = event.target;
/* catch clicks on whole tree */
tree.onclick = function(event) {
var target = event.target;
if (target.tagName != 'SPAN') {
return;
}
if (target.tagName != 'SPAN') {
return;
}
/* now we know the SPAN is clicked */
var childrenContainer = target.parentNode.getElementsByTagName('ul')[0];
if (!childrenContainer) return; // no children
/* now we know the SPAN is clicked */
var childrenContainer = target.parentNode.getElementsByTagName('ul')[0];
if (!childrenContainer) return; // no children
childrenContainer.hidden = !childrenContainer.hidden;
}
</script>
childrenContainer.hidden = !childrenContainer.hidden;
}
</script>
</body>
</html>
</html>

73
2-ui/2-events-and-interfaces/5-event-delegation/2-sliding-tree/source.view/index.html
View file

@ -1,45 +1,50 @@
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<head>
<meta charset="utf-8">
</head>
<body>
<ul class="tree">
<ul class="tree">
<li>Животные
<ul>
<li>Млекопитающие
<ul>
<li>Коровы</li>
<li>Ослы</li>
<li>Собаки</li>
<li>Тигры</li>
</ul>
</li>
<li>Другие
<ul>
<li>Змеи</li>
<li>Птицы</li>
<li>Ящерицы</li>
</ul>
</li>
</ul>
<ul>
<li>Млекопитающие
<ul>
<li>Коровы</li>
<li>Ослы</li>
<li>Собаки</li>
<li>Тигры</li>
</ul>
</li>
<li>Другие
<ul>
<li>Змеи</li>
<li>Птицы</li>
<li>Ящерицы</li>
</ul>
</li>
</ul>
</li>
<li>Рыбы
<ul>
<li>Аквариумные
<ul>
<li>Гуппи</li>
<li>Скалярии</li>
</ul>
<ul>
<li>Аквариумные
<ul>
<li>Гуппи</li>
<li>Скалярии</li>
</ul>
</li>
<li>Морские
<ul>
<li>Морская форель</li>
</ul>
</li>
</ul>
</li>
<li>Морские
<ul>
<li>Морская форель</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
</body>
</html>
</html>

117
2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/solution.view/index.html
View file

@ -1,26 +1,29 @@
<!DOCTYPE HTML>
<html>
<head>
<head>
<meta charset="utf-8">
<style>
th {
cursor: pointer;
}
th:hover {
background: yellow;
}
</style>
</head>
<body>
</style>
</head>
<table id="grid">
<thead>
<body>
<table id="grid">
<thead>
<tr>
<th data-type="number">Возраст</th>
<th data-type="string">Имя</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
<tr>
<td>5</td>
<td>Вася</td>
@ -41,63 +44,63 @@
<td>1</td>
<td>Илья</td>
</tr>
</tbody>
</table>
</tbody>
</table>
<script>
// сортировка таблицы
// использовать делегирование!
// должно быть масштабируемо:
// код работает без изменений при добавлении новых столбцов и строк
<script>
// сортировка таблицы
// использовать делегирование!
// должно быть масштабируемо:
// код работает без изменений при добавлении новых столбцов и строк
var grid = document.getElementById('grid');
var grid = document.getElementById('grid');
grid.onclick = function(e) {
if (e.target.tagName != 'TH') return;
grid.onclick = function(e) {
if (e.target.tagName != 'TH') return;
// Если TH -- сортируем
sortGrid(e.target.cellIndex, e.target.getAttribute('data-type'));
};
// Если TH -- сортируем
sortGrid(e.target.cellIndex, e.target.getAttribute('data-type'));
};
function sortGrid(colNum, type) {
var tbody = grid.getElementsByTagName('tbody')[0];
function sortGrid(colNum, type) {
var tbody = grid.getElementsByTagName('tbody')[0];
// Составить массив из TR
var rowsArray = [].slice.call(tbody.rows);
// Составить массив из TR
var rowsArray = [].slice.call(tbody.rows);
// определить функцию сравнения, в зависимости от типа
var compare;
switch(type) {
case 'number':
compare = function(rowA, rowB) {
return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
};
break;
case 'string':
compare = function(rowA, rowB) {
return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML ? 1 : -1;
};
break;
}
// сортировать
rowsArray.sort(compare);
// Убрать tbody из большого DOM документа для лучшей производительности
grid.removeChild(tbody);
// добавить результат в нужном порядке в TBODY
// они автоматически будут убраны со старых мест и вставлены в правильном порядке
for(var i=0; i<rowsArray.length; i++) {
tbody.appendChild(rowsArray[i]);
}
grid.appendChild(tbody);
// определить функцию сравнения, в зависимости от типа
var compare;
switch (type) {
case 'number':
compare = function(rowA, rowB) {
return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
};
break;
case 'string':
compare = function(rowA, rowB) {
return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML ? 1 : -1;
};
break;
}
</script>
// сортировать
rowsArray.sort(compare);
</body>
</html>
// Убрать tbody из большого DOM документа для лучшей производительности
grid.removeChild(tbody);
// добавить результат в нужном порядке в TBODY
// они автоматически будут убраны со старых мест и вставлены в правильном порядке
for (var i = 0; i < rowsArray.length; i++) {
tbody.appendChild(rowsArray[i]);
}
grid.appendChild(tbody);
}
</script>
</body>
</html>

33
2-ui/2-events-and-interfaces/5-event-delegation/3-sort-table/source.view/index.html
View file

@ -1,26 +1,29 @@
<!DOCTYPE HTML>
<html>
<head>
<head>
<meta charset="utf-8">
<style>
th {
cursor: pointer;
}
th:hover {
background: yellow;
}
</style>
</head>
<body>
</style>
</head>
<table id="grid">
<thead>
<body>
<table id="grid">
<thead>
<tr>
<th data-type="number">Возраст</th>
<th data-type="string">Имя</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
<tr>
<td>5</td>
<td>Вася</td>
@ -41,13 +44,13 @@
<td>1</td>
<td>Илья</td>
</tr>
</tbody>
</table>
</tbody>
</table>
<script>
/* ваш код */
<script>
/* ваш код */
</script>
</script>
</body>
</body>
</html>
</html>

136
2-ui/2-events-and-interfaces/5-event-delegation/bagua.view/index.html
View file

@ -1,66 +1,94 @@
<!DOCTYPE HTML>
<html>
<body>
<link type="text/css" rel="stylesheet" href="bagua.css">
<link type="text/css" rel="stylesheet" href="bagua.css">
<table id="bagua-table">
<tr>
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
</tr>
<tr>
<td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
</td>
<td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
</td>
<td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
</td>
</tr>
<tr>
<td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
</td>
<td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
</td>
<td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
</td>
</tr>
<tr>
<td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
</td>
<td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
</td>
<td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
</td>
</tr>
</table>
<table id="bagua-table">
<tr>
<th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
</tr>
<tr>
<td class="nw"><strong>Northwest</strong>
<br>Metal
<br>Silver
<br>Elders
</td>
<td class="n"><strong>North</strong>
<br>Water
<br>Blue
<br>Change
</td>
<td class="ne"><strong>Northeast</strong>
<br>Earth
<br>Yellow
<br>Direction
</td>
</tr>
<tr>
<td class="w"><strong>West</strong>
<br>Metal
<br>Gold
<br>Youth
</td>
<td class="c"><strong>Center</strong>
<br>All
<br>Purple
<br>Harmony
</td>
<td class="e"><strong>East</strong>
<br>Wood
<br>Blue
<br>Future
</td>
</tr>
<tr>
<td class="sw"><strong>Southwest</strong>
<br>Earth
<br>Brown
<br>Tranquility
</td>
<td class="s"><strong>South</strong>
<br>Fire
<br>Orange
<br>Fame
</td>
<td class="se"><strong>Southeast</strong>
<br>Wood
<br>Green
<br>Romance
</td>
</tr>
<script>
var table = document.getElementById('bagua-table');
</table>
var selectedTd;
<script>
var table = document.getElementById('bagua-table');
table.onclick = function(event) {
var target = event.target;
while(target != this) {
if (target.tagName == 'TD') {
highlight(target);
return;
var selectedTd;
table.onclick = function(event) {
var target = event.target;
while (target != this) {
if (target.tagName == 'TD') {
highlight(target);
return;
}
target = target.parentNode;
}
}
target = target.parentNode;
}
}
function highlight(node) {
if (selectedTd) {
selectedTd.classList.remove('highlight');
}
selectedTd = node;
selectedTd.classList.add('highlight');
}
</script>
function highlight(node) {
if (selectedTd) {
selectedTd.classList.remove('highlight');
}
selectedTd = node;
selectedTd.classList.add('highlight');
}
</script>
</body>
</html>
</html>

115
2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/solution.view/index.html
View file

@ -1,80 +1,81 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px; /* подсказка должна работать независимо от прокрутки */
}
.tooltip {
position: fixed;
padding: 10px 20px;
/* красивости... */
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: center;
font: italic 14px/1.3 arial, sans-serif;
color: #333;
background: #fff;
box-shadow: 3px 3px 3px rgba(0,0,0,.3);
}
</style>
<meta charset="utf-8">
<style>
body {
height: 2000px;
/* подсказка должна работать независимо от прокрутки */
}
.tooltip {
position: fixed;
padding: 10px 20px;
/* красивости... */
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: center;
font: italic 14px/1.3 arial, sans-serif;
color: #333;
background: #fff;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
<button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
<p>Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>
<p>Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>
<script>
<script>
var showingTooltip;
var showingTooltip;
document.onmouseover = function(e) {
var target = e.target;
document.onmouseover = function(e) {
var target = e.target;
var tooltip = target.getAttribute('data-tooltip');
if (!tooltip) return;
var tooltip = target.getAttribute('data-tooltip');
if (!tooltip) return;
var tooltipElem = document.createElement('div');
tooltipElem.className = 'tooltip';
tooltipElem.innerHTML = tooltip;
document.body.appendChild(tooltipElem);
var tooltipElem = document.createElement('div');
tooltipElem.className = 'tooltip';
tooltipElem.innerHTML = tooltip;
document.body.appendChild(tooltipElem);
var coords = target.getBoundingClientRect();
var coords = target.getBoundingClientRect();
var left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
if (left < 0) left = 0; // не вылезать за левую границу окна
var left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth)/2;
if (left < 0) left = 0; // не вылезать за левую границу окна
var top = coords.top - tooltipElem.offsetHeight - 5;
if (top < 0) { // не вылезать за верхнюю границу окна
top = coords.top + target.offsetHeight + 5;
}
var top = coords.top - tooltipElem.offsetHeight - 5;
if (top < 0) { // не вылезать за верхнюю границу окна
top = coords.top + target.offsetHeight + 5;
}
tooltipElem.style.left = left + 'px';
tooltipElem.style.top = top + 'px';
tooltipElem.style.left = left + 'px';
tooltipElem.style.top = top + 'px';
showingTooltip = tooltipElem;
};
showingTooltip = tooltipElem;
};
document.onmouseout = function(e) {
document.onmouseout = function(e) {
if (showingTooltip) {
document.body.removeChild(showingTooltip);
showingTooltip = null;
}
if (showingTooltip) {
document.body.removeChild(showingTooltip);
showingTooltip = null;
}
};
</script>
};
</script>
</body>
</html>
</html>

40
2-ui/2-events-and-interfaces/6-behavior/1-behavior-tooltip/source.view/index.html
View file

@ -1,32 +1,32 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body {
height: 2000px; /* подсказка должна работать независимо от прокрутки */
}
/* ваши стили */
</style>
<meta charset="utf-8">
<style>
body {
height: 2000px;
/* подсказка должна работать независимо от прокрутки */
}
/* ваши стили */
</style>
</head>
<body>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
<button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
<button data-tooltip="подсказка длиннее, чем элемент">Короткая кнопка</button>
<button data-tooltip="HTML<br>подсказка">Ещё кнопка</button>
<p>Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>
<p>Прокрутите страницу, чтобы ссылки были вверху и проверьте, правильно ли показываются подсказки.</p>
<script>
// ваш код
</script>
<script>
// ваш код
</script>
</body>
</html>
</html>

47
2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
@ -9,32 +10,34 @@
}
</style>
</head>
<body>
<fieldset id="contents">
<legend>#contents</legend>
<p>
Как насчет почитать <a href="http://wikipedia.org">Википедию</a>, или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать про современные стандарты?
</p>
</fieldset>
<fieldset id="contents">
<legend>#contents</legend>
<p>
Как насчет почитать <a href="http://wikipedia.org">Википедию</a>, или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать про современные стандарты?
</p>
</fieldset>
<script>
document.getElementById('contents').onclick = function(event) {
<script>
document.getElementById('contents').onclick = function(event) {
function handleLink(href) {
var isLeaving = confirm('Уйти на '+href+'?');
if (!isLeaving) return false;
}
var target = event.target;
while(target != this) {
if (target.nodeName == 'A') {
return handleLink(target.getAttribute('href'));
function handleLink(href) {
var isLeaving = confirm('Уйти на ' + href + '?');
if (!isLeaving) return false;
}
var target = event.target;
while (target != this) {
if (target.nodeName == 'A') {
return handleLink(target.getAttribute('href'));
}
target = target.parentNode;
}
target = target.parentNode;
}
}
</script>
</script>
</body>
</html>
</html>

17
2-ui/2-events-and-interfaces/7-default-browser-action/2-catch-link-navigation/source.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
@ -9,14 +10,16 @@
}
</style>
</head>
<body>
<fieldset id="contents">
<legend>#contents</legend>
<p>
Как насчет почитать <a href="http://wikipedia.org">Википедию</a>, или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать про современные стандарты?
</p>
</fieldset>
<fieldset id="contents">
<legend>#contents</legend>
<p>
Как насчет почитать <a href="http://wikipedia.org">Википедию</a>, или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать про современные стандарты?
</p>
</fieldset>
</body>
</html>
</html>

84
2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Галерея</title>
<link rel="stylesheet" href="gallery.css">
@ -8,51 +9,62 @@
<body>
<p><img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<p><img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<ul id="thumbs">
<!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
<li><a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a></li>
<li><a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a></li>
<li><a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a></li>
<li><a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a></li>
<li><a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a></li>
</ul>
<ul id="thumbs">
<!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
<li>
<a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
</li>
<li>
<a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
</li>
<li>
<a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
</li>
<li>
<a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
</li>
<li>
<a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
</li>
</ul>
<script>
var largeImg = document.getElementById('largeImg');
<script>
var largeImg = document.getElementById('largeImg');
var thumbs = document.getElementById('thumbs');
var thumbs = document.getElementById('thumbs');
thumbs.onclick = function(e) {
var target = e.target;
thumbs.onclick = function(e) {
var target = e.target;
while(target != this) {
while (target != this) {
if (target.nodeName == 'A') {
showThumbnail(target.href, target.title);
return false;
}
target = target.parentNode;
}
if (target.nodeName == 'A') {
showThumbnail(target.href, target.title);
return false;
}
target = target.parentNode;
}
}
function showThumbnail(href, title) {
largeImg.src = href;
largeImg.alt = title;
}
function showThumbnail(href, title) {
largeImg.src = href;
largeImg.alt = title;
}
/* предзагрузка */
var imgs = thumbs.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
var url = imgs[i].parentNode.href;
var img = document.createElement('img');
img.src = url;
}
</script>
/* предзагрузка */
var imgs = thumbs.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
var url = imgs[i].parentNode.href;
var img = document.createElement('img');
img.src = url;
}
</script>
</body>
</html>
</html>

22
2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Галерея</title>
<link rel="stylesheet" href="gallery.css">
@ -8,16 +9,17 @@
<body>
<p><img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<p><img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<div id="thumbs">
<!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
<a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
<a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
<a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
<a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
<a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
</div>
<div id="thumbs">
<!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
<a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
<a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
<a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
<a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
<a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
</div>
</body>
</html>
</html>

21
2-ui/2-events-and-interfaces/7-default-browser-action/menu.view/index.html
View file

@ -1,19 +1,22 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css"/>
<link rel="stylesheet" href="menu.css" />
</head>
<body>
<ul id="menu" class="menu">
<li><a href="/php">PHP</a></li>
<li><a href="/html">HTML</a></li>
<li><a href="/javascript">JavaScript</a></li>
<li><a href="/flash">Flash</a></li>
</ul>
<ul id="menu" class="menu">
<li><a href="/php">PHP</a></li>
<li><a href="/html">HTML</a></li>
<li><a href="/javascript">JavaScript</a></li>
<li><a href="/flash">Flash</a></li>
</ul>
<script src="menu.js"></script>
<script src="menu.js"></script>
</body>
</html>
</html>