Skip to content
Browse files

add jQuery ThemeRoller support.

add zendesk theme for tag-it widget.
animate tag removal.
  • Loading branch information...
1 parent fec2a9e commit 9080c1dc9827519ff653038f60723b4172bf9a8f @aehlke committed
Showing with 127 additions and 82 deletions.
  1. +40 −54 css/jquery.tagit.css
  2. +48 −0 css/tagit.ui-zendesk.css
  3. +4 −1 example.html
  4. +35 −27 js/tag-it.js
View
94 css/jquery.tagit.css
@@ -1,4 +1,4 @@
-.ui-autocomplete {
+/*.ui-autocomplete {
background-color: #eee;
position: absolute;
cursor: default;
@@ -7,79 +7,65 @@
list-style: none;
}
.ui-autocomplete .ui-menu-item a {
- display:block;
- padding:4px 6px;
- text-decoration:none;
- line-height:12px;
+ display: block;
+ padding: 4px 6px;
+ text-decoration: none;
+ line-height: 12px;
}
.ui-autocomplete .ui-menu-item a.ui-state-hover,
.ui-autocomplete .ui-menu-item a.ui-state-active {
- background-color:#78959D;
- color:#fff;
- margin:0;
+ background-color: #78959D;
+ color: #fff;
+ margin: 0;
}
-
+*/
ul.tagit {
- padding:1px 5px;
- border-style:solid;
- border-width:1px;
- border-color:#C6C6C6;
- overflow:auto;
+ padding: 1px 5px;
+ overflow: auto;
}
ul.tagit li {
- -moz-border-radius:5px 5px 5px 5px;
- border-radius:5px 5px 5px 5px;
- -webkit-border-radius:5px 5px 5px 5px;
display: block;
float: left;
- margin:2px 5px 2px 0;
+ margin: 2px 5px 2px 0;
}
ul.tagit li.tagit-choice {
- background-color:#DEE7F8;
- border:1px solid #CAD8F3;
- padding:2px 4px 3px;
-}
-ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove {
- background-color:#bbcef1;
- border-color:#6d95e0;
+ padding: .2em 18px .2em .5em;
+ position: relative;
}
ul.tagit li.tagit-new {
- padding:2px 4px 3px;
- padding:2px 4px 1px;
- padding:2px 4px 1px 0;
+ padding: 2px 4px 1px 0;
}
-
ul.tagit li.tagit-choice input {
- display:block;
- float:left;
- margin:2px 5px 2px 0;
+ display: block;
+ float: left;
+ margin: 2px 5px 2px 0;
}
ul.tagit li.tagit-choice a.tagLabel {
- cursor:pointer;
- text-decoration:none;
+ cursor: pointer;
+ text-decoration: none;
}
ul.tagit li.tagit-choice a.close {
- color:#777777;
- cursor:pointer;
- font-weight:bold;
- outline:medium none;
- padding:2px 0 2px 3px;
- text-decoration:none;
-}
-ul.tagit li.tagit-choice a.tagLabel:hover
-ul.tagit li.tagit-choice a.close:hover {
- color:#222;
+ cursor: pointer;
}
ul.tagit input[type="text"] {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border:none;
- margin:0;
- padding:0;
- width:inherit;
- border-color:#C6C6C6;
- background-color:#FFFFFF;
- color:#333333;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+
+ border: none;
+ margin: 0;
+ padding: 0;
+ width: inherit;
+ border-color: #C6C6C6;
+ background-color: #FFFFFF;
+ color: #333333;
outline: none;
}
+ul.tagit .tagit-choice a.ui-icon {
+ display: inline-block;
+ position: absolute;
+ top: 50%;
+ margin-top: -8px;
+ right: .1em;
+}
+
View
48 css/tagit.ui-zendesk.css
@@ -0,0 +1,48 @@
+
+/* Optional scoped theme for tag-it which mimics the zendesk widget. */
+
+
+ul.tagit {
+ border-style: solid;
+ border-width: 1px;
+ border-color: #C6C6C6;
+}
+ul.tagit li.tagit-choice {
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ -webkit-border-radius: 6px;
+ border: 1px solid #CAD8F3;
+
+ background: none;
+ background-color: #DEE7F8;
+
+ color: #555;
+ font-weight: normal;
+}
+ul.tagit .tagit-choice a.ui-icon {
+ right: .4em;
+}
+ul.tagit li.tagit-choice a.close {
+ text-decoration: none;
+}
+ul.tagit li.tagit-choice a.ui-icon {
+ background-image: none;
+ text-indent: inherit;
+ width: inherit;
+ height: inherit;
+}
+ul.tagit li.tagit-choice a.close:before {
+ content: '×';
+ font-weight: bold;
+ color: #777;
+}
+ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove {
+ background-color: #bbcef1;
+ border-color: #6d95e0;
+}
+ul.tagit li.tagit-choice a.tagLabel:hover,
+ul.tagit li.tagit-choice a.close:hover:before {
+ color: #222;
+}
+
+
View
5 example.html
@@ -8,7 +8,10 @@
<!--<link href="css/reset.css" rel="stylesheet" type="text/css">-->
<link href="css/master.css" rel="stylesheet" type="text/css">
- <link href="css/jquery-ui/jquery.ui.autocomplete.custom.css" rel="stylesheet" type="text/css">
+ <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
+ <link href="css/jquery.tagit.css" rel="stylesheet" type="text/css">
+ <!--<link href="css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">-->
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
View
62 js/tag-it.js
@@ -1,7 +1,3 @@
- /*if (options_or_action == 'clear') {
- // Resets the widget, removing all tags
- return this; // for chainability
- } else {*/
(function($) {
@@ -40,7 +36,7 @@
var self = this;
this.tagList = this.element;
- this._tagInput = $('<input class="tagit-input" type="text" ' + (this.options.tabIndex ? 'tabindex="' + this.options.tabIndex + '"' : '') + '>');
+ this._tagInput = $('<input class="tagit-input" type="text" ' + (this.options.tabIndex ? 'tabindex="' + this.options.tabIndex + '"' : '') + '>');
var BACKSPACE = 8,
ENTER = 13,
@@ -59,31 +55,32 @@
};
this.tagList
- // add the tagit CSS class.
.addClass('tagit')
+ .addClass('ui-widget ui-widget-content ui-corner-all')
// create the input field.
.append($('<li class="tagit-new"></li>\n').append(this._tagInput))
.click(function(e) {
- if (e.target.className == 'close') {
+ var target = $(e.target);
+ if (target.hasClass('close')) {
// Removes a tag when the little 'x' is clicked.
// Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
- self.removeTag($(e.target).parent());
- } else if (e.target.className == 'tagit-label' && self.options.onTagClicked) {
- self.options.onTagClicked($(e.target).parent());
+ self.removeTag(target.parent());
+ } else if (target.hasClass('tagit-label') && self.options.onTagClicked) {
+ self.options.onTagClicked(target.parent());
} 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.
self._tagInput.focus();
}
- })
- // add existing tags
- .children('li')
- .each(function() {
- if (!$(this).hasClass('tagit-new')) {
- self.createTag($(this).html(), $(this).attr('class'));
- $(this).remove();
- }
- });
+ });
+
+ // Add existing tags.
+ this.tagList.children('li').each(function() {
+ if (!$(this).hasClass('tagit-new')) {
+ self.createTag($(this).html(), $(this).attr('class'));
+ $(this).remove();
+ }
+ });
if (this.options.singleField) {
if (this.options.singleFieldNode) {
@@ -134,7 +131,6 @@
)
)
) {
-
event.preventDefault();
self.createTag(self._cleanedInput());
}
@@ -158,7 +154,7 @@
// on the selected autocomplete item, a tag is shown with the pre-autocompleted text,
// and is changed to the autocompleted text upon mouseup.
if (self._tagInput.val() === '') {
- self.removeTag(self.tagList.children('.tagit-choice:last'));
+ self.removeTag(self.tagList.children('.tagit-choice:last'), false);
}
self.createTag(ui.item.value);
// Preventing the tag input to be updated with the chosen value.
@@ -246,12 +242,14 @@
var label = $(this.options.onTagClicked ? '<a class="tagit-label"></a>' : '<span class="tagit-label"></span>').text(value);
- // create tag
+ // Create tag.
var tag = $('<li></li>')
- .addClass('tagit-choice')
+ .addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all')
.addClass(additionalClass)
- .append(label)
- .append('<a class="close">x</a>');
+ .append(label);
+ var removeTag = $('<a></a>')
+ .addClass('ui-icon ui-icon-close close');
+ tag.append(removeTag);
if (this.options.singleField) {
var tags = this.assignedTags();
@@ -270,8 +268,11 @@
this._tagInput.parent().before(tag);
},
- removeTag: function(tag) {
+ removeTag: function(tag, animate) {
+ if (typeof animate === 'undefined') { animate = true; }
+
tag = $(tag);
+
if (this.options.onTagRemoved) {
this.options.onTagRemoved(tag);
}
@@ -283,7 +284,14 @@
});
this._updateSingleTagsField(tags);
}
- tag.remove();
+ // Animate the removal.
+ if (animate) {
+ tag.fadeOut('fast').hide('blind', {direction: 'horizontal'}, 'fast', function(){
+ tag.remove();
+ }).dequeue();
+ } else {
+ tag.remove();
+ }
},
removeAll: function() {

0 comments on commit 9080c1d

Please sign in to comment.
Something went wrong with that request. Please try again.