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

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-02-21 00:59:02 +03:00
parent 24171550ae
commit a62682e188
49 changed files with 620 additions and 894 deletions
Download patch file Download diff file Expand all files Collapse all files

33
2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.css
View file

@ -4,30 +4,32 @@
display: inline-block;
}
.customselect-title {
height: 17px;
border: 1px solid #ADD8E6;
background-position: right;
background-image: url(https://js.cx/clipart/select-button.gif);
background-repeat: no-repeat;
.customselect .title {
height: 20px;
border: 2px groove #ADD8E6;
background: white;
width: 200px;
box-sizing: border-box;
padding: 2px;
line-height: 14px;
cursor: pointer;
text-align: left;
}
.customselect li {
padding: 2px;
cursor: pointer;
}
.customselect-options li {
padding: 2px;
cursor: pointer;
}
.customselect-options li:nth-child(even) {
.customselect li:nth-child(even) {
background-color: #f0f8ff;
}
.customselect-options li:hover {
.customselect li:hover {
background-color: #7fffd4;
}
.customselect-options {
.customselect ul {
list-style: none;
margin: 0;
padding: 0;
@ -42,6 +44,7 @@
border-right: 1px solid #add8e6;
box-sizing: border-box;
}
.customselect-open .customselect-options {
.customselect.open ul {
display: block;
}

53
2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.js
View file

@ -1,44 +1,39 @@
function CustomSelect(options) {
var self = this;
var elem = options.elem;
elem.on('click', '.customselect-title', onTitleClick);
elem.on('click', 'li', onOptionClick);
elem.onclick = function(event) {
if (event.target.className == 'title') {
toggle();
} else if (event.target.tagName == 'LI') {
setValue(event.target.innerHTML, event.target.dataset.value);
close();
}
}
var isOpen = false;
// ------ обработчики ------
function onTitleClick(event) {
toggle();
}
// закрыть селект, если клик вне его
function onDocumentClick(event) {
var isInside = $(event.target).closest(elem).length;
if (!isInside) close();
}
function onOptionClick(event) {
close();
var name = $(event.target).html();
var value = $(event.target).data('value');
setValue(name, value);
if (!elem.contains(event.target)) close();
}
// ------------------------
function setValue(name, value) {
elem.find('.customselect-title').html(name);
function setValue(title, value) {
elem.querySelector('.title').innerHTML = title;
$(self).triggerHandler({
type: 'select',
name: name,
value: value
var widgetEvent = new CustomEvent('select', {
bubbles: true,
detail: {
title: title,
value: value
}
});
elem.dispatchEvent(widgetEvent);
}
function toggle() {
@ -47,14 +42,14 @@ function CustomSelect(options) {
}
function open() {
elem.addClass('customselect-open');
$(document).on('click', onDocumentClick);
elem.classList.add('open');
document.addEventListener('click', onDocumentClick);
isOpen = true;
}
function close() {
elem.removeClass('customselect-open');
$(document).off('click', onDocumentClick);
elem.classList.remove('open');
document.removeEventListener('click', onDocumentClick);
isOpen = false;
}

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

@ -2,7 +2,7 @@
<html>
<head>
<title>Селект</title>
<script src='http://code.jquery.com/jquery.min.js'></script>
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
<link rel="stylesheet" href="customselect.css"/>
<script src="customselect.js"></script>
</head>
@ -11,38 +11,38 @@
<div>Последний результат: <span id="result">...</span></div>
<div id="animal-select" class="customselect">
<div class="customselect-title">Выберите</div>
<ol class="customselect-options">
<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>
</ol>
</ul>
</div>
<div id="food-select" class="customselect">
<div class="customselect-title">Выберите</div>
<ol class="customselect-options">
<button class="title">Выберите</button>
<ul>
<li data-value="carnivore">Плотоядные</li>
<li data-value="herbivore">Травоядные</li>
<li data-value="omnivore">Всеядные</li>
</ol>
</ul>
</div>
<script>
var animalSelect = new CustomSelect({
elem: $('#animal-select')
elem: document.getElementById('animal-select')
});
var foodSelect = new CustomSelect({
elem: $('#food-select')
elem: document.getElementById('food-select')
});
$([animalSelect, foodSelect]).on('select', function (event) {
$('#result').html(event.value)
document.addEventListener('select', function (event) {
document.getElementById('result').innerHTML = event.detail.value;
});
</script>

50
2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.css Normal file
View file

@ -0,0 +1,50 @@
.customselect {
width: 200px;
font-size: 14px;
display: inline-block;
}
.customselect .title {
height: 20px;
border: 2px groove #ADD8E6;
background: white;
width: 200px;
box-sizing: border-box;
padding: 2px;
line-height: 14px;
cursor: pointer;
text-align: left;
}
.customselect li {
padding: 2px;
cursor: pointer;
}
.customselect li:nth-child(even) {
background-color: #f0f8ff;
}
.customselect li:hover {
background-color: #7fffd4;
}
.customselect ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
z-index: 1000;
background: white;
width: 200px;
border-bottom: 1px solid #add8e6;
border-left: 1px solid #add8e6;
border-right: 1px solid #add8e6;
box-sizing: border-box;
}
.customselect.open ul {
display: block;
}

1
2-ui/5-widgets/5-custom-events/3-custom-select/source.view/customselect.js Normal file
View file

@ -0,0 +1 @@
// ваш код CustomSelect

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

@ -2,54 +2,51 @@
<html>
<head>
<title>Селект</title>
<script src='http://code.jquery.com/jquery.min.js'></script>
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
<link rel="stylesheet" href="customselect.css"/>
<!-- для вашего кода -->
<script src="customselect.js"></script>
</head>
<body>
<div>Последний результат: <span id="result">...</span></div>
<img src="https://js.cx/clipart/select-button.gif">
<div id="animal-select" class="customselect">
<div class="customselect-title">Выберите</div>
<ol class="customselect-options">
<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>
</ol>
</ul>
</div>
<div id="food-select" class="customselect">
<div class="customselect-title">Выберите</div>
<ol class="customselect-options">
<button class="title">Выберите</button>
<ul>
<li data-value="carnivore">Плотоядные</li>
<li data-value="herbivore">Травоядные</li>
<li data-value="omnivore">Всеядные</li>
</ol>
</ul>
</div>
<script>
// создаём два селекта
var animalSelect = new CustomSelect({
elem: $('#animal-select')
elem: document.getElementById('animal-select')
});
var foodSelect = new CustomSelect({
elem: $('#food-select')
elem: document.getElementById('food-select')
});
// выводим выбранное значение
$([animalSelect, foodSelect]).on('select', function (event) {
$('#result').html(event.value)
document.addEventListener('select', function (event) {
document.getElementById('result').innerHTML = event.detail.value;
});
</script>
</body>
</html>
</html>

4
2-ui/5-widgets/5-custom-events/3-custom-select/task.md
View file

@ -8,12 +8,12 @@
<ul>
<li>Открытие и закрытие по клику на заголовок.</li>
<li>Закрытие селекта происходит при выборе или клике на любое другое место документа, в том числе на другой аналогичный селект.</li>
<li>Событие `"select"` при выборе опции.</li>
<li>Событие `"select"` при выборе опции возникает на элементе селекта и всплывает.</li>
<li>Значение опции хранится в атрибуте `data-value` (HTML-структура есть в исходном документе).
</ul>
Например:
[iframe src="solution" border="1" height="200" newwin]
[iframe src="solution" height="200"]
В примере выше два селекта, чтобы можно было проверить процесс открытия-закрытия.