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

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>