init
This commit is contained in:
Ilya Kantor
parent
06f61d8ce8
commit
f301cb744d
2271 changed files with 103162 additions and 0 deletions
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue