clean up the examples, and allow using without jQuery UI CSS

.gitignore

@@ -1,2 +1,5 @@
+*.swm
+*.swn
+*.swo
 *.swp
 .DS_Store

README.markdown

@@ -21,7 +21,7 @@ First, load [jQuery](http://jquery.com/) (v1.4 or greater), [jQuery UI](http://j
 
 If you're using a custom jQuery UI build, it must contain the Core, Widget, Position, and Autocomplete components. The Effects Core with "Blind" and "Highlight" Effect components are optional, but used if available.
 
-The plugin requires a jQuery UI theme to be present, as well as its own included base CSS file ([jquery.tagit.css](http://github.com/aehlke/tag-it/raw/master/css/jquery.tagit.css)). Here we use the Flick theme as an example:
+The plugin requires either a jQuery UI theme or a Tag-it theme to be present, as well as its own included base CSS file ([jquery.tagit.css](http://github.com/aehlke/tag-it/raw/master/css/jquery.tagit.css)). Here we use the Flick theme as an example:
 
     <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">
@@ -30,17 +30,17 @@ Now, let's attach it to an existing `<ul>` box:
 
     <script type="text/javascript">
         $(document).ready(function() {
-            $("#mytags").tagit();
+            $("#myTags").tagit();
         });
     </script>
 
-    <ul id="mytags">
+    <ul id="myTags">
         <!-- Existing list items will be pre-added to the tags -->
         <li>Tag1</li>
         <li>Tag2</li>
     </ul>
 
-This will turn the list into a tag-it widget. There are several other possible configurations and ways to instantiate the widget, including one that uses a single comma-delimited `input` field rather than one per tag, so see the **Options** documentation below as well as the [examples page](http://aehlke.github.com/tag-it/examples.html) (and its source) which demonstrates most of them.
+This will turn the list into a tag-it widget. There are several other possible configurations and ways to instantiate the widget, including one that uses a single comma-delimited `input` field rather than one per tag, so see the **Options** documentation below as well as the [examples page](http://aehlke.github.com/tag-it/examples.html) (and its source) which demonstrates most of them, as well as the Tag-it Zendesk theme used in the screenshot above.
 
 
 ## Theming
@@ -57,7 +57,7 @@ Tag-it accepts several options to customize its behaviour:
 Each tag's hidden input field will have this name.
 If you're using PHP, you may want to use something like `itemName[fieldName][]` for this option's value.
 
-    $("#mytags").tagit({
+    $("#myTags").tagit({
         fieldName: "skills"
     });
 
@@ -67,7 +67,7 @@ Defaults to *tags*.
 
 Used as source for the autocompletion, unless **autocomplete.source** is overridden.
 
-    $("#mytags").tagit({
+    $("#myTags").tagit({
         availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
     });
 
@@ -84,7 +84,7 @@ The `autocomplete.source` should be overridden if you want to use custom autocom
 
 For example:
 
-    $("#mytags").tagit({
+    $("#myTags").tagit({
         autocomplete: {delay: 0, minLength: 2}
     });
 
@@ -183,7 +183,7 @@ the user or by the widget's initialization.
 
 To cancel a tag from being added, simply return `false` in your event callback to bail out from adding the tag and stop propagation of the event.
 
-    $("#mytags").tagit({
+    $("#myTags").tagit({
         beforeTagAdded: function(event, ui) {
             // do something special
             console.log(ui.tag);
@@ -203,7 +203,7 @@ To cancel a tag from being removed, simply return `false` in your event callback
 
 The function receives a null event, and an object with `tag` and `tagLabel` properties.
 
-    $("#mytags").tagit({
+    $("#myTags").tagit({
         beforeTagRemoved: function(event, ui) {
             // do something special
             console.log(ui.tag);
@@ -229,7 +229,7 @@ By default it will visually highlight the existing tag, unless you return *false
 Can be used to add custom behaviour when the tag is clicked.
 The function receives the click event and an objecting containing `tag` and `tagLabel` properties.
 
-    $("#mytags").tagit({
+    $("#myTags").tagit({
         onTagClicked: function(event, ui) {
             // do something special
             console.log(ui.tag);
@@ -246,30 +246,30 @@ and an object with the property `duringInitialization`. This can only be called
 ### assignedTags()
 Returns an array of the text values of all the tags currently in the widget.
 
-    $("#mytags").tagit("assignedTags");
+    $("#myTags").tagit("assignedTags");
 
 ### createTag(tagLabel, additionalClass)
 Adds new tag to the list. The `additionalClass` parameter is an optional way to add classes to the tag element.
 
-    $("#mytags").tagit("createTag", "brand-new-tag");
+    $("#myTags").tagit("createTag", "brand-new-tag");
 
 ### removeTagByLabel(tagLabel, animate)
 Finds the tag with the label `tagLabel` and removes it. If no such tag is found, it'll throw an exception.
 
-    $("#mytags").tagit("removeTagByLabel", "my-tag");
+    $("#myTags").tagit("removeTagByLabel", "my-tag");
 
 ### removeAll()
 Clears the widget of all tags — removes each tag it contains, so the **beforeTagRemoved** / **afterTagRemoved** event callbacks (if set) will be called for each.
 
-    $("#mytags").tagit("removeAll");
+    $("#myTags").tagit("removeAll");
 
 
 ## Properties
 
 ### tagInput
 The `<input>` field which is used for entering new tags. It's a jQuery object, so you may use it to add a class or anything to it, e.g.:
 
-    $("#mytags").tagit("tagInput").addClass("fancy");
+    $("#myTags").tagit("tagInput").addClass("fancy");
 
 
 ## Authors

examples.html

@@ -14,12 +14,16 @@
     <!-- /ignore -->
 
 
-    <!-- These 2 CSS files are required: any 1 jQuery UI theme CSS, plus the Tag-it base CSS. -->
-    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
-    <link rel="stylesheet" type="text/css" href="css/jquery.tagit.css">
+    <!-- INSTRUCTIONS -->
 
-    <!-- This is an optional CSS theme that only applies to this widget. Use it in addition to the jQuery UI theme. -->
+    <!-- 2 CSS files are required: -->
+    <!--   - Tag-it's base CSS (jquery.tagit.css). -->
+    <!--   - Any theme CSS (either a jQuery UI theme such as "flick", or one that's bundled with Tag-it, e.g. tagit.ui-zendesk.css as in this example.) -->
+    <!-- The base CSS and tagit.ui-zendesk.css theme are scoped to the Tag-it widget, so they shouldn't affect anything else in your site, unlike with jQuery UI themes. -->
+    <link href="css/jquery.tagit.css" rel="stylesheet" type="text/css">
     <link href="css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">
+    <!-- If you want the jQuery UI "flick" theme, you can use this instead, but it's not scoped to just Tag-it like tagit.ui-zendesk is: -->
+    <!--   <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css"> -->
 
     <!-- jQuery and jQuery UI are required dependencies. -->
     <!-- Although we use jQuery 1.4 here, it's tested with the latest too (1.8.3 as of writing this.) -->
@@ -54,7 +58,6 @@
                 availableTags: sampleTags
             });
 
-
             //-------------------------------
             // Preloading data in markup
             //-------------------------------
@@ -73,6 +76,7 @@
             var addEvent = function(text) {
                 $('#events_container').append(text + '<br>');
             };
+
             eventTags.tagit({
                 availableTags: sampleTags,
                 beforeTagAdded: function(evt, ui) {
@@ -99,8 +103,7 @@
                 }
             });
 
-
-             //-------------------------------
+            //-------------------------------
             // Read-only
             //-------------------------------
             $('#readOnlyTags').tagit({
@@ -267,3 +270,4 @@ <h3>Remove Confirmation</h3>
 </div>
 </body>
 </html>
+