главная

Теги:


Всплывающая мини-панель инструментов

В данном уроке мы разберемся, как сделать очень удобный инструмент - всплывающую панель с различными функциями. В качестве примера взята мини-панель инструментов, которая появилась в Microsoft Word 2007 и содержание которой изменяется в зависимости от выделенного контента. Так как мини-панель всегда появляется рядом с курсором мыши, то пользователь может быстро выбрать и применить нужную функцию к выделению.

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

В нашем уроке мини-панель очень простая. Она содержит только кнопки для форматирования текста Жирный, подЧеркнутый, Курсив, и Ссылка.


Также нужно определить полупрозрачность для мини-панели по умолчанию, и полную непрозрачность в состоянии hover (когда курсор мыши находится над мини-панелью).

#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;
 -webit-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 для установки значений свойств top и left для контейнера. Для вывода мини-панели мы используем событие .select(), при обработке которого контейнер проявляется в заданном положении. Также нужно обрабатывать событие .mousedown() для выключения мини-панели, когда пользователь нажмет кнопку мыши где-то в другом месте..

$(document).ready(function() {
 var mouseX = 0;
 var mouseY = 0;

 $("#description").mousemove(function(e) {
 // отслеживаем положение курсора мыши
; mouseX = e.pageX;
 mouseY = e.pageY;
 });
 
 // Выключаем панель при любом нажатии кнопки мыши
 $("#description").mousedown(function() {
 $("#menu").fadeOut("1000");
 });

 $("#description").select(function() {
 // получаем положение курсора мыши, чтобы вывести  мини-панель
 $("#menu").css("top", mouseY - 30)
 .css("left", mouseX + 10).fadeIn("1000");
 });
});

Добавляем мини-панели функциональность

Теперь, когда мы включаем/выключаем панель, самое время добавить ей функциональность. Если нужно сделать выделенный текст жирным, то его надо заключить в теги <strong> и </strong> (конечно, той же цели можно достичь с помощью элемента span и правил CSS, но в нашем уроке мы будем использовать теги).

function wrapText(startText, endText){
 // Получаем текст до выделения
 var before = $("#description").val().substring(0, $("#description").caret().start);
 
 // Получаем текст после выделения
 var after = $("#description").val().substring($("#description").caret().end, $("#description").val().length);
 
 // Объединяем текст до выделения, измененный текст выделения и текст после выделения
 $("#description").val(before + startText + $("#description").caret().text + endText + after);
}

Данная функция, которая использует плагин jCaret, оборачивает выделенный текст тегами и объединяет его с текстом до и после выделения. Достаточно просто, особенно когда используется плагин наподобие jCaret. Нужно только обработать событие click для каждой кнопки мини-панели.

$("#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("Введите URL", "http://");
    if (url != null)
        wrapText("", "");
    $("#menu").fadeOut("1000");
});

Обработка события click для кнопок Жирный, подЧеркнутый, и Курсив очень проста. Вызываем функцию wrapText() с соответствующими открывающим и закрывающим тегами в качестве аргументов, а затем выключаем мини-панель. Обработка события click для кнопки Ссылка немного отличается - сначала нужно попросить пользователя ввести URL, а затем вставить введенную информацию в открывающий тег ссылки.

Заключение

Очень удобный инструмент фактически отсутствует в веб пространстве. Было бы здорово иметь такую возможность в редакторе WYSIWYG, таком как TinyMCE, или в форме ввода комментариев в блоге. Однако в мини-панель можно добавить и более изощренные функции, которые будут не только форматировать текст, но и выполнять дополнительные действия, например, формировать email.

Источник урока: www.jankoatwarpspeed.com/post/2010/05/23/microsoft-office-minibar-jQuery-CSS3.aspx

 

Урок Создан:2011-02-10 Просмотров:2242

Добавить комментарий:


Copyright© 2009 Hosted by Zhost