Skip to content

Commit

Permalink
Added onTagClicked callback and updated the readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yavari
Yavari committed Dec 11, 2010
1 parent ba10a8e commit 01ee739
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 84 deletions.
17 changes: 17 additions & 0 deletions README.markdown
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -111,6 +111,17 @@ The function receives the tag as parameter.
} }
}); });


### onTagClicked (function, Callback)

Can be used to add custom behaviour when the Tag is clicked from the DOM.
The function receives the tag as parameter.

$("#mytags").tagit({
onTagClicked: function(tag) {
// do something special
}
});

### tagSource (function) ### tagSource (function)


Can be overwritten in order to use custom autocompletion sources like Ajax requests. Can be overwritten in order to use custom autocompletion sources like Ajax requests.
Expand All @@ -123,6 +134,12 @@ After the first keypress the last tag receives a *remove* css class which can be


Defaults to *false*. Defaults to *false*.


### caseSensitive (boolean)

whether the duplication check should do a case sensitive check or not.

Defaults to *true*.

## Authors ## Authors


* [Levy Carneiro Jr.](http://github.com/levycarneiro) * [Levy Carneiro Jr.](http://github.com/levycarneiro)
Expand Down
167 changes: 86 additions & 81 deletions css/jquery-ui/jquery.ui.autocomplete.custom.css
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,81 +1,86 @@
.ui-autocomplete { .ui-autocomplete {
background-color: #eee; background-color: #eee;
position: absolute; position: absolute;
cursor: default; cursor: default;
} }
.ui-autocomplete .ui-menu-item { .ui-autocomplete .ui-menu-item {
} }
.ui-autocomplete .ui-menu-item a { .ui-autocomplete .ui-menu-item a {
display:block; display:block;
padding:4px 6px; padding:4px 6px;
text-decoration:none; text-decoration:none;
line-height:12px; line-height:12px;
} }
.ui-autocomplete .ui-menu-item a.ui-state-hover, .ui-autocomplete .ui-menu-item a.ui-state-hover,
.ui-autocomplete .ui-menu-item a.ui-state-active { .ui-autocomplete .ui-menu-item a.ui-state-active {
background-color:#78959D; background-color:#78959D;
color:#fff; color:#fff;
margin:0; margin:0;
} }
.ui-autocomplete-loading { .ui-autocomplete-loading {
background: white url(images/ui-anim_basic_16x16.gif) right center no-repeat; background: white url(images/ui-anim_basic_16x16.gif) right center no-repeat;
} }


ul.tagit { ul.tagit {
padding:1px 5px; padding:1px 5px;
border-style:solid; border-style:solid;
border-width:1px; border-width:1px;
border-color:#C6C6C6; border-color:#C6C6C6;
overflow:auto; overflow:auto;
} }
ul.tagit li { ul.tagit li {
-moz-border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px; -webkit-border-radius:5px 5px 5px 5px;
display: block; display: block;
float: left; float: left;
margin:2px 5px 2px 0; margin:2px 5px 2px 0;
} }
ul.tagit li.tagit-choice { ul.tagit li.tagit-choice {
background-color:#DEE7F8; background-color:#DEE7F8;
border:1px solid #CAD8F3; border:1px solid #CAD8F3;
padding:2px 4px 3px; padding:2px 4px 3px;
} }
ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove { ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove {
background-color:#bbcef1; background-color:#bbcef1;
border-color:#6d95e0; border-color:#6d95e0;
} }
ul.tagit li.tagit-new { ul.tagit li.tagit-new {
padding:2px 4px 3px; padding:2px 4px 3px;
padding:2px 4px 1px; padding:2px 4px 1px;
padding:2px 4px 1px 0; padding:2px 4px 1px 0;
} }


ul.tagit li.tagit-choice input { ul.tagit li.tagit-choice input {
display:block; display:block;
float:left; float:left;
margin:2px 5px 2px 0; margin:2px 5px 2px 0;
} }
ul.tagit li.tagit-choice a.close { ul.tagit li.tagit-choice a.tagLabel {
color:#777777; cursor:pointer;
cursor:pointer; text-decoration:none;
font-weight:bold; }
outline:medium none; ul.tagit li.tagit-choice a.close {
padding:2px 0 2px 3px; color:#777777;
text-decoration:none; cursor:pointer;
} font-weight:bold;
ul.tagit li.tagit-choice a.close:hover { outline:medium none;
color:#222; padding:2px 0 2px 3px;
} text-decoration:none;
ul.tagit input[type="text"] { }
-moz-box-sizing: border-box; ul.tagit li.tagit-choice a.tagLabel:hover
-webkit-box-sizing: border-box; ul.tagit li.tagit-choice a.close:hover {
box-sizing: border-box; color:#222;
border:none; }
margin:0; ul.tagit input[type="text"] {
padding:0; -moz-box-sizing: border-box;
width:inherit; -webkit-box-sizing: border-box;
border-color:#C6C6C6; box-sizing: border-box;
background-color:#FFFFFF; border:none;
color:#333333; margin:0;
} padding:0;
width:inherit;
border-color:#C6C6C6;
background-color:#FFFFFF;
color:#333333;
}
12 changes: 9 additions & 3 deletions js/tag-it.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
'onTagAdded' : null, 'onTagAdded' : null,
// callback: called when a tag is removed // callback: called when a tag is removed
'onTagRemoved' : null, 'onTagRemoved' : null,
// callback: called when a tag is clicked
'onTagClicked' : null,
'tagSource' : function(search, show_choices) { 'tagSource' : function(search, show_choices) {
var filter = new RegExp(search.term, "i"); var filter = new RegExp(search.term, "i");
var choices = settings.availableTags.filter(function(element) { var choices = settings.availableTags.filter(function(element) {
Expand Down Expand Up @@ -39,10 +41,12 @@
// create the input field. // create the input field.
.append($("<li class=\"tagit-new\"></li>\n").append(tagInput)) .append($("<li class=\"tagit-new\"></li>\n").append(tagInput))
.click(function(e) { .click(function(e) {
if (e.target.tagName == 'A') { if (e.target.className == 'close') {
// Removes a tag when the little 'x' is clicked. // 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. // Event is binded to the UL, otherwise a new tag (LI > A) wouldn't have this event attached to it.
remove_tag($(e.target).parent()); remove_tag($(e.target).parent());
} else if (e.target.className == 'tagLabel' && settings.onTagClicked) {
settings.onTagClicked($(e.target).parent());
} else { } else {
// Sets the focus() to the input field, if the user clicks anywhere inside the UL. // 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. // This is needed because the input field needs to be of a small size.
Expand Down Expand Up @@ -151,12 +155,14 @@
if (!is_new(value) || value == "") { if (!is_new(value) || value == "") {
return false; return false;
} }

var linkValue = value;
if(settings.onTagClicked)
linkValue = "<a class=\"tagLabel\">" + value + "</a>";
// create tag // create tag
var tag = $("<li />") var tag = $("<li />")
.addClass("tagit-choice") .addClass("tagit-choice")
.addClass(additionalClass) .addClass(additionalClass)
.append(value) .append(linkValue)
.append("<a class=\"close\">x</a>") .append("<a class=\"close\">x</a>")
.append("<input type=\"hidden\" style=\"display:none;\" value=\"" + value + "\" name=\"" + settings.itemName + "[" + settings.fieldName + "][]\">"); .append("<input type=\"hidden\" style=\"display:none;\" value=\"" + value + "\" name=\"" + settings.itemName + "[" + settings.fieldName + "][]\">");


Expand Down

0 comments on commit 01ee739

Please sign in to comment.