Динамические метки FrontEnd

Здравствуйте! Данный урок первый из двух, которые будут посвящены созданию динамическим меткам. В первом уроке речь будет идти о части FrontEnd. Итак, для реализации используем следующую html структуру:

<ul class="tags">
<li class="tag-new">
     <input maxlength="25" class="tag-input">
</li>
</ul>

Помимо этого, в список будут добавляться пункты в формате:

<li class="tag">
<span>текст</span>
<a><span></span></a>
</li>

Далее следуют скрипты, отвечающие за добавление и удаление тегов. Добавление тега в список происходит путем его ввода в текстовое поле. Подтверждение добавления тега к списку происходит двумя путями: при потери полем фокуса и при разделении тегов запятыми.

Ниже представлен скрипт, который содержит функцию добавления в список и несколько событий при которых эта функция будет вызвана.

function add(element)
{
         var newTag = $(element).val();
         if(newTag.length > 0)
         {
                  $(element).val('');
                  $(element).before('<li class="tag"><span>'
 + newTag + '</span><a><span></span></a></li>');
         }
}

$('.tag-input').on('blur', function(event){
                   add(this);
});

$('.tag-input').keypress(function(event){

         if(event.which == 44)
         {
                  event.preventDefault();
                  add(this);
         }

});

Удалить тег из списка так же можно несколькими путями: по нажатию на символ «х», который присутствует у каждого элемента, а так же нажатием клавиши backspace начиная с конечного:

$('.tag a').on('click', function(event){$(this).parent('li.tag').remove();});
$('.tag-input').on('keydown', function(event){
         if(event.which == 8 && $(this).val() == '')
         {
                  $('li.tag').last().remove();
         }
});

На этом работа над frontend-ом закончена. Так же в дальнейшем, а именно во второй части динамических меток BackEnd, будут добавлены еще некоторые js скрипты, но их целью будет взаимодействие frontend-а, поэтому они не были рассмотрены в этой части урока.

На этом все. Благодарю за внимание!