Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

  • Loading branch information...
commit ffafbd43b08b8c6451a5363d273b1441b09a50f0 1 parent 439a5b3
Alex Ehlke authored
Showing with 29 additions and 22 deletions.
  1. +3 −0  .gitignore
  2. +15 −15 README.markdown
  3. +11 −7 examples.html
3  .gitignore
View
@@ -1,2 +1,5 @@
+*.swm
+*.swn
+*.swo
*.swp
.DS_Store
30 README.markdown
View
@@ -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,22 +246,22 @@ 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
@@ -269,7 +269,7 @@ Clears the widget of all tags — removes each tag it contains, so the **beforeT
### 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
18 examples.html
View
@@ -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 @@
</div>
</body>
</html>
+
Please sign in to comment.
Something went wrong with that request. Please try again.