Статьи

Почему и как создать мини-бар Microsoft Office с помощью jQuery и CSS3

Февраль 2, 2018

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

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

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

В этом уроке будет показан довольно простой мини-бар, в котором есть только кнопки, выделенные жирным шрифтом , подчеркиванием , курсивом и ссылками .

<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;
       -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 a y, чтобы задать свойства top и left для его контейнера. Чтобы показать мини-бар при выборе, мы будем использовать событие .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> и </ strong> (конечно, это можно сделать с помощью элемента span и некоторого CSS, но для целей данного урока я выделю выделение тегами ).

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, оборачивает выделение тегами и объединяет его с текстом до и после выделения. Довольно просто, когда у вас есть полезный плагин, такой как 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 (), передаем ей соответствующие начальные и конечные теги и исчезаем из мини-бара. Обработка нажатия кнопки ссылки немного отличается — сначала нужно попросить пользователей ввести URL, а затем передать URL внутри открывающего тега.

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

Вывод

Как обычный пользователь Word, я так привык к этой маленькой панели инструментов, и мне не хватает ее в Интернете. Я действительно хотел бы видеть это как функцию в редакторах WYSIWYG, таких как TinyMCE. Это также может быть частью комментариев / контактных форм. Чтобы поэкспериментировать с этим больше, я добавлю его в форму комментариев как часть текущей версии блога.

Хотя он работает во всех основных браузерах, код практически не совершенен — ​​его можно оптимизировать, и здесь можно увидеть больше возможностей. Не стесняйтесь играть с ним, и если вы найдете ошибку, пожалуйста, напишите мне.

34
Share: