Создаем элегантное поле для ввода меток
Проект Delicious является достаточно популярным сервисом для хранения закладок. С его помощью легко сохранять важные ссылки. В данном проекте есть очень удобный инструмент - поле для ввода меток при сохранении ссылки. В нашем уроке мы сделаем интерфейс для подобного инструмента с использованием jQuery, который можно будет использовать в своих проектах.
HTML
Поле ввода меток проекта Delicious является не просто элементом ввода меток. В действительности оно является элементом div
box с тегами 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> '+ '<a href="/" onclick="removeTag(this); return false;"'+ ' class="del" id="del_'+tag+'">×</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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Постановка целей, приближение к ним день за днем и, наконец, их достижение — это и есть ключ к счастью Трейси Брайан - - современный американский профессиональный лектор-преподаватель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.