init

2014-10-26 22:10:13 +03:00 · 2014-10-26 22:10:13 +03:00 · f301cb744d
commit f301cb744d
parent 06f61d8ce8
2271 changed files with 103162 additions and 0 deletions
--- a/02-ui/05-widgets/06-widget-tasks/01-tooltip-over-element/solution/tooltip-fixed/index.html
+++ b/02-ui/05-widgets/06-widget-tasks/01-tooltip-over-element/solution/tooltip-fixed/index.html
@ -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>