diff --git a/README.markdown b/README.markdown
index c2a16ba5..7821b446 100644
--- a/README.markdown
+++ b/README.markdown
@@ -14,30 +14,36 @@ Check the [examples.html](http://aehlke.github.com/tag-it/examples.html) for sev
First, load [jQuery](http://jquery.com/) (v1.4 or greater), [jQuery UI](http://jqueryui.com/) (v1.8 or greater), and the plugin:
-
-
-
+```html
+
+
+
+```
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 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:
-
-
+```html
+
+
+```
Now, let's attach it to an existing `
` box:
-
+```html
+
-
-
-
Tag1
-
Tag2
-
+
+
+
Tag1
+
Tag2
+
+```
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.
@@ -56,9 +62,11 @@ 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({
- fieldName: "skills"
- });
+```javascript
+$("#myTags").tagit({
+ fieldName: "skills"
+});
+```
Defaults to *tags*.
@@ -66,9 +74,11 @@ Defaults to *tags*.
Used as source for the autocompletion, unless **autocomplete.source** is overridden.
- $("#myTags").tagit({
- availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
- });
+```javascript
+$("#myTags").tagit({
+ availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
+});
+```
If you define your own **autocomplete.source**, this option is unused (unless you choose to reference it yourself from your custom **autocomplete.source** of course.)
@@ -83,9 +93,11 @@ The `autocomplete.source` should be overridden if you want to use custom autocom
For example:
- $("#myTags").tagit({
- autocomplete: {delay: 0, minLength: 2}
- });
+```javascript
+$("#myTags").tagit({
+ autocomplete: {delay: 0, minLength: 2}
+});
+```
The default `autocomplete.source` function filters the strings in **availableTags** and subtracts the already assigned tags. It also positions autocomplete underneath tag input. See the full list of available options [here](http://jqueryui.com/demos/autocomplete/).
@@ -182,12 +194,14 @@ 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({
- beforeTagAdded: function(event, ui) {
- // do something special
- console.log(ui.tag);
- }
- });
+```javascript
+$("#myTags").tagit({
+ beforeTagAdded: function(event, ui) {
+ // do something special
+ console.log(ui.tag);
+ }
+});
+```
### afterTagAdded (function, Callback)
@@ -200,14 +214,16 @@ Can be used to add custom behaviour before the tag is removed from the DOM.
To cancel a tag from being removed, simply return `false` in your event callback to bail out from removing the tag and stop propagation of the event.
-The function receives a null event, and an object with `tag` and `tagLabel` properties.
+The function receives a null event, and an object with `tag` and `tagLabel` properties
- $("#myTags").tagit({
- beforeTagRemoved: function(event, ui) {
- // do something special
- console.log(ui.tag);
- }
- });
+```javascript
+$("#myTags").tagit({
+ beforeTagRemoved: function(event, ui) {
+ // do something special
+ console.log(ui.tag);
+ }
+});
+```
### afterTagRemoved (function, Callback)
@@ -228,12 +244,14 @@ 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({
- onTagClicked: function(event, ui) {
- // do something special
- console.log(ui.tag);
- }
- });
+```javascript
+$("#myTags").tagit({
+ onTagClicked: function(event, ui) {
+ // do something special
+ console.log(ui.tag);
+ }
+});
+```
### onTagLimitExceeded (function, Callback)
@@ -245,40 +263,52 @@ 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");
+```javascript
+$("#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");
+```javascript
+$("#myTags").tagit("createTag", "brand-new-tag");
+```
### preprocessTag(function, Callback)
Set a function to be called before tag is created. Callback receives the
value of the tag created.
- // ensure all tags are capitalized
- $(#tag-it").tagit("preprocessTag", function(val) {
+```javascript
+// ensure all tags are capitalized
+$(#tag-it").tagit("preprocessTag", function(val) {
if (!val) { return ''; }
return val[0].toUpperCase() + val.slice(1, val.length);
- });
- // foo -> Foo
+});
+// foo -> Foo
+```
### 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");
+```javascript
+$("#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");
+```javascript
+$("#myTags").tagit("removeAll");
+```
## Properties
### tagInput
The `` 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").data("ui-tagit").tagInput.addClass("fancy");
+```javascript
+$("#myTags").data("ui-tagit").tagInput.addClass("fancy");
+```
## Authors