—»     —»   Как превратить поля ввода в блоки в виде ярлыков
  Раздел: Формы   Нет комментариев  

Как превратить поля ввода в блоки в виде ярлыков



Многие новые социальные сети и веб-приложения расширяют границы дизайна интерфейса. Поля ввода (Form inputs) значительно изменились за последние 4-5 лет. Среди изменений следует отметить появление такого свойства, как поле ввода с выбором тега, где пользователь вводит определенные слова, которые затем преобразуются в небольшие блоки в виде ярлыков.

Сегодня мы хотим рассказать вам о том, как создать подобный эффект, и использовать его на любом веб-сайте. Чтобы сэкономить время, мы будем использовать jQuery-плагин Tags Input, - он бесплатен и распространяется по методу open source. Мы предпочитаем использовать этот плагин, так как он предоставляет нам множество параметров и опций. Взгляните на демо того, что мы сегодня будем разрабатывать.

Как превратить поля ввода в блоки в виде ярлыков

Демо | Скачать исходный код

Приступаем

Для начала нам нужно скачать копию скрипта, и включить JS/CSS-файлы в основной HTML-файл. Вы можете скачать jQuery Tags Input с официального репозитория на Github. Zip-файл должен содержать минимизированный JS-файл с CSS-стилями. Нам также нужно будет сослаться на копию jQuery-библиотеки, чтобы все заработало.

<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Input Tags Field - Live Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://turbo.designwoop.com/wp-content/themes/DesignWoop/img/favicon.png">
<link rel="icon" href="http://turbo.designwoop.com/wp-content/themes/DesignWoop/img/favicon.png">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.tagsinput.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tagsinput.min.js"></script>
</head>

Теперь сам плагин сгенерирует новое динамическое поле внутри DOM после указания исходного элемента ввода. Это элемент страницы, на который будет ссылаться весь CSS-код плагина, если вам потребуется заменить цвета, размеры или что-либо еще. Самое важное здесь в том, чтобы создать новый элемент формы, который будет содержать универсальное текстовое поле ввода.

<div id="content">
<h1>jQuery-Powered Input Tags</h1>
<p>Add some new tags and press enter to confirm. Backspace will delete old tags in the list. All of the input data is comma-separated and passed into the form action on submit.</p>

<p>When adding & removing a tag the results are output in the javascript console.</p>
<br>

<form id="nothing" name="nothing" method="post" action="#">
<input type="text" name="tags" id="tags" class="tagfield" value="wordpress,fork cms,locomotive">
</form>

Здесь мы запускаем метод .tagsInput() и генерируем эффект без каких-либо кастомных опций. У нас есть возможность выбрать поля ввода по имени или по классу, тем не менее, чаще всего лучше всего будет использовать значение ID. Это поможет нам предоставить самые точные результаты, и избежать случайного указания других полей.

Основные стили

Наши базовые стили довольно простые – здесь представлено несколько собственных сбросов и значения стандартной типографики. Мы импортируем внешнюю таблицу стилей для шрифтов из Google, чтобы затем использовать ее в тегах H1. Также мы скачали бесплатный фон под названием «рисовая бумага» с Subtle Backgrounds, чтобы затем использовать эту текстуру в дизайне.

@import url('http://fonts.googleapis.com/css?family=Kavoon');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 62.5%;
line-height: 1;
color: #444;
background: #edebe7 url('../img/bg.png'); /* http://subtlepatterns.com/rice-paper/ */
}

br { display: block; line-height: 1.6em; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

h1 {
display: block;
text-align: center;
font-family: 'Kavoon', Arial, sans-serif;
color: #626262;
font-size: 3.6em;
line-height: 1.4em;
margin-bottom: 12px;
}

Коды стилей плагина действительно стоят того, чтобы на них взглянуть, если вы планируете изменять интерфейс. Все параметры прописаны в одну строку и рядом друг с другом, но вы без труда сможете внести необходимые изменения.

div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto;}
div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica; font-size:13px;}
div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px; }
div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px; margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; }
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid {background: #FBD8DB !important; color: #90111A !important;}

Также, если вы посмотрите на DOM, то увидите, что новый div-элемент создает под полем ввода. Ему задается id originalfield_tagsinput, который вы затем можете определить посредством CSS. Некоторые разработчики предпочитают редактировать CSS-файлы плагина напрямую. Оба варианта хороши, если вы будете придерживаться структуры, и будете запоминать изменения, которые вносили.

Разработка jQuery

Последний отрывок кода должен следить за запуском метода плагина для активации нашего эффекта ярлыка. Здесь мы можем сохранить все максимально простым, и запустить $(С#tagsТ).tagsInput() без каких-либо внутренних параметров. Это позволит нам поместить все стандартные настройки на место, и таким образом нам будет легче ими управлять.

$(function(){
$('#tags').tagsInput({
'height':'120px',
'width':'550px',
'interactive':true,
'defaultText':'new tag',
'onAddTag':function(tag){
console.log("Added a tag: " + tag)
},
'onRemoveTag':function(tag){
console.log("Removed a tag: " + tag);
},
'removeWithBackspace':true,
'minChars':2,
'maxChars':30,
'placeholderColor':'#777'
});
});

Мы включили несколько дополнительных параметров просто для того, чтобы продемонстрировать вам возможности. Прежде всего, параметры width/height способны выставлять опциональные границы для расширения блока ввода. По умолчанию поле ввода интерактивно, и позволяет вводить новые теги, но вы можете изменить настройки, и сделать поле доступным только для чтения. Мы также обновили текст тег по умолчанию, и теперь он стал более коротким.

minChars, maxChars, removeWithBackspace и placeholderColor должны быть вам понятны. Но вот параметры onAddTag и onRemoveTag могут ввести вас в заблуждение. Это callback-параметры, которые принимают действие или значение функции, как только вы добавляете тег, или убираете его из поля ввода. В нашем примере мы просто выводим log-сообщение, в котором говорится о том, какой тег был добавлен или удален. Но вы можете оформить это по собственному усмотрению и в согласованности с остальным интерфейсом.

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

В завершение

Веб-разработчики могут использовать все эти прекрасные функции интерфейсов, чтобы воспользоваться преимуществом нововведений в современных браузерах. Нам всегда нравились списки тегов, выполненные в такой манере, так как с ними очень просто работать. К тому же, вашим пользователям будет гораздо удобнее пользоваться вашим сайтом. Скачивайте копию нашего примера, и попытайтесь создать нечто собственное для ваших будущих проектов.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: отправные формы, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 4754   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031