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

54
2-ui/5-widgets/2-widgets-structure/1-clock/solution.view/index.html
View file

@ -1,36 +1,42 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики</title>
<script src="clock.js"></script>
<meta charset="utf-8">
<style>
.hour { color: green }
.min { color: blue }
.sec { color: red }
</style>
<title>Часики</title>
<script src="clock.js"></script>
<meta charset="utf-8">
<style>
.hour {
color: green
}
.min {
color: blue
}
.sec {
color: red
}
</style>
</head>
<body>
<div id="clock" class="clock">
<div id="clock" class="clock">
<span class="hour">00</span>:<span class="min">00</span>:<span class="sec">00</span>
</div>
</div>
<script>
<script>
var pageClock = new Clock({
elem: document.getElementById('clock')
});
</script>
var pageClock = new Clock({
elem: document.getElementById('clock')
});
<input type="button" onclick="pageClock.start()" value="Старт">
<input type="button" onclick="pageClock.stop()" value="Стоп">
</script>
<input type="button" onclick="pageClock.start()" value="Старт">
<input type="button" onclick="pageClock.stop()" value="Стоп">
<input type="button"
onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')"
value="alert для проверки корректного возобновления"
>
<input type="button" onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')" value="alert для проверки корректного возобновления">
</body>
</html>
</html>

54
2-ui/5-widgets/2-widgets-structure/1-clock/source.view/index.html
View file

@ -1,37 +1,43 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Часики</title>
<meta charset="utf-8">
<style>
.hour { color: green }
.min { color: blue }
.sec { color: red }
</style>
<title>Часики</title>
<meta charset="utf-8">
<style>
.hour {
color: green
}
.min {
color: blue
}
.sec {
color: red
}
</style>
</head>
<body>
<div id="clock" class="clock">
<div id="clock" class="clock">
<span class="hour">00</span>:<span class="min">00</span>:<span class="sec">00</span>
</div>
</div>
<script>
<script>
// .. ваш код Clock
// .. ваш код Clock
var pageClock = new Clock({
elem: document.getElementById('clock')
});
</script>
var pageClock = new Clock({
elem: document.getElementById('clock')
});
<input type="button" onclick="pageClock.start()" value="Старт">
<input type="button" onclick="pageClock.stop()" value="Стоп">
</script>
<input type="button" onclick="pageClock.start()" value="Старт">
<input type="button" onclick="pageClock.stop()" value="Стоп">
<input type="button"
onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')"
value="alert для проверки корректного возобновления"
>
<input type="button" onclick="alert('Часы должны останавливаться во время alert,\nи продолжать корректно работать после нажатия на ОК')" value="alert для проверки корректного возобновления">
</body>
</html>
</html>

189
2-ui/5-widgets/2-widgets-structure/2-slider-widget/solution.view/index.html
View file

