Я думаю, что многие согласятся с утверждением, что дизайн продуктов Microsoft частенько радует глаз. К примеру, мини-бар, который мы увидели с выходом в свет MS Office 2007. По сути он повторяет часть функций одной из панелей быстрого доступа. Главным его плюсом является возможность изменять стиль выделенного текста «на лету». Мини-бар обычно появляется рядом с курсором мыши, что позволяет пользователю быстро применить нужные действия к выделенному тексту. Примерно такой же мини-бар мы попробуем создать сегодня для сайта. Вариантов его применения масса. Один из них комментарии — позвольте пользователям применять стандартные тэги для оформления своих комментариев.
Сломался ноутбук? Тогда воспользуйся услугой ремонт ноутбука от компании ISKRA в Москве — это сервисный центр осуществляющий ремонт любой сложности и работающий со всеми ведущими производителями ноутбуков. На проведенные работы дается гарантия.
Как работает мини-бар?
Когда пользователь выделяет текст в поле ввода появляется мини-бар, полупрозрачный, рядом с выделением. Когда пользователь наводит курсор мыши на мини-бар он перестает быть прозрачным. Мини-бар исчезает если пользователь кликает в любом месте поля ввода, либо применяет какое-либо действие, нажимая на одну из кнопок мини-бара.
Посмотреть демо
В этой статье я хочу рассказать как создать простой мини-бар — у нас будет всего 4 функциональные кнопки: жирный (bold), наклонный (italic), подчеркнутый (underline) и ссылка (link).
Нам нужно сделать мини-бар полупрозрачным при появлении и изменять прозрачность при наведении на него курсора мыши:
#menu {padding:5px; background-color:#f5f5f5;
background-color:rgba(245, 245, 245, 0.6);
display:none; position:absolute; top:0px; left:0px; overflow:hidden;
border:solid 1px #929292;
border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: 5px 5px 5px #888; -moz-box-shadow: 1px 1px 3px #555; -webkit-box-shadow: 5px 5px 5px #888;}
#menu:hover {background-color:rgba(245, 245, 245, 1);}
Появление и исчезновение
Дабы у нас была возможность контролировать положение мини-бара нам придется отслеживать положение курсора мыши и использовать координаты x
и y
для того, чтобы установить верхнюю левую границу контейнера с мини-баром. Для того, чтобы показывать мини-бар над выделением мы будем использовать событие .select()
. Контейнер с мини-баром будет появляться в определенном месте после этого события. Нам так же потребуется использовать событие .mousedown()
, чтобы вовремя убирать мини-бар если пользователь кликнул где-либо еще.
$(document).ready(function() {
var mouseX = 0;
var mouseY = 0;
$("#description").mousemove(function(e) {
// track mouse position
mouseX = e.pageX;
mouseY = e.pageY;
});
// Fade out the menu on any click
$("#description").mousedown(function() {
$("#menu").fadeOut("1000");
});
$("#description").select(function() {
// get the mouse position an show the menu
$("#menu").css("top", mouseY - 30)
.css("left", mouseX + 10).fadeIn("1000");
});
});
Обработка кликов
Теперь когда мы научились обрабатывать появление и исчезновение мини-бара, добавим немного функциональности. Если мы хотим сделать выделенный текст жирным, то нам достаточно заключить выделение в тэг strong
.
function wrapText(startText, endText){
// Get the text before the selection
var before = $("#description").val().substring(0, $("#description").caret().start);
// Get the text after the selection
var after = $("#description").val().substring($("#description").caret().end, $("#description").val().length);
// merge text before the selection, a selection wrapped with inserted text and a text after the selection
$("#description").val(before + startText + $("#description").caret().text + endText + after);
}
Эта функция опирается на плагин jCaret. Работа функции заключается в том, что она обрамляет выделенный текст в теги и создает отступы до и после выделенного текста. Теперь нам требуется только обработать события для каждой из кнопок нашего мини-бара:
$("#bold").click(function() {
wrapText("", "");
$("#menu").fadeOut("1000");
});
$("#italic").click(function() {
wrapText("", "");
$("#menu").fadeOut("1000");
});
$("#underline").click(function() {
wrapText("", "");
$("#menu").fadeOut("1000");
});
$("#link").click(function() {
var url = prompt("Enter URL", "http://");
if (url != null)
wrapText("", "");
$("#menu").fadeOut("1000");
});
Обработка кликов на кнопки нашего мини-бара достаточно проста. Мы просто вызываем функцию wrapText()
, подставляем нужные теги в начало и конец выделенного текста и скрываем мини-бар. Обработка события при клике на кнопку link
немного отличается от всех остальных. Мы сначала просим пользователя ввести URL
, а после вставляем полученный URL
в тег a
.
Посмотреть демо
Заключение
Я, как постоянный пользователь пакета MS Office, постоянно использую в работе мини-бар от MS и мне его не хватает при работе в интернете. Очень хотелось бы увидеть такой мни-бар в редакторе wordpress, например. Его так же можно применять в формах комментирования и обратной связи.
Такой код работает почти во всех браузерах. Код не совершенен — он может быть оптимизирован и улучшен функционально. Если у вас появилось желание — используйте его в своих проектах. Увидели ошибку — поделитесь в комментариях.
До скорых встреч!
Спасибо, отличная вещь.