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

37
2-ui/5-widgets/5-custom-events/1-voter-events/solution.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@ -7,7 +8,9 @@
font-family: Consolas, "Lucida Console", monospace;
font-size: 18px;
}
.up, .down {
.up,
.down {
cursor: pointer;
color: blue;
font-weight: bold;
@ -16,27 +19,27 @@
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></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>
var voter = new Voter({
elem: document.getElementById('voter')
});
voter.setVote(5);
voter.setVote(5);
document.getElementById('voter').addEventListener('change', function(e) {
alert(e.detail);
});
</script>
document.getElementById('voter').addEventListener('change', function(e) {
alert(e.detail);
});
</script>
</body>
</html>
</html>

44
2-ui/5-widgets/5-custom-events/2-selectable-list-evented/solution.view/index.html
View file

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

70
2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/index.html
View file

@ -1,51 +1,53 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Селект</title>
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
<link rel="stylesheet" href="customselect.css"/>
<link rel="stylesheet" href="customselect.css" />
<script src="customselect.js"></script>
</head>
<body>
<div>Последний результат: <span id="result">...</span></div>
<div>Последний результат: <span id="result">...</span></div>
<div id="animal-select" class="customselect">
<button class="title">Выберите</button>
<ul>
<!-- значение хранится в свойстве data-value -->
<li data-value="bird">Птицы</li>
<li data-value="fish">Рыбы</li>
<li data-value="animal">Звери</li>
<li data-value="dino">Динозавры</li>
<li data-value="simplest">Одноклеточные</li>
</ul>
</div>
<div id="animal-select" class="customselect">
<button class="title">Выберите</button>
<ul>
<!-- значение хранится в свойстве data-value -->
<li data-value="bird">Птицы</li>
<li data-value="fish">Рыбы</li>
<li data-value="animal">Звери</li>
<li data-value="dino">Динозавры</li>
<li data-value="simplest">Одноклеточные</li>
</ul>
</div>
<div id="food-select" class="customselect">
<button class="title">Выберите</button>
<ul>
<li data-value="carnivore">Плотоядные</li>
<li data-value="herbivore">Травоядные</li>
<li data-value="omnivore">Всеядные</li>
</ul>
</div>
<div id="food-select" class="customselect">
<button class="title">Выберите</button>
<ul>
<li data-value="carnivore">Плотоядные</li>
<li data-value="herbivore">Травоядные</li>
<li data-value="omnivore">Всеядные</li>
</ul>
</div>
<script>
var animalSelect = new CustomSelect({
elem: document.getElementById('animal-select')
});
<script>
var animalSelect = new CustomSelect({
elem: document.getElementById('animal-select')
});
var foodSelect = new CustomSelect({
elem: document.getElementById('food-select')
});
var foodSelect = new CustomSelect({
elem: document.getElementById('food-select')
});
document.addEventListener('select', function (event) {
document.getElementById('result').innerHTML = event.detail.value;
});
</script>
document.addEventListener('select', function(event) {
document.getElementById('result').innerHTML = event.detail.value;
});
</script>
</body>
</html>
</html>

68
2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html
View file

@ -1,52 +1,54 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Селект</title>
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
<link rel="stylesheet" href="customselect.css"/>
<link rel="stylesheet" href="customselect.css" />
<!-- для вашего кода -->
<script src="customselect.js"></script>
</head>
<body>
<div>Последний результат: <span id="result">...</span></div>
<div>Последний результат: <span id="result">...</span></div>
<div id="animal-select" class="customselect">
<button class="title">Выберите</button>
<ul>
<!-- значение хранится в свойстве data-value -->
<li data-value="bird">Птицы</li>
<li data-value="fish">Рыбы</li>
<li data-value="animal">Звери</li>
<li data-value="dino">Динозавры</li>
<li data-value="simplest">Одноклеточные</li>
</ul>
</div>
<div id="animal-select" class="customselect">
<button class="title">Выберите</button>
<ul>
<!-- значение хранится в свойстве data-value -->
<li data-value="bird">Птицы</li>
<li data-value="fish">Рыбы</li>
<li data-value="animal">Звери</li>
<li data-value="dino">Динозавры</li>
<li data-value="simplest">Одноклеточные</li>
</ul>
</div>
<div id="food-select" class="customselect">
<button class="title">Выберите</button>
<ul>
<li data-value="carnivore">Плотоядные</li>
<li data-value="herbivore">Травоядные</li>
<li data-value="omnivore">Всеядные</li>
</ul>
</div>
<div id="food-select" class="customselect">
<button class="title">Выберите</button>
<ul>
<li data-value="carnivore">Плотоядные</li>
<li data-value="herbivore">Травоядные</li>
<li data-value="omnivore">Всеядные</li>
</ul>
</div>
<script>
var animalSelect = new CustomSelect({
elem: document.getElementById('animal-select')
});
<script>
var animalSelect = new CustomSelect({
elem: document.getElementById('animal-select')
});
var foodSelect = new CustomSelect({
elem: document.getElementById('food-select')
});
var foodSelect = new CustomSelect({
elem: document.getElementById('food-select')
});
document.addEventListener('select', function (event) {
document.getElementById('result').innerHTML = event.detail.value;
});
</script>
document.addEventListener('select', function(event) {
document.getElementById('result').innerHTML = event.detail.value;
});
</script>
</body>
</html>

64
2-ui/5-widgets/5-custom-events/4-slider-events/solution.view/index.html
View file

@ -1,44 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvents,Element.prototype.closest"></script>
<link rel="stylesheet" href="slider.css">
<script src="slider.js"></script>
</head>
<body>
<div id="slider" class="slider">
<div class="thumb"></div>
</div>
Slide:<span id="slide">&nbsp;</span>
Change:<span id="change">&nbsp;</span>
<head>
<meta charset="utf-8">
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvents,Element.prototype.closest"></script>
<link rel="stylesheet" href="slider.css">
<script src="slider.js"></script>
</head>
<button onclick="slider.setValue(50)">slider.setValue(50)</button>
<script>
<body>
<div id="slider" class="slider">
<div class="thumb"></div>
</div>
var sliderElem = document.getElementById('slider');
var slider = new Slider({
elem: sliderElem,
max: 100
});
Slide:<span id="slide">&nbsp;</span> Change:
<span id="change">&nbsp;</span>
sliderElem.addEventListener('slide', function(event) {
document.getElementById('slide').innerHTML = event.detail;
});
<button onclick="slider.setValue(50)">slider.setValue(50)</button>
sliderElem.addEventListener('change', function(event) {
document.getElementById('change').innerHTML = event.detail;
});
<script>
var sliderElem = document.getElementById('slider');
</script>
var slider = new Slider({
elem: sliderElem,
max: 100
});
</body>
sliderElem.addEventListener('slide', function(event) {
document.getElementById('slide').innerHTML = event.detail;
});
</html>
sliderElem.addEventListener('change', function(event) {
document.getElementById('change').innerHTML = event.detail;
});
</script>
</body>
</html>

67
2-ui/5-widgets/5-custom-events/menu-callback.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css">
@ -7,46 +8,52 @@
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="menu.js"></script>
</head>
<body>
<script type="text/template" id="menu-template">
<div class="menu">
<span class="title"><%-title%></span>
</div>
</script>
<script type="text/template" id="menu-template">
<div class="menu">
<span class="title"><%-title%></span>
</div>
</script>
<!--
<!--
встроенная браузерная функция encodeURIComponent кодирует спец-символы для URL,
например русские буквы и пробелы
в этом примере русских букв в ключах items нет, но потенциально они возможны
-->
<script type="text/template" id="menu-list-template">
<ul>
<% for(var name in items) { %>
<li><a href="#<%=encodeURIComponent(name)%>"><%-items[name]%></a></li>
<% } %>
</ul>
</script>
<script type="text/template" id="menu-list-template">
<ul>
<% for(var name in items) { %>
<li>
<a href="#<%=encodeURIComponent(name)%>">
<%-items[name]%>
</a>
</li>
<% } %>
</ul>
</script>
<script>
var menu = new Menu({
title: "Сладости",
template: _.template( document.getElementById('menu-template').innerHTML.trim()),
listTemplate: _.template( document.getElementById('menu-list-template').innerHTML.trim()),
items: {
cake: "Торт", // cake <a href="#cake">Торт</a>
donut: "Пончик", // donut
chokolate: "Шоколадка" // chokolate
},
onselect: showSelected
});
<script>
var menu = new Menu({
title: "Сладости",
template: _.template(document.getElementById('menu-template').innerHTML.trim()),
listTemplate: _.template(document.getElementById('menu-list-template').innerHTML.trim()),
items: {
cake: "Торт", // cake <a href="#cake">Торт</a>
donut: "Пончик", // donut
chokolate: "Шоколадка" // chokolate
},
onselect: showSelected
});
function showSelected(itemName) {
alert(itemName);
}
function showSelected(itemName) {
alert(itemName);
}
document.body.appendChild(menu.getElem());
</script>
document.body.appendChild(menu.getElem());
</script>
</body>
</html>

66
2-ui/5-widgets/5-custom-events/menu-event.view/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css">
@ -7,41 +8,46 @@
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
<script src="menu.js"></script>
</head>
<body>
<script type="text/template" id="menu-template">
<div class="menu">
<span class="title"><%-title%></span>
</div>
</script>
<script type="text/template" id="menu-template">
<div class="menu">
<span class="title"><%-title%></span>
</div>
</script>
<script type="text/template" id="menu-list-template">
<ul>
<% for(var name in items) { %>
<li><a href="#<%=encodeURIComponent(name)%>"><%-items[name]%></a></li>
<% } %>
</ul>
</script>
<script type="text/template" id="menu-list-template">
<ul>
<% for(var name in items) { %>
<li>
<a href="#<%=encodeURIComponent(name)%>">
<%-items[name]%>
</a>
</li>
<% } %>
</ul>
</script>
<script>
var menu = new Menu({
title: "Сладости",
template: _.template( document.getElementById('menu-template').innerHTML.trim()),
listTemplate: _.template( document.getElementById('menu-list-template').innerHTML.trim()),
items: {
cake: "Торт", // cake <a href="#cake">Торт</a>
donut: "Пончик", // donut
chokolate: "Шоколадка" // chokolate
}
});
<script>
var menu = new Menu({
title: "Сладости",
template: _.template(document.getElementById('menu-template').innerHTML.trim()),
listTemplate: _.template(document.getElementById('menu-list-template').innerHTML.trim()),
items: {
cake: "Торт", // cake <a href="#cake">Торт</a>
donut: "Пончик", // donut
chokolate: "Шоколадка" // chokolate
}
});
var elem = menu.getElem();
document.body.appendChild(elem);
elem.addEventListener('select', function(event) {
alert(event.detail);
});
</script>
var elem = menu.getElem();
document.body.appendChild(elem);
elem.addEventListener('select', function(event) {
alert(event.detail);
});
</script>
</body>
</html>