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>