add readOnly option

README.markdown

@@ -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.

css/jquery.tagit.css

@@ -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;
 }

examples.html

@@ -95,6 +95,14 @@
                 }
             });
 
+
+             //-------------------------------
+            // Tag-it methods
+            //-------------------------------
+            $('#readOnlyTags').tagit({
+			    readOnly: true
+		    });
+
             //-------------------------------
             // Tag-it methods
             //-------------------------------
@@ -207,6 +215,18 @@ <h3>Events</h3>
         <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>

js/tag-it.js

@@ -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) {