Permalink
Browse files

add readOnly option

  • Loading branch information...
1 parent 28e6161 commit 5204335926c882afa44f7b3aa4a4b57f60124c5c @ptr07 ptr07 committed with Mar 24, 2012
Showing with 68 additions and 24 deletions.
  1. +6 −0 README.markdown
  2. +10 −2 css/jquery.tagit.css
  3. +20 −0 examples.html
  4. +21 −11 js/tag-it.js
  5. +11 −11 js/tag-it.min.js
View
@@ -125,6 +125,12 @@ For example, the user can enter `John Smith` instead of `"John Smith"`.
Defaults to *false*.
+### readOnly (boolean)
+
+When enabled, tag-it just render tags. It disables the ability to edit tags.
+
+Defaults to *false*.
+
### singleField (boolean)
When enabled, will use a single hidden field for the form, rather than one per tag.
View
@@ -9,11 +9,19 @@ ul.tagit li {
float: left;
margin: 2px 5px 2px 0;
}
-ul.tagit li.tagit-choice {
- padding: .2em 18px .2em .5em;
+ul.tagit li.tagit-choice {
position: relative;
line-height: inherit;
}
+
+ul.tagit li.tagit-choice-read-only {
+ padding: .2em .5em .2em .5em;
+}
+
+ul.tagit li.tagit-choice-editable {
+ padding: .2em 18px .2em .5em;
+}
+
ul.tagit li.tagit-new {
padding: .25em 4px .25em 0;
}
View
@@ -95,6 +95,14 @@
}
});
+
+ //-------------------------------
+ // Tag-it methods
+ //-------------------------------
+ $('#readOnlyTags').tagit({
+ readOnly: true
+ });
+
//-------------------------------
// Tag-it methods
//-------------------------------
@@ -207,6 +215,18 @@
<div id="events_container"></div>
<hr>
+
+ <h3>Read-only</h3>
+ <form>
+ <p>Example of read only tags.</p>
+ <ul id="readOnlyTags">
+ <li>Tag1</li>
+ <li>Tag2</li>
+ </ul>
+ </form>
+
+ <hr>
+
<h3>Methods</h3>
<form>
<p>Demos the available widget methods. Click the links below the widget to try them.</p>
View
@@ -36,6 +36,10 @@
placeholderText : null,
allowDuplicates : false,
+ // When enabled, tag-it just render tags.
+ // It disables the ability to edit tags.
+ readOnly: false,
+
// When enabled, quotes are not neccesary
// for inputting multi-word tags.
allowSpaces: false,
@@ -109,6 +113,7 @@
}
this.tagInput = $('<input type="text" />').addClass('ui-widget-content');
+ if (this.options.readOnly) this.tagInput.attr('disabled', 'disabled');
if (this.options.tabIndex) {
this.tagInput.attr('tabindex', this.options.tabIndex);
}
@@ -346,17 +351,22 @@
.addClass(additionalClass)
.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</span></a>') // \xd7 is an X
- .addClass('tagit-close')
- .append(removeTagIcon)
- .click(function(e) {
- // Removes a tag when the little 'x' is clicked.
- that.removeTag(tag);
- });
- tag.append(removeTag);
+ if (this.options.readOnly){
+ tag.addClass('tagit-choice-read-only');
+ } else {
+ tag.addClass('tagit-choice-editable');
+ // Button for removing the tag.
+ var removeTagIcon = $('<span></span>')
+ .addClass('ui-icon ui-icon-close');
+ var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X
+ .addClass('tagit-close')
+ .append(removeTagIcon)
+ .click(function(e) {
+ // Removes a tag when the little 'x' is clicked.
+ that.removeTag(tag);
+ });
+ tag.append(removeTag);
+ }
// Unless options.singleField is set, each tag has a hidden input field inline.
if (this.options.singleField) {
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 5204335

Please sign in to comment.