Permalink
Browse files

Added onTagClicked callback and updated the readme

  • Loading branch information...
1 parent ba10a8e commit 01ee7396e3ec31dbb97bea15dff8b08802b15ef4 @Yavari Yavari committed Dec 11, 2010
Showing with 112 additions and 84 deletions.
  1. +17 −0 README.markdown
  2. +86 −81 css/jquery-ui/jquery.ui.autocomplete.custom.css
  3. +9 −3 js/tag-it.js
View
@@ -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)
Can be overwritten in order to use custom autocompletion sources like Ajax requests.
@@ -123,6 +134,12 @@ After the first keypress the last tag receives a *remove* css class which can be
Defaults to *false*.
+### caseSensitive (boolean)
+
+whether the duplication check should do a case sensitive check or not.
+
+Defaults to *true*.
+
## Authors
* [Levy Carneiro Jr.](http://github.com/levycarneiro)
@@ -1,81 +1,86 @@
-.ui-autocomplete {
- background-color: #eee;
- position: absolute;
- cursor: default;
-}
-.ui-autocomplete .ui-menu-item {
-}
-.ui-autocomplete .ui-menu-item a {
- 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;
-}
-.ui-autocomplete-loading {
- background: white url(images/ui-anim_basic_16x16.gif) right center no-repeat;
-}
-
-ul.tagit {
- padding:1px 5px;
- border-style:solid;
- border-width:1px;
- border-color:#C6C6C6;
- 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;
-}
-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;
-}
-ul.tagit li.tagit-new {
- padding:2px 4px 3px;
- padding:2px 4px 1px;
- padding:2px 4px 1px 0;
-}
-
-ul.tagit li.tagit-choice input {
- display:block;
- float:left;
- margin:2px 5px 2px 0;
-}
-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.close:hover {
- color:#222;
-}
-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;
-}
+.ui-autocomplete {
+ background-color: #eee;
+ position: absolute;
+ cursor: default;
+}
+.ui-autocomplete .ui-menu-item {
+}
+.ui-autocomplete .ui-menu-item a {
+ 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;
+}
+.ui-autocomplete-loading {
+ background: white url(images/ui-anim_basic_16x16.gif) right center no-repeat;
+}
+
+ul.tagit {
+ padding:1px 5px;
+ border-style:solid;
+ border-width:1px;
+ border-color:#C6C6C6;
+ 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;
+}
+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;
+}
+ul.tagit li.tagit-new {
+ padding:2px 4px 3px;
+ padding:2px 4px 1px;
+ padding:2px 4px 1px 0;
+}
+
+ul.tagit li.tagit-choice input {
+ display:block;
+ float:left;
+ margin:2px 5px 2px 0;
+}
+ul.tagit li.tagit-choice a.tagLabel {
+ 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;
+}
+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;
+}
View
@@ -10,6 +10,8 @@
'onTagAdded' : null,
// callback: called when a tag is removed
'onTagRemoved' : null,
+ // callback: called when a tag is clicked
+ 'onTagClicked' : null,
'tagSource' : function(search, show_choices) {
var filter = new RegExp(search.term, "i");
var choices = settings.availableTags.filter(function(element) {
@@ -39,10 +41,12 @@
// create the input field.
.append($("<li class=\"tagit-new\"></li>\n").append(tagInput))
.click(function(e) {
- if (e.target.tagName == 'A') {
+ if (e.target.className == '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.
remove_tag($(e.target).parent());
+ } else if (e.target.className == 'tagLabel' && settings.onTagClicked) {
+ settings.onTagClicked($(e.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.
@@ -151,12 +155,14 @@
if (!is_new(value) || value == "") {
return false;
}
-
+ var linkValue = value;
+ if(settings.onTagClicked)
+ linkValue = "<a class=\"tagLabel\">" + value + "</a>";
// create tag
var tag = $("<li />")
.addClass("tagit-choice")
.addClass(additionalClass)
- .append(value)
+ .append(linkValue)
.append("<a class=\"close\">x</a>")
.append("<input type=\"hidden\" style=\"display:none;\" value=\"" + value + "\" name=\"" + settings.itemName + "[" + settings.fieldName + "][]\">");

0 comments on commit 01ee739

Please sign in to comment.