@ -1,106 +1,107 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<style>
.slider {
margin: 5px;
width: 310px;
height: 15px;
border-radius: 5px;
background: #E0E0E0;
background: -moz-linear-gradient(left top, #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
background: linear-gradient(left top, #E0E0E0, #EEEEEE);
<head>
<meta charset="utf-8">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<style>
.slider {
margin: 5px;
width: 310px;
height: 15px;
border-radius: 5px;
background: #E0E0E0;
background: -moz-linear-gradient(left top, #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
background: linear-gradient(left top, #E0E0E0, #EEEEEE);
}
.thumb {
position: relative;
top: -5px;
left: 10px;
width: 10px;
height: 25px;
border-radius: 3px;
background: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="slider" class="slider">
<div class="thumb"></div>
</div>
<script>
var slider = new Slider({
elem: document.getElementById('slider')
});
function Slider(options) {
var elem = options.elem;
var thumbElem = elem.querySelector('.thumb');
var sliderCoords, thumbCoords, shiftX, shiftY;
elem.ondragstart = function() {
return false;
};
elem.onmousedown = function(event) {
if (event.target.closest('.thumb')) {
startDrag(event.clientX, event.clientY);
return false; // disable selection start (cursor change)
}
}
.thumb {
position: relative;
top: -5px;
left: 10px;
width: 10px;
height: 25px;
border-radius: 3px;
background: blue;
cursor: pointer;
function startDrag(startClientX, startClientY) {
thumbCoords = thumbElem.getBoundingClientRect();
shiftX = startClientX - thumbCoords.left;
shiftY = startClientY - thumbCoords.top;
sliderCoords = elem.getBoundingClientRect();
document.addEventListener('mousemove', onDocumentMouseMove);
document.addEventListener('mouseup', onDocumentMouseUp);
}
</style>
</head>
<body>
<div id="slider" class="slider">
<div class="thumb"></div>
</div>
<script>
var slider = new Slider({
elem: document.getElementById('slider')
});
function Slider(options) {
var elem = options.elem;
var thumbElem = elem.querySelector('.thumb');
var sliderCoords, thumbCoords, shiftX, shiftY;
elem.ondragstart = function() {
return false;
};
function moveTo(clientX) {
// вычесть координату родителя, т.к. position: relative
var newLeft = clientX - shiftX - sliderCoords.left;
elem.onmousedown = function(event) {
if (event.target.closest('.thumb')) {
startDrag(event.clientX, event.clientY);
return false; // disable selection start (cursor change)
}
}
function startDrag(startClientX, startClientY) {
thumbCoords = thumbElem.getBoundingClientRect();
shiftX = startClientX - thumbCoords.left;
shiftY = startClientY - thumbCoords.top;
sliderCoords = elem.getBoundingClientRect();
document.addEventListener('mousemove', onDocumentMouseMove);
document.addEventListener('mouseup', onDocumentMouseUp);
}
function moveTo(clientX) {
// вычесть координату родителя, т.к. position: relative
var newLeft = clientX - shiftX - sliderCoords.left;
// курсор ушёл вне слайдера
if(newLeft < 0) {
newLeft = 0;
}
var rightEdge = elem.offsetWidth - thumbElem.offsetWidth;
if(newLeft > rightEdge) {
newLeft = rightEdge;
}
thumbElem.style.left = newLeft + 'px';
}
function onDocumentMouseMove(e) {
moveTo(e.clientX);
}
function onDocumentMouseUp() {
endDrag();
}
function endDrag() {
document.removeEventListener('mousemove', onDocumentMouseMove);
document.removeEventListener('mouseup', onDocumentMouseUp);
// курсор ушёл вне слайдера
if (newLeft < 0) {
newLeft = 0;
}
var rightEdge = elem.offsetWidth - thumbElem.offsetWidth;
if (newLeft > rightEdge) {
newLeft = rightEdge;
}
thumbElem.style.left = newLeft + 'px';
}
</script>
</body>
</html>
function onDocumentMouseMove(e) {
moveTo(e.clientX);
}
function onDocumentMouseUp() {
endDrag();
}
function endDrag() {
document.removeEventListener('mousemove', onDocumentMouseMove);
document.removeEventListener('mouseup', onDocumentMouseUp);
}
}
</script>
</body>
</html>

38
2-ui/5-widgets/2-widgets-structure/3-selectable-list-component/solution.view/index.html
View file

@ -1,32 +1,36 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="listSelect.js"></script>
</head>
<body>
Клик на элементе выделяет только его.<br>
Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.<br>
Shift+Клик добавляет промежуток от последнего кликнутого к выделению.<br>
Клик на элементе выделяет только его.
<br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
<br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
<br>
<ul>
<li>Кристофер Робин</li>
<li>Винни-Пух</li>
<li>Ослик Иа</li>
<li>Мудрая Сова</li>
<li>Кролик. Просто кролик.</li>
</ul>
<ul>
<li>Кристофер Робин</li>
<li>Винни-Пух</li>
<li>Ослик Иа</li>
<li>Мудрая Сова</li>
<li>Кролик. Просто кролик.</li>
</ul>
<button onclick="alert(listSelect.getSelected())">listSelect.getSelected()</button>
<button onclick="alert(listSelect.getSelected())">listSelect.getSelected()</button>
<script>
var listSelect = new ListSelect({
elem: document.querySelector('ul')
});
</script>
<script>
var listSelect = new ListSelect({
elem: document.querySelector('ul')
});
</script>
</body>
</html>
</html>

91
2-ui/5-widgets/2-widgets-structure/4-voter/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
@ -8,63 +9,65 @@
font-family: Consolas, "Lucida Console", monospace;
font-size: 18px;
}
.up, .down {
.up,
.down {
cursor: pointer;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div id="voter" class="voter">
<span class="down">—</span>
<span class="vote">0</span>
<span class="up">+</span>
</div>
<div id="voter" class="voter">
<span class="down">—</span>
<span class="vote">0</span>
<span class="up">+</span>
</div>
<script>
function Voter(options) {
var elem = options.elem;
<script>
function Voter(options) {
var elem = options.elem;
var voteElem = elem.querySelector('.vote');
var voteElem = elem.querySelector('.vote');
elem.onclick = function(event) {
// сам обработчик не меняет голос, он вызывает функцию
if (event.target.closest('.down')) {
voteDecrease();
} else if (event.target.closest('.up')) {
voteIncrease();
}
}
elem.onmousedown = function() {
return false;
};
// ----------- методы -------------
function voteDecrease() {
voteElem.innerHTML = +voteElem.innerHTML - 1;
}
function voteIncrease() {
voteElem.innerHTML = +voteElem.innerHTML + 1;
}
this.setVote = function(vote) {
voteElem.innerHTML = +vote;
};
elem.onclick = function(event) {
// сам обработчик не меняет голос, он вызывает функцию
if (event.target.closest('.down')) {
voteDecrease();
} else if (event.target.closest('.up')) {
voteIncrease();
}
}
elem.onmousedown = function() {
return false;
};
// ----------- методы -------------
function voteDecrease() {
voteElem.innerHTML = +voteElem.innerHTML - 1;
}
function voteIncrease() {
voteElem.innerHTML = +voteElem.innerHTML + 1;
}
this.setVote = function(vote) {
voteElem.innerHTML = +vote;
};
}
var voter = new Voter({
elem: document.getElementById('voter')
});
voter.setVote(1);
</script>
var voter = new Voter({
elem: document.getElementById('voter')
});
voter.setVote(1);
</script>
</body>
</html>
</html>

37
2-ui/5-widgets/2-widgets-structure/4-voter/source.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
@ -8,34 +9,36 @@
font-family: Consolas, "Lucida Console", monospace;
font-size: 18px;
}
.up, .down {
.up,
.down {
cursor: pointer;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<div id="voter" class="voter">
<span class="down">—</span>
<span class="vote">0</span>
<span class="up">+</span>
</div>
<div id="voter" class="voter">
<span class="down">—</span>
<span class="vote">0</span>
<span class="up">+</span>
</div>
<script>
function Voter(options) {
// ... ваш код
}
<script>
function Voter(options) {
// ... ваш код
}
var voter = new Voter({
elem: document.getElementById('voter')
});
var voter = new Voter({
elem: document.getElementById('voter')
});
voter.setVote(1);
</script>
voter.setVote(1);
</script>
</body>
</html>
</html>

28
2-ui/5-widgets/2-widgets-structure/5-voter-proto/solution.view/index.html
View file

@ -1,27 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="voter.js"></script>
<script src="voter.js"></script>
</head>
<body>
<div id="voter" class="voter">
<span class="down">–</span>
<span class="vote">0</span>
<span class="up">+</span>
</div>
<div id="voter" class="voter">
<span class="down">–</span>
<span class="vote">0</span>
<span class="up">+</span>
</div>
<script>
var voter = new Voter({
elem: document.getElementById('voter')
});
</script>
<script>
var voter = new Voter({
elem: document.getElementById('voter')
});
</script>
</body>
</html>
</html>

33
2-ui/5-widgets/2-widgets-structure/6-voter-add-step/solution.view/index.html
View file

@ -1,29 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="voter.js"></script>
<script src="step-voter.js"></script> <!-- отнаследовать и переопределить методы -->
<script src="voter.js"></script>
<script src="step-voter.js"></script>
<!-- отнаследовать и переопределить методы -->
</head>
<body>
<div id="voter" class="voter">
<span class="down">–</span>
<span class="vote">0</span>
<span class="up">+</span>
</div>
<div id="voter" class="voter">
<span class="down">–</span>
<span class="vote">0</span>
<span class="up">+</span>
</div>
<script>
var voter = new StepVoter({
elem: document.getElementById('voter'),
step: 2
});
</script>
<script>
var voter = new StepVoter({
elem: document.getElementById('voter'),
step: 2
});
</script>
</body>
</html>
</html>

37
2-ui/5-widgets/2-widgets-structure/menu-dom.view/index.html
View file

@ -1,31 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="menu.js"></script>
</head>
<body>
<button onclick="menu.toggle()">menu.toggle()</button>
<button onclick="menu.open()">menu.open()</button>
<button onclick="menu.close()">menu.close()</button>
<button onclick="menu.toggle()">menu.toggle()</button>
<button onclick="menu.open()">menu.open()</button>
<button onclick="menu.close()">menu.close()</button>
<script>
var menu = new Menu({
title: "Сладости",
items: [
"Торт",
"Пончик",
"Пирожное",
"Шоколадка",
"Мороженое"
]
});
<script>
var menu = new Menu({
title: "Сладости",
items: [
"Торт",
"Пончик",
"Пирожное",
"Шоколадка",
"Мороженое"
]
});
document.body.appendChild( menu.getElem() );
</script>
document.body.appendChild(menu.getElem());
</script>
</body>
</html>

33
2-ui/5-widgets/2-widgets-structure/menu.view/index.html
View file

@ -1,29 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="menu.js"></script>
</head>
<body>
<div id="sweets-menu" class="menu">
<span class="title">Сладости</span>
<ul>
<li>Торт</li>
<li>Пончик</li>
<li>Пирожное</li>
<li>Шоколадка</li>
<li>Мороженое</li>
</ul>
</div>
<div id="sweets-menu" class="menu">
<span class="title">Сладости</span>
<ul>
<li>Торт</li>
<li>Пончик</li>
<li>Пирожное</li>
<li>Шоколадка</li>
<li>Мороженое</li>
</ul>
</div>
<script>
var menu = new Menu({
elem: document.getElementById('sweets-menu')
});
</script>
<script>
var menu = new Menu({
elem: document.getElementById('sweets-menu')
});
</script>
</body>
</html>