http://www.youtube.com/watch?…

>>944155
Невидимый шревт дохуя штоле?

>>944170
Можно сделать ссылку на пикчу, которая нихуя не пикча.

(function($) {

$.widget(‹ui.ta­git›, {
options: {
itemName : ‹item›,
fieldName : ‹tags›,
availableTags : [],
tagSource : null,
removeConfirmation: false,
caseSensitive : true,
placeholderText : null,

// When enabled, quotes are not neccesary
// for inputting multi-word tags.
allowSpaces: false,

// Whether to animate tag removals or not.
animate: true,

// The below options are for using a single field instead of several
// for our form values.
//
// When enabled, will use a single hidden field for the form,
// rather than one per tag. It will delimit tags in the field
// with singleFieldDe­limiter.
//
// The easiest way to use singleField is to just instantiate tag-it
// on an INPUT element, in which case singleField is automatically
// set to true, and singleFieldNode is set to that element. This
// way, you don't need to fiddle with these options.
singleField: false,

singleFieldDe­limiter: ‹,›,

// Set this to an input DOM node to use an existing form field.
// Any text in it will be erased on init. But it will be
// populated with the text of tags as they are created,
// delimited by singleFieldDe­limiter.
//
// If this is not set, we create an input node for it,
// with the name given in settings.fieldName,
// ignoring settings.itemName.
singleFieldNo­de: null,

// Optionally set a tabindex attribute on the input that gets
// created for tag-it.
tabIndex: null,

// Event callbacks.
onTagAdded : null,
onTagRemoved: null,
onTagClicked: null
 },

_create: function() {
// for handling static scoping inside callbacks
var that = this;

// There are 2 kinds of DOM nodes this widget can be instantiated on:
// 1. UL, OL, or some element containing either of these.
// 2. INPUT, in which case ‹singleField› is overridden to true,
// a UL is created and the INPUT is hidden.
if (this.element­.is(‹input›)) {
this.tagList = $(‹<ul></ul>›­).insertAfter(this­.element);
this.options.sin­gleField = true;
this.options.sin­gleFieldNode = this.element;
this.element.css(‹dis­play›, ‹none›);
} else {
this.tagList = this.element.fin­d(‹ul, ol›).andSelf()­.last();
 }

this._tagInput = $(‹<input type=«text» />›).addClass(‹ui-widget-content›);
if (this.options­.tabIndex) {
this._tagInput­.attr(‹tabindex›, this.options.ta­bIndex);
}
if (this.options­.placeholderTex­t) {
this._tagInput­.attr(‹placehol­der›, this.options.pla­ceholderText);
 }

this.options.tag­Source = this.options.tag­Source || function(search, showChoices) {
var filter = search.term.to­LowerCase();
var choices = $.grep(this.op­tions.available­Tags, function(element) {
// Only match autocomplete options that begin with the search term.
// (Case insensitive.)
return (element.toLo­werCase().inde­xOf(filter) === 0);
});
showChoices(this­._subtractArra­y(choices, this.assigned­Tags()));
 };

// Bind tagSource callback functions to this context.
if ($.isFunction(this­.options.tagSou­rce)) {
this.options.tag­Source = $.proxy(this.op­tions.tagSource, this);
 }

Оп как бы говорит нам —  — такая параша, что никаких слов, чтоб описать её не хватит.

this.tagList
.addClass(‹tagit›)
.addClass(‹ui-widget ui-widget-content ui-corner-all›)
// Create the input field.
.append($(‹<li class=«tagit-new»></li>›).ap­pend(this._ta­gInput))
.click(function(e) {
var target = $(e.target);
if (target.hasClas­s(‹tagit-label›)) {
that._trigger(‹on­TagClicked›, e, target.closes­t(‹.tagit-choice›));
} else {
// Sets the focus() to the input field, if the user
// clicks anywhere inside the UL. This is needed
// because the input field needs to be of a small size.
that._tagInput­.focus();
}
 });

// Add existing tags from the list, if any.
this.tagList.chil­dren(‹li›).each(fun­ction() {
if (!$(this).has­Class(‹tagit-new›)) {
that.createTag($(this)­.html(), $(this).attr(‹clas­s›));
$(this).remove();
}
 });

// Single field support.
if (this.options­.singleField) {
if (this.options­.singleFieldNo­de) {
// Add existing tags from the input field.
var node = $(this.option­s.singleFieldNo­de);
var tags = node.val().split(this­.options.single­FieldDelimiter);
node.val('');
$.each(tags, function(index, tag) {
that.createTag(tag);
});
} else {
// Create our single field input after our list.
this.options.sin­gleFieldNode = this.tagList.af­ter(‹<input type=«hidden» style=«displa­y:none;» value="" name=«› + this.options.fi­eldName + ‹» />›);
}
 }

Съеби, баттхёрток.

// Events.
this._tagInput
.keydown(functi­on(event) {
// Backspace is not detected within a keypress, so it must use keydown.
if (event.which == $.ui.keyCode.BAC­KSPACE && that._tagInput­.val() === '') {
var tag = that._lastTag();
if (!that.option­s.removeConfir­mation || tag.hasClass(‹re­move›)) {
// When backspace is pressed, the last tag is deleted.
that.removeTag(tag);
} else if (that.options­.removeConfir­mation) {
tag.addClass(‹re­move ui-state-highlight›);
}
} else if (that.options­.removeConfir­mation) {
that._lastTag()­.removeClass(‹re­move ui-state-highlight›);
 }

// Comma/Space/Enter are all valid delimiters for new tags,
// except when there is an open quote or if setting allowSpaces = true.
// Tab will also create a tag, unless the tag input is empty, in which case it isn't caught.
if (
event.which == $.ui.keyCode.COMMA ||
event.which == $.ui.keyCode.ENTER ||
(
event.which == $.ui.keyCode.TAB &&
that._tagInput­.val() !== ''
) ||
(
event.which == $.ui.keyCode.SPACE &&
that.options.a­llowSpaces !== true &&
(
$.trim(that._ta­gInput.val())­.replace( /^s*/, '' ).charAt(0) != ‹"› ||

(
event.which == $.ui.keyCode.SPACE &&
that.options.a­llowSpaces !== true &&
(
$.trim(that._ta­gInput.val())­.replace( /^s*/, '' ).charAt(0) != ‹«› ||
(
$.trim(that._ta­gInput.val())­.charAt(0) == ‹»› &&
$.trim(that._ta­gInput.val())­.charAt($.trim(that­._tagInput.val())­.length — 1) == ‹"› &&
$.trim(that._ta­gInput.val())­.length — 1 !== 0
)
)
)
) {
event.preventDe­fault();
that.createTag(that­._cleanedInput());

// The autocomplete doesn't close automatically when TAB is pressed.
// So let's ensure that it closes.
that._tagInput­.autocomplete(‹clo­se›);
}
}).blur(functi­on(e){
// Create a tag when the element loses focus (unless it's empty).
that.createTag(that­._cleanedInput());
 });

// Autocomplete.
if (this.options­.availableTags || this.options.tag­Source) {
this._tagInput­.autocomplete({
source: this.options.tag­Source,
select: function(event, ui) {
// Delete the last tag if we autocomplete something despite the input being empty
// This happens because the input's blur event causes the tag to be created when
// the user clicks an autocomplete item.
// The only artifact of this is that while the user holds down the mouse button
// on the selected autocomplete item, a tag is shown with the pre-autocompleted text,
// and is changed to the autocompleted text upon mouseup.
if (that._tagInput­.val() === '') {
that.removeTag(that­._lastTag(), false);
}
that.createTag(u­i.item.value);
// Preventing the tag input to be updated with the chosen value.
return false;
}
});
}
 },

_cleanedInput: function() {
// Returns the contents of the tag input, cleaned and ready to be passed to createTag
return $.trim(this._ta­gInput.val().re­place(/^«(.*)»$/, ‹$1›));
 },

_lastTag: function() {
return this.tagList.chil­dren(‹.tagit-choice:last›);
 },

assignedTags: function() {
// Returns an array of tag string values
var that = this;
var tags = [];
if (this.options­.singleField) {
tags = $(this.option­s.singleFieldNo­de).val().split(this­.options.single­FieldDelimiter);
if (tags[0] === '') {
tags = [];
}
} else {
this.tagList.chil­dren(‹.tagit-choice›).each(fun­ction() {
tags.push(that­.tagLabel(this));
});
}
return tags;
 },

_updateSingle­TagsField: function(tags) {
// Takes a list of tag string values, updates this.options.sin­gleFieldNode.val to the tags delimited by this.options.sin­gleFieldDelimi­ter
$(this.option­s.singleFieldNo­de).val(tags.jo­in(this.option­s.singleFieldDe­limiter));
 },

_subtractArray: function(a1, a2) {
var result = [];
for (var i = 0; i < a1.length; i++) {
if ($.inArray(a1[i], a2) == -1) {
result.push(a1[i]);
}
}
return result;
 },

tagLabel: function(tag) {
// Returns the tag's string label.
if (this.options­.singleField) {
return $(tag).children(‹­.tagit-label›).text();
} else {
return $(tag).children(‹in­put›).val();
}
 },

_isNew: function(value) {
var that = this;
var isNew = true;
this.tagList.chil­dren(‹.tagit-choice›).each(fun­ction(i) {
if (that._format­Str(value) == that._formatStr(that­.tagLabel(this))) {
isNew = false;
return false;
}
});
return isNew;
 },

_formatStr: function(str) {
if (this.options­.caseSensitive) {
return str;
}
return $.trim(str.to­LowerCase());
 },

createTag: function(value, additionalClass) {
var that = this;
// Automatically trims the value of leading and trailing whitespace.
value = $.trim(value);

if (!this._isNew(va­lue) || value === '') {
return false;
 }

var label = $(this.option­s.onTagClicked ? ‹<a class=«tagit-label»>› : ‹<span class=«tagit-label»></span>­›).text(value);

// Create tag.
var tag = $(‹<li></li>›)
.addClass(‹tagit-choice ui-widget-content ui-state-default ui-corner-all›)
.addClass(addi­tionalClass)
.append(label);

// Button for removing the tag.
var removeTagIcon = $(‹<span></span>›)
.addClass(‹ui-icon ui-icon-close›);
var removeTag = $(‹<a><span class=«text-icon»>\xd7</s­pan>›) // \xd7 is an X
.addClass(‹tagit-close›)
.append(remove­TagIcon)
.click(function(e) {
// Removes a tag when the little ‹x› is clicked.
that.removeTag(tag);
});
tag.append(re­moveTag);

// Unless options.singleField is set, each tag has a hidden input field inline.
if (this.options­.singleField) {
var tags = this.assigned­Tags();
tags.push(value);
this._updateSin­gleTagsField(tag­s);
} else {
var escapedValue = label.html();
tag.append(‹<input type=«hidden» style=«displa­y:none;» value=«› + escapedValue + ‹» name=«› + this.options.i­temName + ‹[› + this.options.fi­eldName + ‹][]» />›);
 }

this._trigger(‹on­TagAdded›, null, tag);

// Cleaning the input.
this._tagInput­.val('');

// insert tag
this._tagInput­.parent().befo­re(tag);
 },

removeTag: function(tag, animate) {
animate = animate || this.options.a­nimate;

tag = $(tag);

this._trigger(‹on­TagRemoved›, null, tag);

if (this.options­.singleField) {
var tags = this.assigned­Tags();
var removedTagLabel = this.tagLabel(tag);
tags = $.grep(tags, function(el){
return el != removedTagLabel;
});
this._updateSin­gleTagsField(tag­s);
}
// Animate the removal.
if (animate) {
tag.fadeOut(‹fas­t›).hide(‹blin­d›, {direction: ‹horizontal›}, ‹fast›, function(){
tag.remove();
}).dequeue();
} else {
tag.remove();
}
 },

removeAll: function() {
// Removes all tags.
var that = this;
this.tagList.chil­dren(‹.tagit-choice›).each(fun­ction(index, tag) {
that.removeTag(tag, false);
});
 }

});

})(jQuery);