Плавающие вкладки — это элементы div с абсолютным позиционированием и смещением за основное рабочее пространство документа.
По сути, это не практическая рекомендация, а концептуальная модель освобождения места на рабочем пространстве документа.
Создадим, для начала, структурную часть нашей вкладки:
<div class="visualtip" id="loginbox">
E-Mail address:
<p><input type="text" /></p>
Password:
<p><input type="password" /></p>
</div>
<div class="visualtip v2" id="drownbox">
<p>This is paragraph.</p>
<p>Another paragraph of text.</p>
</div>
Здесь мы обозначили идентификаторы элементов, а также их CSS-классы.
Уже было сказано, что данный элемент должен быть абсолютно позиционирован. Для этого мы будем использовать следующий стиль:
.visualtip
{
position: absolute;
}
Но этого мало: теперь нужно сместить элементы относительно всего документа влево так, чтобы был виден лишь их край. Вместе с этим, придаём элементам законченный вид.
.visualtip
{
display: block;
padding: 10px;
background: #F2F4B2;
border: dashed 1px #ddd;
position: absolute;
letter-spacing: 1.4px;
font-family: Arial;
position: absolute;
width: 300px;
left: -290px;
top: 40px;
}
Так как у нас две вкладки, то вторая должна быть ниже первой, поэтому переопределяем для неё свойство top.
После этого, зададим свойства для вложенных во вкладки полей input.
.visualtip input
{
border: solid 1px #ccc;
font-size: 18px;
color: #444;
letter-spacing: 1.2px;
text-align: center;
}
Приступаем за разработку управляющего JavaScript-кода.
И реализуем основную функцию для создания подобного элемента интерфейса:
function AddSideWidget(fieldid)
{
//Определяем переменные
this.field = $(fieldid);
this.field.setAttribute("maxleft", this.field.offsetLeft);
//Создаём функции для прослушивания событий
listen(this.field, "mouseover", bind(this, "h_mousemove"));
listen(this.field, "mouseout", bind(this, "h_mouseout"));
this.h_mousemove = function()
{
if (this.field.getAttribute("isvisible") == null || this.field.getAttribute("isvisible") == "false")
{
var interval = false;
var _field = this.field;
_field.style.left = parseInt(_field.offsetLeft) + "px";
var t_func = function()
{
if (parseInt(_field.style.left) <= 0)
{
_field.style.left = (parseInt(_field.style.left)+8) + "px";
}
else
{
clearInterval(interval);
_field.style.left = "0px";
_field.setAttribute("isvisible", "true");
}
}
interval = setInterval(t_func, 10);
}
}
this.h_mouseout = function(e)
{
var canout = true;
try
{
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') canout = false;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) canout = false;
}
catch (excp)
{
}
if (canout && this.field.getAttribute("isvisible") == "true")
{
var interval = false;
var _field = this.field;
_field.style.left = parseInt(_field.offsetLeft) + "px";
var t_func = function()
{
if (parseInt(_field.style.left) >= parseInt(_field.getAttribute("maxleft")))
{
_field.style.left = (parseInt(_field.style.left)-8) + "px";
}
else
{
clearInterval(interval);
_field.style.left = parseInt(_field.getAttribute("maxleft")) + "px";
_field.setAttribute("isvisible", "false");
}
}
interval = setInterval(t_func, 10);
}
}
}
Теперь всё готово и можно использовать эти функции.
new AddSideWidget("loginbox");
new AddSideWidget("drownbox");
Также, можно добавить описание на правый, выступающий, край вкладки, чтобы пользователь был в курсе того, что он открывает.
В следующей статье мы рассмотрим как можно усовершенствовать наш код, чтобы элементы автоматически выбирали свою позицию по высоте, а также посмотрим, как можно оптимизировать код.
