init
This commit is contained in:
Ilya Kantor
parent
06f61d8ce8
commit
f301cb744d
2271 changed files with 103162 additions and 0 deletions
|
|
@ -0,0 +1,83 @@
|
|||
# Подсказки
|
||||
|
||||
Функция показа подсказки должна при первом показе сгенерировать элемент с подсказкой, а затем -- показать в нужном месте страницы.
|
||||
|
||||
Обсудим, как это сделать.
|
||||
|
||||
Для генерации подсказки добавим вспомогательную функцию `getTooltipElem()`. Она будет возвращать существующий элемент, если он есть, а если нет -- генерировать новый.
|
||||
|
||||
```js
|
||||
function getTooltipElem() {
|
||||
if (!tooltipElem) {
|
||||
tooltipElem = $('<div/>', {
|
||||
"class" : 'tooltip',
|
||||
html: html
|
||||
});
|
||||
}
|
||||
return tooltipElem;
|
||||
}
|
||||
```
|
||||
|
||||
**Основная настройка вида подсказки -- в CSS-классе `tooltip`.**
|
||||
|
||||
Например:
|
||||
|
||||
```css
|
||||
.tooltip {
|
||||
position:absolute;
|
||||
z-index:100; /* подсказка должна перекрывать другие элементы */
|
||||
padding: 10px 20px;
|
||||
|
||||
/* красивости... */
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0,0,0,.3);
|
||||
}
|
||||
```
|
||||
|
||||
**Как правильно отпозиционировать подсказку? Для начала, по горизонтали.**
|
||||
|
||||
Центр подсказки должен быть ровно над центром элемента, который имеет координату `elem.offset().left + elem.outerWidth()/2`.
|
||||
|
||||
Если поставить `tooltipElem.left` в это значение -- результат будет выглядеть так:
|
||||
<img src="tooltip-fixed-center.png">
|
||||
|
||||
```js
|
||||
tooltipElem.left = elem.offset().left + elem.outerWidth()/2
|
||||
```
|
||||
|
||||
Дополнительно нужно сдвинуть подсказку на половину собственной ширины влево:
|
||||
|
||||
<img src="tooltip-fixed-center2.png">
|
||||
|
||||
```js
|
||||
left -= tooltipElem.outerWidth()/2;
|
||||
```
|
||||
|
||||
**Теперь отпозиционируем по вертикали.**
|
||||
|
||||
Это гораздо проще: нужно взять координату Y элемента и вычесть из неё высоту подсказки и дополнительный отступ.
|
||||
|
||||
```js
|
||||
elemCoords.top - tooltipElem.outerHeight() - 10
|
||||
```
|
||||
|
||||
# Проверка решения
|
||||
|
||||
Проверьте, пожалуйста, ваше решение на предмет возможных ошибок:
|
||||
|
||||
<ul>
|
||||
<li>Подсказка корректно работает при прокрутке?</li>
|
||||
<li>Не используете ли вы события `mouseout/mouseover`? Лучше -- `mouseenter/mouseleave` (или, более кратко в jQuery: `hover`).</li>
|
||||
<li>Вторая подсказка с `offset:0` расположена сразу над элементом, а не как первая.</li>
|
||||
<li>Элемент с подсказкой генерируется динамически, при наведении, а не когда подсказка только создаётся?</li>
|
||||
<li>Элемент с подсказкой *позиционируется* при показе, а не при создании? Ведь элемент, на котором стоит подсказка, может менять своё положение.</li>
|
||||
</ul>
|
||||
|
||||
# Код решения
|
||||
|
||||
[edit src="solution"]Полное решение в песочнице[/edit]
|
||||
1
02-ui/05-widgets/06-widget-tasks/01-tooltip-over-element/solution/.plnkr
Executable file
1
02-ui/05-widgets/06-widget-tasks/01-tooltip-over-element/solution/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"tooltip-fixed","plunk":"NitZDDm8cHJVELWxDFl1"}
|
||||
109
02-ui/05-widgets/06-widget-tasks/01-tooltip-over-element/solution/index.html
Executable file
109
02-ui/05-widgets/06-widget-tasks/01-tooltip-over-element/solution/index.html
Executable file
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position:absolute;
|
||||
z-index:100; /* подсказка должна перекрывать другие элементы */
|
||||
padding: 10px 20px;
|
||||
|
||||
/* красивости... */
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
|
||||
<a href="#" id="link">Ссылка с <i>подсказкой</i></a>
|
||||
<a href="#" id="link2">Еще ссылка</a>
|
||||
|
||||
<script>
|
||||
// должно работать даже если страница имеет прокрутку
|
||||
// подсказка должна перекрывать текст под ней
|
||||
// подсказка не должна вылезать за экран
|
||||
function Tooltip(options) {
|
||||
|
||||
var offsetFromElement = (options.offset === undefined) ? 10 : options.offset;
|
||||
var tooltipElem;
|
||||
var isEnabled = true;
|
||||
|
||||
var elem = options.elem;
|
||||
var html = options.html;
|
||||
|
||||
// обычно обработчики - отдельные функции, но здесь все слишком просто, так что без них
|
||||
elem.hover(show, hide);
|
||||
|
||||
function hide() {
|
||||
getTooltipElem().remove();
|
||||
}
|
||||
|
||||
function show() {
|
||||
var elemCoords = elem.offset();
|
||||
|
||||
var tooltipElem = getTooltipElem();
|
||||
|
||||
var winLeft = $(window).scrollLeft();
|
||||
var winTop = $(window).scrollTop();
|
||||
|
||||
tooltipElem.appendTo('body'); // если не показать элемент, то не получится получить ширину
|
||||
|
||||
var left = elemCoords.left + (elem.outerWidth() - tooltipElem.outerWidth())/2^0;
|
||||
if (left < winLeft) left = winLeft; // вылезли за левую границу
|
||||
|
||||
var top = elemCoords.top - tooltipElem.outerHeight() - offsetFromElement;
|
||||
if (top < winTop) { // вылезли за верхнюю границу
|
||||
top = elemCoords.top + elem.outerHeight() + offsetFromElement;
|
||||
}
|
||||
|
||||
tooltipElem.css({
|
||||
left: left,
|
||||
top: top
|
||||
});
|
||||
}
|
||||
|
||||
function getTooltipElem() {
|
||||
if (!tooltipElem) {
|
||||
tooltipElem = $('<div/>', {
|
||||
"class" : 'tooltip',
|
||||
html: html
|
||||
});
|
||||
}
|
||||
return tooltipElem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link'),
|
||||
html: "подсказка длиннее, чем элемент"
|
||||
});
|
||||
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link2'),
|
||||
html: "HTML<br>подсказка",
|
||||
offset: 0
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"name":"tooltip-fixed","plunk":"NitZDDm8cHJVELWxDFl1"}
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position:absolute;
|
||||
z-index:100; /* подсказка должна перекрывать другие элементы */
|
||||
padding: 10px 20px;
|
||||
|
||||
/* красивости... */
|
||||
border: 1px solid #b3c9ce;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font: italic 14px/1.3 arial, sans-serif;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
box-shadow: 3px 3px 3px rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
|
||||
<a href="#" id="link">Ссылка с <i>подсказкой</i></a>
|
||||
<a href="#" id="link2">Еще ссылка</a>
|
||||
|
||||
<script>
|
||||
// должно работать даже если страница имеет прокрутку
|
||||
// подсказка должна перекрывать текст под ней
|
||||
// подсказка не должна вылезать за экран
|
||||
function Tooltip(options) {
|
||||
|
||||
var offsetFromElement = (options.offset === undefined) ? 10 : options.offset;
|
||||
var tooltipElem;
|
||||
var isEnabled = true;
|
||||
|
||||
var elem = options.elem;
|
||||
var html = options.html;
|
||||
|
||||
// обычно обработчики - отдельные функции, но здесь все слишком просто, так что без них
|
||||
elem.hover(show, hide);
|
||||
|
||||
function hide() {
|
||||
getTooltipElem().remove();
|
||||
}
|
||||
|
||||
function show() {
|
||||
var elemCoords = elem.offset();
|
||||
|
||||
var tooltipElem = getTooltipElem();
|
||||
|
||||
var winLeft = $(window).scrollLeft();
|
||||
var winTop = $(window).scrollTop();
|
||||
|
||||
tooltipElem.appendTo('body'); // если не показать элемент, то не получится получить ширину
|
||||
|
||||
var left = elemCoords.left + (elem.outerWidth() - tooltipElem.outerWidth())/2^0;
|
||||
if (left < winLeft) left = winLeft; // вылезли за левую границу
|
||||
|
||||
var top = elemCoords.top - tooltipElem.outerHeight() - offsetFromElement;
|
||||
if (top < winTop) { // вылезли за верхнюю границу
|
||||
top = elemCoords.top + elem.outerHeight() + offsetFromElement;
|
||||
}
|
||||
|
||||
tooltipElem.css({
|
||||
left: left,
|
||||
top: top
|
||||
});
|
||||
}
|
||||
|
||||
function getTooltipElem() {
|
||||
if (!tooltipElem) {
|
||||
tooltipElem = $('<div/>', {
|
||||
"class" : 'tooltip',
|
||||
html: html
|
||||
});
|
||||
}
|
||||
return tooltipElem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link'),
|
||||
html: "подсказка длиннее, чем элемент"
|
||||
});
|
||||
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link2'),
|
||||
html: "HTML<br>подсказка",
|
||||
offset: 0
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
# Подсказка над элементом
|
||||
|
||||
[importance 5]
|
||||
|
||||
Создайте всплывающую подсказку над элементом.
|
||||
|
||||
Подсказка должна появляться при наведении на элемент, по центру и на небольшом расстоянии сверху. При уходе курсора с элемента -- исчезать.
|
||||
|
||||
Вы можете посмотреть поведение подсказки в ифрейме ниже, наведя курсор на ссылку.
|
||||
|
||||
[iframe src="solution" height=200 link border=1]
|
||||
|
||||
Способ добавления подсказки к элементу:
|
||||
|
||||
```js
|
||||
new Tooltip({
|
||||
elem: $('#elem'),
|
||||
html: "Вот <b>такая</b> подсказка!",
|
||||
// вертикальное расстояние от подсказки до элемента
|
||||
offset: 20 // необязательный параметр, по умолчанию 10
|
||||
});
|
||||
```
|
||||
|
||||
<ul>
|
||||
<li>В подсказке и элементе, на который она поставлена, может быть произвольный HTML. Оформление подсказки должно задаваться CSS.</li>
|
||||
<li>Подсказка не должна вылезать за пределы экрана, если нельзя показать сверху -- показывать снизу элемента.</li>
|
||||
<li>Объект подсказки не должен иметь публичных методов, только приватные.</li>
|
||||
</ul>
|
||||
|
||||
[edit src="task" task/]
|
||||
|
||||
P.S. Подсказки, если их мало, можно реализовать и при помощи CSS. Но JS-подход более универсален и не зависит от вёрстки, в частности, он может проверять, не вылезает ли подсказка за экран.
|
||||
1
02-ui/05-widgets/06-widget-tasks/01-tooltip-over-element/task/.plnkr
Executable file
1
02-ui/05-widgets/06-widget-tasks/01-tooltip-over-element/task/.plnkr
Executable file
|
|
@ -0,0 +1 @@
|
|||
{"name":"tooltip-fixed-src","plunk":"2Eby2s4DjitZTVisptW9"}
|
||||
50
02-ui/05-widgets/06-widget-tasks/01-tooltip-over-element/task/index.html
Executable file
50
02-ui/05-widgets/06-widget-tasks/01-tooltip-over-element/task/index.html
Executable file
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
height: 2000px; /* подсказка должна работать независимо от прокрутки */
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
/* ваш стиль */
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
<p>ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя ЛяЛяЛя</p>
|
||||
|
||||
<a href="#" id="link">Ссылка с <i>подсказкой</i></a>
|
||||
<a href="#" id="link2">Еще ссылка</a>
|
||||
|
||||
<script>
|
||||
// должно работать даже если страница имеет прокрутку
|
||||
// подсказка должна перекрывать текст под ней
|
||||
// подсказка не должна вылезать за экран
|
||||
function Tooltip(options) {
|
||||
/* ваш код */
|
||||
}
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link'),
|
||||
html: "подсказка длиннее, чем элемент"
|
||||
});
|
||||
|
||||
|
||||
new Tooltip({
|
||||
elem: $('#link2'),
|
||||
html: "HTML<br>подсказка",
|
||||
offset: 0
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6 KiB |
Loading…
Add table
Add a link
Reference in a new issue