Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

  • Loading branch information...
commit ffafbd43b08b8c6451a5363d273b1441b09a50f0 1 parent 439a5b3
@aehlke authored
Showing with 29 additions and 22 deletions.
  1. +3 −0  .gitignore
  2. +15 −15 README.markdown
  3. +11 −7 examples.html
View
3  .gitignore
@@ -1,2 +1,5 @@
+*.swm
+*.swn
+*.swo
*.swp
.DS_Store
View
30 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,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
View
18 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 @@
</div>
</body>
</html>
+
Please sign in to comment.
Something went wrong with that request. Please try again.