Мини-бар MS Office с помощью jQuery и CSS

Я думаю, что многие согласятся с утверждением, что дизайн продуктов Microsoft частенько радует глаз. К примеру, мини-бар, который мы увидели с выходом в свет MS Office 2007. По сути он повторяет часть функций одной из панелей быстрого доступа. Главным его плюсом является возможность изменять стиль выделенного текста «на лету». Мини-бар обычно появляется рядом с курсором мыши, что позволяет пользователю быстро применить нужные действия к выделенному тексту. Примерно такой же мини-бар мы попробуем создать сегодня для сайта. Вариантов его применения масса. Один из них комментарии — позвольте пользователям применять стандартные тэги для оформления своих комментариев.

Сломался ноутбук? Тогда воспользуйся услугой ремонт ноутбука от компании ISKRA в Москве — это сервисный центр осуществляющий ремонт любой сложности и работающий со всеми ведущими производителями ноутбуков. На проведенные работы дается гарантия.

Как работает мини-бар?

Когда пользователь выделяет текст в поле ввода появляется мини-бар, полупрозрачный, рядом с выделением. Когда пользователь наводит курсор мыши на мини-бар он перестает быть прозрачным. Мини-бар исчезает если пользователь кликает в любом месте поля ввода, либо применяет какое-либо действие, нажимая на одну из кнопок мини-бара.

Посмотреть демо

В этой статье я хочу рассказать как создать простой мини-бар — у нас будет всего 4 функциональные кнопки: жирный (bold), наклонный (italic), подчеркнутый (underline) и ссылка (link).

<textarea id="description" rows="8" cols="50"></textarea>
<div id="menu">
    <a href="#" id="bold">b</a>
    <a href="#" id="italic">i</a>
    <a href="#" id="underline">u</a>
    <a href="#" id="link">Link</a>
</div>

Нам нужно сделать мини-бар полупрозрачным при появлении и изменять прозрачность при наведении на него курсора мыши:

#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("<strong>", "</strong>");
    $("#menu").fadeOut("1000");
});
 
$("#italic").click(function() {
    wrapText("<em>", "</em>");
    $("#menu").fadeOut("1000");
});
 
$("#underline").click(function() {
    wrapText("<u>", "</u>");
    $("#menu").fadeOut("1000");
});
 
$("#link").click(function() {
    var url = prompt("Enter URL", "http://");
    if (url != null)
        wrapText("<a href='" + url + "'>", "</a>");
    $("#menu").fadeOut("1000");
});

Обработка кликов на кнопки нашего мини-бара достаточно проста. Мы просто вызываем функцию wrapText(), подставляем нужные теги в начало и конец выделенного текста и скрываем мини-бар. Обработка события при клике на кнопку link немного отличается от всех остальных. Мы сначала просим пользователя ввести URL, а после вставляем полученный URL в тег a.

Посмотреть демо

Заключение

Я, как постоянный пользователь пакета MS Office, постоянно использую в работе мини-бар от MS и мне его не хватает при работе в интернете. Очень хотелось бы увидеть такой мни-бар в редакторе wordpress, например. Его так же можно применять в формах комментирования и обратной связи.

Такой код работает почти во всех браузерах. Код не совершенен — он может быть оптимизирован и улучшен функционально. Если у вас появилось желание — используйте его в своих проектах. Увидели ошибку — поделитесь в комментариях.

До скорых встреч!

Читать предыдущую статью 6 полезных CSS кнопок

Мини-бар MS Office с помощью jQuery и CSS

Как работает мини-бар?

Появление и исчезновение

Обработка кликов

Заключение

Интересные статьи по теме:

Понравилась статья? Поблагодарить легко!

↓ ↓ ↓ ↓ ↓ ↓

Разделы