Создаем элегантное поле для ввода меток

Проект Delicious является достаточно популярным сервисом для хранения закладок. С его помощью легко сохранять важные ссылки. В данном проекте есть очень удобный инструмент - поле для ввода меток при сохранении ссылки. В нашем уроке мы сделаем интерфейс для подобного инструмента с использованием jQuery, который можно будет использовать в своих проектах.

 

HTML

Поле ввода меток проекта Delicious является не просто элементом ввода меток. В действительности оно является элементом divbox с тегами  ul и li. Мы сделаем почти такую же структуру в нашем уроке. Элемент ввода располагается в последнем элементе списка. Когда пользователь вводит новую метку, новый элемент списка будет создаваться до тега li, в котором располагается элемент ввода.

<div id="boxTags">
  <input type="hidden" id="hiddenTags"/>
  <ul id="ulTags" style="clear:both;">
      <li id="newTagInput"><input type="text" id="inputTag"/></li>
  </ul>
  <div style="clear:both;"></div>
</div>

 

jQuery

В проекте Delicious метки разделяются пробелом, а не запятой. Мы будем проверять ввод с клавиатуры и после ввода названия метки и нажатия пробела новая метка будет вставлена в массив arrayTags после проверки на повтор.

Удаление метки

Есть три способа, которыми можно удалить метки. Первый - нажать кнопку “x” на каждой метке. Второй - удалить метку слева от курсора ввода с помощью клавиши backspace.  Третий - удалить метки справа от курсора ввода с помощью клавиши delete. После удаления метки, она удаляется из массива.

Перемещение курсора ввода

Курсор ввода можно переместить по списку меток с помощью клавиш стрелок. Так можно удалить из списка нужную метку, которая может находиться в начале списка.

var arrayTags = [""];	// Массив, который содержит метки
var index = 0;
 
// Удаление элемента из массива
function removeByValue(arr, val) {
    for(var i=0; i<arr.length; i++) {
        if(arr[i] == val) {
            arr.splice(i, 1);
            break;
        }
    }
    index--;
}

// Удаление метки из списка 
function removeTag(el) {
    tag = $(el).prev().html();
    $("#tag-"+tag).remove();
    removeByValue(arrayTags, tag);
    $("#inputTag").focus();
}
 
$(document).ready(function() {
    var inputWidth = 16;
 
    // Вставка метки в список
    function insertTag(tag) {
        var liEl = '<li id="tag-'+tag+'" class="li_tags">'+
                    '<span href="javascript://" class="a_tag">'+tag+'</span>&nbsp;'+
                    '<a href="/" onclick="removeTag(this); return false;"'+
                    ' class="del" id="del_'+tag+'">&times;</strong></a>'+
                    '</li>';
        return liEl;
    }
 
    $("#inputTag").focus().val("");
    $("#hiddenTags").val("");
 
   // Проверяем нажатие клавиши 
    $("#inputTag").keydown(function(event) {
        var textVal = jQuery.trim($(this).val()).toLowerCase();
        var keyCode = event.which;
 
        // Перемещаемся влево (нажата клавиша влево)
        if (keyCode == 37 && textVal == '') {
            $("#newTagInput").insertBefore($("#newTagInput").prev());
            $("#inputTag").focus();
        }
 
        // Перемещаемся вправо (нажата клавиша вправо)
        if (keyCode == 39 && textVal == '') {
            $("#newTagInput").insertAfter($("#newTagInput").next());
            $("#inputTag").focus();
        }
 
        // Удаляем предыдущую метку (нажата клавиша backspace)
        if (keyCode == 8 && textVal == '') {
            deletedTag = $("#newTagInput").prev().find(".a_tag").html();
            removeByValue(arrayTags, deletedTag);
            $("#newTagInput").prev().remove();
            $("#inputTag").focus();
        }
 
        // Удаляем следующую метку (нажата клавиша delete)
        if (keyCode == 46 && textVal == '') {
            deletedTag = $("#newTagInput").next().find(".a_tag").html();
            removeByValue(arrayTags, deletedTag);
            $("#newTagInput").next().remove();
            $("#inputTag").focus();
        }
 
        if ((47 < keyCode && keyCode < 106) || (keyCode == 32)) {
 
            if (keyCode != 32) {
                // Пользователь все еще вводит метку
                inputWidth = inputWidth + 7;
                $(this).attr("style", "width:"+inputWidth+"px");
                $("#newTagInput").attr("style", "width:"+inputWidth+"px");
            } else if (keyCode == 32 && (textVal != '')) {
                // Пользователь создает новую метку
                var isExist = jQuery.inArray(textVal, arrayTags);
 
                if (isExist == -1) {
                    // Вставляем новую метку (видимый элемент)
                    $(insertTag(textVal)).insertBefore("#newTagInput");
 
                    // Вставляем новую метку в массив JavaScript
                    arrayTags[index] = textVal;
                    index++;
                }
                inputWidth = 16;
                $(this).attr("style", "width:"+inputWidth+"px"); // Ширина элемента будет соответствовать длине ввода
                $("#newTagInput").attr("style", "width:23px")
                $(this).val("");
            } else {
                $(this).val("");
            }
        }
    });
}); 

CSS

Ниже приведенные стили используются для формирования внешнего вида полученной разметки.

* {
    font-family: Arial;
}
#boxTags {
    border: 1px solid #d3d3d3;
    width: 500px;
    padding: 10px 10px 0 10px;
    margin: 0 auto;
    margin-top: 10px;
}
#ulTags {
    padding: 0;
    margin: 0;
}
#ulTags .li_tags {
    border: 1px solid #e3e3e3;
    background: #e3e3e3;
    display: inline;
    float: left;
    list-style: none;
    margin: 0 10px 10px 0;
    padding: 0 3px 4px 5px;
}
#ulTags .li_tags:hover {
    border-color: #0099cc;
}
#newTagInput {
    display: inline;
    float: left;
    list-style: none;
    margin: 0 10px 10px 0;
    padding: 0 2px 2px 0;
    width: 23px;
}
.a_tag {
    color: #000000;
    text-decoration: none;
    font-size: 12px;
}
.a_tag:hover {
    color: #000000;
}
.del {
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
    padding: 1px 4px 1px 4px;
    background: #0099cc;
    color: #ffffff;
    position: relative;
}
.del:hover {
    background: #ff0000;
}
input[type="text"] {
    width: 23px;
    border: 1px solid #ffffff;
    font-size: 12px;
    outline: none;
}


Готово!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/9lzN8_DPjt8/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Создаем элегантное поле для ввода меток | | 2012-06-25 16:21:37 | | Статьи Web-мастеру | | Проект Delicious является достаточно популярным сервисом для хранения закладок. С его помощью легко сохранять важные ссылки. В данном проекте есть очень удобный инструмент - поле для ввода меток при | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: