├── .gitignore ├── README.md ├── credits-before-gh.txt ├── css ├── tagit-awesome-blue.css ├── tagit-awesome-orange.css ├── tagit-dark-grey.css ├── tagit-simple-blue.css ├── tagit-simple-green.css ├── tagit-simple-grey.css ├── tagit-stylish-yellow.css ├── themeroller │ ├── aristo │ │ ├── Aristo.css │ │ └── images │ │ │ ├── bg_fallback.png │ │ │ ├── icon_sprite.png │ │ │ ├── progress_bar.gif │ │ │ ├── slider_handles.png │ │ │ ├── ui-icons_222222_256x240.png │ │ │ └── ui-icons_454545_256x240.png │ ├── bootstrap │ │ ├── Bootstrap.css │ │ └── images │ │ │ ├── ui-bg_flat_0_aaaaaa_40x100.png │ │ │ ├── ui-bg_glass_55_fbf9ee_1x400.png │ │ │ ├── ui-bg_glass_65_ffffff_1x400.png │ │ │ ├── ui-bg_glass_75_dadada_1x400.png │ │ │ ├── ui-bg_glass_75_e6e6e6_1x400.png │ │ │ ├── ui-bg_glass_75_ffffff_1x400.png │ │ │ ├── ui-bg_highlight-soft_75_cccccc_1x100.png │ │ │ ├── ui-bg_inset-soft_95_fef1ec_1x100.png │ │ │ ├── ui-icons_222222_256x240.png │ │ │ ├── ui-icons_2e83ff_256x240.png │ │ │ ├── ui-icons_454545_256x240.png │ │ │ ├── ui-icons_888888_256x240.png │ │ │ ├── ui-icons_cd0a0a_256x240.png │ │ │ └── ui-icons_f6cf3b_256x240.png │ └── tagit.css └── ui-anim_basic_16x16.gif ├── demo ├── css │ ├── demo.css │ ├── images │ │ ├── ui-bg_flat_0_aaaaaa_40x100.png │ │ ├── ui-bg_flat_75_ffffff_40x100.png │ │ ├── ui-bg_glass_55_fbf9ee_1x400.png │ │ ├── ui-bg_glass_65_ffffff_1x400.png │ │ ├── ui-bg_glass_75_dadada_1x400.png │ │ ├── ui-bg_glass_75_e6e6e6_1x400.png │ │ ├── ui-bg_glass_95_fef1ec_1x400.png │ │ ├── ui-bg_highlight-soft_75_cccccc_1x100.png │ │ ├── ui-icons_222222_256x240.png │ │ ├── ui-icons_2e83ff_256x240.png │ │ ├── ui-icons_454545_256x240.png │ │ ├── ui-icons_888888_256x240.png │ │ └── ui-icons_cd0a0a_256x240.png │ ├── jquery-ui-base-1.8.20.css │ └── jquery-ui-base-1.8.20.css~ ├── images │ └── browsers │ │ ├── chrome.png │ │ ├── firefox.png │ │ ├── ie.png │ │ ├── opera.png │ │ └── safari.png ├── js │ ├── jquery-ui.1.8.20.min.js │ ├── jquery-ui.1.8.20.min.js~ │ └── jquery.1.7.2.min.js └── themeswitcher │ ├── images │ ├── buttonbg.png │ ├── icon_color_arrow.gif │ ├── menuhoverbg.png │ ├── theme_90_aristo.png │ ├── theme_90_black_matte.png │ ├── theme_90_black_tie.png │ ├── theme_90_blitzer.png │ ├── theme_90_cupertino.png │ ├── theme_90_dark_hive.png │ ├── theme_90_dot_luv.png │ ├── theme_90_eggplant.png │ ├── theme_90_excite_bike.png │ ├── theme_90_flick.png │ ├── theme_90_hot_sneaks.png │ ├── theme_90_humanity.png │ ├── theme_90_le_frog.png │ ├── theme_90_mint_choco.png │ ├── theme_90_overcast.png │ ├── theme_90_pepper_grinder.png │ ├── theme_90_smoothness.png │ ├── theme_90_south_street.png │ ├── theme_90_start_menu.png │ ├── theme_90_sunny.png │ ├── theme_90_swanky_purse.png │ ├── theme_90_trontastic.png │ ├── theme_90_ui_dark.png │ ├── theme_90_ui_light.png │ └── theme_90_windoze.png │ └── jquery.themeswitcher.js ├── docs.html ├── index.html ├── index.php ├── index.themeroller.html └── js ├── tagit-themeroller.js └── tagit.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Active Development? 2 | This plugin is no longer under active development, I will continue to merge in pull requests as long as they conform to the Note for contributers/pull requesters below, but do not have the time to activly develop the plugin. If someone wishes to take over the plugin create an issue in the tracker and I will discuss with you there. 3 | For anyone looking to use this plugin I strongly suggest checkout out the awesome [Select2](http://ivaynberg.github.com/select2/) by [Igor Vaynberg](https://github.com/ivaynberg). Which has all the features of Tagit and then some! 4 | 5 | ## Note for contributors/pull requesters 6 | We welcome all bug fixes and additions to tagit, it is a community project after all, however we have one rule for commits: 7 | * All edits must be applied to **both tagit.js and tagit-themeroller.js** no pull requests will be accepted unless this is done to ensure the scripts function equally. 8 | 9 |
10 | It depends on [jQuery 1.7.2](http://jquery.com). and [jQuery-ui 1.8](http://jqueryui.com) The _jQuery Tagit Plugin_ transforms an html unordered list into a unique tagging plugin. 11 | 12 | Why unique? Because jQuery Tagit uses jQuery UI's auto-complete plugin to supply suggestions to users as they type and has some awesome features like sortable tags. 13 | 14 | > Quicklinks 15 | > * [Demo](http://webspirited.com/tagit) 16 | > * [Features](#features) 17 | > * [Options](#options) 18 | > * [Methods](#methods) 19 | 20 | ## Features 21 | * Convenient way for users to enter a list of items 22 | * Fully integrated with jQuery ui auto complete 23 | * Automatically adds current input as tag if input loses focus 24 | * Easy to use public methods 25 | * Easy to theme (single css file) 26 | * Customizable trigger keys 27 | * Backspace on empty input deletes previous tag 28 | * Ability to provide _initial tags_ on creation though options 29 | * Ability to provide _initial tags_ on creation via list items 30 | * Option to toggle usage of a hidden select so the tags can be sent using a normal form! 31 | * Ability to re-arrange tags by drag and drop! 32 | * Optional ThemeRoller compatibility! 33 | * Fully HTML5 Data-attributes compliant! 34 | 35 | ## Options 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 175 | 176 | 177 | 178 |
NameTypeDefaultNote
tagSourceString, Array, Callback[]This option maps directly to the jQuery 51 | UI Autocomplete source option 52 |
triggerKeysArray['enter', 'space', 'comma', 'tab']An array containing all or any of the default options.
60 | These are the keys that will trigger a tag completion 61 |
allowNewTagsBooltrueAllow tags that do not exist in tagSource to be entered?
initialTagsArray[]An array containing tags to pre-populate the field with
minLengthInt1The minimum length before a triggerKey will create a tag
maxLengthInt1The maximum length a tag is allowed to be
selectBoolfalseMaintain a hidden select in place for form submissions
97 | To name the select simply give your UL a name attribute! 98 | *** 99 | Don't forget 100 | to include [ and ] if your language (e.g. PHP) requires them! 101 |
tagsChangedCallbackfunction(tagValue, action, element)Callback on changed tags: 109 | **tagValue:** string 110 | **action:** string - either 'added', 'popped', 'moved' or 'reset' 111 | **element:** object - reference to the added LI element 112 |
caseSensitiveBoolfalseThe check for existing tags is case sensitive. 120 | If false the words "Foo" and "foo" considered the same 121 |
highlightOnExistColorString#0F0If the user tries to add a tag that already exists the existing 129 | tag will run a highlight effect using the defined background color. 130 | If null, the highlight effect is turned off. 131 |
placeholderStringEnter tags...The placeholder of the tagit field. It can be any string. 139 |
inputWidthinteger150The length of the input. It can be adjusted based on the palceholder. 147 |
maxTagsIntunlimitedThe maximum number of tags that the user can enter. 155 | If omitted, an unlimited number of tags are allowed. 156 |
sortableBool, StringfalseAllows the user to re-order the tags using drag and drop. 164 | If true the whole tag is dragable. 165 | If 'handle' a handle is rendered and the tag is only dragable using the handle. 166 |
allowDuplicatesBoolFalseAllow Duplicate tags if set to true 174 |
179 | 180 | ## Methods 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 |
NameReturnNote
.tagit("destroy")nullReturns the ul to its original state
.tagit("tags")ArrayReturns an array of objects about all the tags.
.tagit("reset")nullResets the tags list to the initial value
.tagit("fill", [{label: 'tag', value: 12}, {label: 'stuff', value: 13}])nullEmpties the tags and fills the plugin with the provided tags.
.tagit("add", {label: 'tag', value: 12})BoolAdds a tag to the plugin.
.tagit("remove", 'tag', 12)BoolRemoves a tag by its label or value.
228 | *** 229 | 230 | [![Creative Commons License](http://i.creativecommons.org/l/by-sa/3.0/88x31.png)](http://creativecommons.org/licenses/by-sa/3.0/) 231 | This work is licensed under a [Creative Commons Attribution-ShareAlike 3.0 Unported License](http://creativecommons.org/licenses/by-sa/3.0/) with original attribution remaining with Matthew Hailwood and [http://jquery.webspirited.com](jquery.webspirited.com). 232 | -------------------------------------------------------------------------------- /credits-before-gh.txt: -------------------------------------------------------------------------------- 1 | This file contains a list of credits/bug fixes that existed before the project 2 | was moved to Github. The contents of this file were originally in the JavaScript 3 | file however have been removed to keep the file as lean as possible. 4 | 5 | * 6 | * CHANGELOG: 7 | * --------------------------- 8 | * 1.1 9 | * Fixed bug 01 10 | * 1.2 11 | * Added select option 12 | * * hidden select so tags may be submitted via normal form. 13 | * 1.3 14 | * Fixed bug 02 15 | * 1.4 16 | * Fixed bug 03 17 | * Fixed bug 04 18 | * 19 | * --------------------------- 20 | * Bug Fix Credits: 21 | * -- 22 | * * Number: 01 23 | * * Bug: Clicking autocomplete option does not add it to the array 24 | * * Name: Ed 25 | * -- 26 | * * Number: 02 27 | * * Bug: Unable to give select a name 28 | * * Name: Ed 29 | * -- 30 | * * Number 03 31 | * * Bug: reference to incorrect variable (tagArray vs tagsArray) 32 | * * Name: claudio 33 | * -- 34 | * * Number 04 35 | * * Bug: console.log() left in code 36 | * * Name: claudio 37 | * -- 38 | * * Number 06 39 | * * Feature: added fill method 40 | * * Name: Shawn Wildermuth 41 | * -- 42 | * * Number 07 43 | * * Feature: added maxLength and maxTags options 44 | * * Name: Jeff Shantz -------------------------------------------------------------------------------- /css/tagit-awesome-blue.css: -------------------------------------------------------------------------------- 1 | .ui-autocomplete { 2 | background-color: #fff; 3 | position: absolute; 4 | cursor: default; 5 | list-style: none; 6 | margin: 25px 0 0; 7 | padding: 0; 8 | border: 1px solid #E5E5E5; 9 | border-top: none; 10 | border-radius: 0 0 3px 3px; 11 | -webkit-box-shadow: 0 3px 5px #888; 12 | box-shadow: 0 3px 5px #888; 13 | font-size: 12px; 14 | } 15 | 16 | .ui-autocomplete .ui-menu-item { 17 | padding: 0; 18 | margin: 0; 19 | } 20 | 21 | .ui-autocomplete .ui-menu-item a { 22 | display: block; 23 | padding: 4px 6px; 24 | margin: 0; 25 | text-decoration: none; 26 | line-height: 12px; 27 | border-bottom: 1px solid #E5E5E5; 28 | border-top: 1px solid #fff; 29 | color: #78959D; 30 | 31 | } 32 | 33 | .ui-autocomplete .ui-menu-item a.ui-state-hover, 34 | .ui-autocomplete .ui-menu-item a.ui-state-active { 35 | background-color: #4b99ed; 36 | color: #fff; 37 | background-image: none; 38 | border: 1px solid #a6cef7; 39 | } 40 | 41 | .ui-autocomplete-loading { 42 | background: white url(ui-anim_basic_16x16.gif) right center no-repeat; 43 | } 44 | 45 | ul.tagit { 46 | cursor: text; 47 | overflow: auto; 48 | font-size: 14px; 49 | width: 97%; 50 | padding: 3px; 51 | margin-top: 2px; 52 | margin-right: 6px; 53 | margin-bottom: 16px; 54 | border: 1px solid #E5E5E5; 55 | background: #fff; 56 | color: #fff; 57 | } 58 | 59 | ul.tagit li { 60 | border-radius: 5px; 61 | display: block; 62 | float: left; 63 | margin: 2px 5px 2px 0; 64 | position: relative; 65 | } 66 | 67 | ul.tagit.ui-sortable li.tagit-choice a.ui-icon.ui-icon-grip-dotted-vertical{ 68 | float: left; 69 | width: 12px; 70 | margin-left: -5px; 71 | cursor: move; 72 | } 73 | 74 | ul.tagit li.tagit-choice { 75 | border: 1px solid #4b99ed; 76 | display: inline-block; 77 | text-decoration: none; 78 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 79 | padding: 4px 7px; 80 | font-family: 'Helvetica Neue', helvetica, sans-serif; 81 | font-size: 13px; 82 | line-height: 13px; 83 | height: 13px; 84 | vertical-align: middle; 85 | 86 | -webkit-border-radius: 4px; 87 | border-radius: 4px; 88 | 89 | -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); 90 | box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); 91 | padding: 4px 13px 4px 7px; 92 | 93 | background: #4bc2ed; 94 | background: -moz-linear-gradient(top, #4bc2ed 0%, #2ea2cc 100%); 95 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4bc2ed), color-stop(100%,#2ea2cc)); 96 | background: -webkit-linear-gradient(top, #4bc2ed 0%,#2ea2cc 100%); 97 | background: -o-linear-gradient(top, #4bc2ed 0%,#2ea2cc 100%); 98 | background: -ms-linear-gradient(top, #4bc2ed 0%,#2ea2cc 100%); 99 | background: linear-gradient(top, #4bc2ed 0%,#2ea2cc 100%); 100 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bc2ed', endColorstr='#2ea2cc',GradientType=0 ); 101 | 102 | } 103 | 104 | ul.tagit li.tagit-choice.selected { 105 | 106 | color: #777777; 107 | border: 1px solid #999999; 108 | 109 | background: rgb(200,200,200); 110 | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M4YzhjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNmI2YjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 111 | background: -moz-linear-gradient(top, rgba(200,200,200,1) 0%, rgba(182,182,182,1) 100%); 112 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(200,200,200,1)), color-stop(100%,rgba(182,182,182,1))); 113 | background: -webkit-linear-gradient(top, rgba(200,200,200,1) 0%,rgba(182,182,182,1) 100%); 114 | background: -o-linear-gradient(top, rgba(200,200,200,1) 0%,rgba(182,182,182,1) 100%); 115 | background: -ms-linear-gradient(top, rgba(200,200,200,1) 0%,rgba(182,182,182,1) 100%); 116 | background: linear-gradient(top, rgba(200,200,200,1) 0%,rgba(182,182,182,1) 100%); 117 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#b6b6b6',GradientType=0 ); 118 | 119 | } 120 | 121 | ul.tagit li.tagit-choice:hover { 122 | 123 | text-decoration: none; 124 | 125 | background: #4ba0ea; 126 | background: -moz-linear-gradient(top, #4ba0ea 0%, #2f89ce 100%); 127 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ba0ea), color-stop(100%,#2f89ce)); 128 | background: -webkit-linear-gradient(top, #4ba0ea 0%,#2f89ce 100%); 129 | background: -o-linear-gradient(top, #4ba0ea 0%,#2f89ce 100%); 130 | background: -ms-linear-gradient(top, #4ba0ea 0%,#2f89ce 100%); 131 | background: linear-gradient(top, #4ba0ea 0%,#2f89ce 100%); 132 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ba0ea', endColorstr='#2f89ce',GradientType=0 ); 133 | } 134 | 135 | ul.tagit li.tagit-new { 136 | padding: 2px 4px 3px; 137 | padding: 2px 4px 1px; 138 | padding: 2px 4px 1px 0; 139 | } 140 | 141 | ul.tagit li.tagit-choice input { 142 | display: block; 143 | float: left; 144 | margin: 0 5px 0 0; 145 | padding-top: 2px; 146 | padding-bottom: 2px; 147 | } 148 | 149 | ul.tagit li.tagit-choice a.tagit-close { 150 | color: #ddd; 151 | cursor: pointer; 152 | font-size: 12px; 153 | font-weight: bold; 154 | outline: medium none; 155 | padding: 0px 0 0px 3px; 156 | text-decoration: none; 157 | position: absolute; 158 | display: block; 159 | top: 3px; 160 | right: 3px; 161 | text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.7); 162 | } 163 | 164 | ul.tagit li.tagit-choice a.tagit-close:hover { 165 | color: #000; 166 | text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7); 167 | } 168 | 169 | ul.tagit div.tagit-label.hidden { 170 | display: none; 171 | } 172 | 173 | ul.tagit input.tagit-edit { 174 | margin: 0px 0px 0px 2px; 175 | border: none; 176 | line-height: 16px; 177 | } 178 | 179 | ul.tagit input[type="text"] { 180 | -moz-box-sizing: border-box; 181 | border: none !important; 182 | margin: 0 !important; 183 | padding: 0 !important; 184 | width: inherit !important; 185 | outline: none; 186 | } 187 | 188 | .tagit-hiddenSelect { 189 | display:none; 190 | } -------------------------------------------------------------------------------- /css/tagit-awesome-orange.css: -------------------------------------------------------------------------------- 1 | .ui-autocomplete { 2 | background-color: #fff; 3 | position: absolute; 4 | cursor: default; 5 | list-style: none; 6 | margin: 25px 0 0; 7 | padding: 0; 8 | border: 1px solid #E5E5E5; 9 | border-top: none; 10 | border-radius: 0 0 10px 10px; 11 | -webkit-box-shadow: 0 3px 5px #888; 12 | box-shadow: 0 3px 5px #888; 13 | font-size: 12px; 14 | } 15 | 16 | .ui-autocomplete .ui-menu-item { 17 | padding: 0; 18 | margin: 0; 19 | } 20 | 21 | .ui-autocomplete .ui-menu-item a { 22 | display: block; 23 | padding: 4px 6px; 24 | margin: 0; 25 | text-decoration: none; 26 | line-height: 12px; 27 | border-bottom: 1px solid #E5E5E5; 28 | border-top: 1px solid #fff; 29 | color: #78959D; 30 | 31 | } 32 | 33 | .ui-autocomplete .ui-menu-item a.ui-state-hover, 34 | .ui-autocomplete .ui-menu-item a.ui-state-active { 35 | background-color: #c0d1e2; 36 | color: #555; 37 | border-color: #a6cef7; 38 | } 39 | 40 | .ui-autocomplete-loading { 41 | background: white url(ui-anim_basic_16x16.gif) right center no-repeat; 42 | } 43 | 44 | ul.tagit { 45 | cursor: text; 46 | overflow: auto; 47 | font-size: 14px; 48 | width: 97%; 49 | padding: 3px; 50 | margin-top: 2px; 51 | margin-right: 6px; 52 | margin-bottom: 16px; 53 | border: 1px solid #E5E5E5; 54 | background: #fff; 55 | color: #996633; 56 | } 57 | 58 | ul.tagit li { 59 | border-radius: 5px; 60 | display: block; 61 | float: left; 62 | margin: 2px 5px 2px 0; 63 | position: relative; 64 | } 65 | 66 | ul.tagit.ui-sortable li.tagit-choice a.ui-icon.ui-icon-grip-dotted-vertical{ 67 | float: left; 68 | width: 12px; 69 | margin-left: -5px; 70 | cursor: move; 71 | } 72 | 73 | ul.tagit li.tagit-choice { 74 | border: 1px solid #DDA13C; 75 | display: inline-block; 76 | text-decoration: none; 77 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 78 | padding: 4px 7px; 79 | font-family: 'Helvetica Neue', helvetica, sans-serif; 80 | font-size: 13px; 81 | line-height: 13px; 82 | height: 13px; 83 | vertical-align: middle; 84 | 85 | -webkit-border-radius: 4px; 86 | border-radius: 4px; 87 | 88 | -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); 89 | box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); 90 | padding: 4px 13px 4px 7px; 91 | 92 | background: rgb(238,177,75); 93 | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 94 | background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%); 95 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1))); 96 | background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); 97 | background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); 98 | background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); 99 | background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); 100 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 ); 101 | 102 | } 103 | 104 | ul.tagit li.tagit-choice.selected { 105 | 106 | color: #777777; 107 | border: 1px solid #999999; 108 | 109 | background: rgb(200,200,200); 110 | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M4YzhjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiNmI2YjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 111 | background: -moz-linear-gradient(top, rgba(200,200,200,1) 0%, rgba(182,182,182,1) 100%); 112 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(200,200,200,1)), color-stop(100%,rgba(182,182,182,1))); 113 | background: -webkit-linear-gradient(top, rgba(200,200,200,1) 0%,rgba(182,182,182,1) 100%); 114 | background: -o-linear-gradient(top, rgba(200,200,200,1) 0%,rgba(182,182,182,1) 100%); 115 | background: -ms-linear-gradient(top, rgba(200,200,200,1) 0%,rgba(182,182,182,1) 100%); 116 | background: linear-gradient(top, rgba(200,200,200,1) 0%,rgba(182,182,182,1) 100%); 117 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#b6b6b6',GradientType=0 ); 118 | 119 | } 120 | 121 | ul.tagit li.tagit-choice:hover { 122 | 123 | text-decoration: none; 124 | 125 | background: rgb(240,183,86); 126 | background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 127 | background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%); 128 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1))); 129 | background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); 130 | background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); 131 | background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); 132 | background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); 133 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 ); 134 | } 135 | 136 | ul.tagit li.tagit-new { 137 | padding: 2px 4px 3px; 138 | padding: 2px 4px 1px; 139 | padding: 2px 4px 1px 0; 140 | } 141 | 142 | ul.tagit li.tagit-choice input { 143 | display: block; 144 | float: left; 145 | margin: 0 5px 0 0; 146 | padding-top: 2px; 147 | padding-bottom: 2px; 148 | } 149 | 150 | ul.tagit li.tagit-choice a.tagit-close { 151 | color: #777777; 152 | cursor: pointer; 153 | font-size: 12px; 154 | font-weight: bold; 155 | outline: medium none; 156 | padding: 0px 0 0px 3px; 157 | text-decoration: none; 158 | position: absolute; 159 | display: block; 160 | top: 3px; 161 | right: 3px; 162 | text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7); 163 | } 164 | 165 | ul.tagit li.tagit-choice a.tagit-close:hover { 166 | color: #535353; 167 | } 168 | 169 | ul.tagit div.tagit-label.hidden { 170 | display: none; 171 | } 172 | 173 | ul.tagit input.tagit-edit { 174 | margin: 0px 0px 0px 2px; 175 | border: none; 176 | line-height: 16px; 177 | } 178 | 179 | ul.tagit input[type="text"] { 180 | -moz-box-sizing: border-box; 181 | border: none !important; 182 | margin: 0 !important; 183 | padding: 0 !important; 184 | width: inherit !important; 185 | outline: none; 186 | } 187 | 188 | .tagit-hiddenSelect { 189 | display:none; 190 | } -------------------------------------------------------------------------------- /css/tagit-dark-grey.css: -------------------------------------------------------------------------------- 1 | .ui-autocomplete { 2 | background-color: #fff; 3 | position: absolute; 4 | cursor: default; 5 | list-style: none; 6 | margin: 25px 0 0; 7 | padding: 0; 8 | border: 1px solid #E5E5E5; 9 | border-top: none; 10 | border-radius: 0 0 10px 10px; 11 | -webkit-box-shadow: 0 3px 5px #888; 12 | box-shadow: 0 3px 5px #888; 13 | font-size: 12px; 14 | } 15 | 16 | .ui-autocomplete .ui-menu-item { 17 | padding: 0; 18 | margin: 0; 19 | } 20 | 21 | .ui-autocomplete .ui-menu-item a { 22 | display: block; 23 | padding: 4px 6px; 24 | margin: 0; 25 | text-decoration: none; 26 | line-height: 12px; 27 | border-bottom: 1px solid #E5E5E5; 28 | border-top: 1px solid #fff; 29 | color: #78959D; 30 | 31 | } 32 | 33 | .ui-autocomplete .ui-menu-item a.ui-state-hover, 34 | .ui-autocomplete .ui-menu-item a.ui-state-active { 35 | background-color: #c0d1e2; 36 | color: #555; 37 | border-color: #a6cef7; 38 | } 39 | 40 | .ui-autocomplete-loading { 41 | background: white url(ui-anim_basic_16x16.gif) right center no-repeat; 42 | } 43 | 44 | ul.tagit { 45 | cursor: text; 46 | overflow: auto; 47 | font-size: 14px; 48 | width: 97%; 49 | padding: 3px; 50 | margin-top: 2px; 51 | margin-right: 6px; 52 | margin-bottom: 16px; 53 | border: 1px solid #E5E5E5; 54 | background: #fff; 55 | color: #fff; 56 | } 57 | 58 | ul.tagit li { 59 | border-radius: 5px; 60 | display: block; 61 | float: left; 62 | margin: 2px 5px 2px 0; 63 | position: relative; 64 | } 65 | 66 | ul.tagit.ui-sortable li.tagit-choice a.ui-icon.ui-icon-grip-dotted-vertical{ 67 | float: left; 68 | width: 12px; 69 | margin-left: -5px; 70 | cursor: move; 71 | } 72 | 73 | ul.tagit li.tagit-choice { 74 | background-color: #333; 75 | border: 1px solid #333; 76 | padding: 2px 13px 3px 4px; 77 | } 78 | 79 | ul.tagit li.tagit-choice.selected { 80 | background-color: #633; 81 | border-color: #f76464; 82 | } 83 | 84 | ul.tagit li.tagit-choice:hover { 85 | background-color: #555; 86 | border-color: #444; 87 | } 88 | 89 | ul.tagit li.tagit-new { 90 | padding: 2px 4px 3px; 91 | padding: 2px 4px 1px; 92 | padding: 2px 4px 1px 0; 93 | } 94 | 95 | ul.tagit li.tagit-choice input { 96 | display: block; 97 | float: left; 98 | margin: 0 5px 0 0; 99 | padding-top: 2px; 100 | padding-bottom: 2px; 101 | } 102 | 103 | ul.tagit li.tagit-choice a.tagit-close { 104 | color: #ccc; 105 | cursor: pointer; 106 | font-size: 12px; 107 | font-weight: bold; 108 | outline: medium none; 109 | padding: 2px 0 2px 3px; 110 | text-decoration: none; 111 | position: absolute; 112 | display: block; 113 | top: 0; 114 | right: 3px; 115 | text-shadow: 1px 1px 0 rgba(100, 100, 100, 0.7); 116 | } 117 | 118 | ul.tagit li.tagit-choice a.tagit-close:hover { 119 | color: #fff; 120 | text-shadow: none; 121 | } 122 | 123 | ul.tagit div.tagit-label.hidden { 124 | display: none; 125 | } 126 | 127 | ul.tagit input.tagit-edit { 128 | margin: 0px 0px 0px 2px; 129 | border: none; 130 | line-height: 16px; 131 | } 132 | 133 | ul.tagit input[type="text"] { 134 | -moz-box-sizing: border-box; 135 | border: none !important; 136 | margin: 0 !important; 137 | padding: 0 !important; 138 | width: inherit !important; 139 | outline: none; 140 | } 141 | 142 | .tagit-hiddenSelect { 143 | display:none; 144 | } -------------------------------------------------------------------------------- /css/tagit-simple-blue.css: -------------------------------------------------------------------------------- 1 | .ui-autocomplete { 2 | background-color: #fff; 3 | position: absolute; 4 | cursor: default; 5 | list-style: none; 6 | margin: 25px 0 0; 7 | padding: 0; 8 | border: 1px solid #E5E5E5; 9 | border-top: none; 10 | border-radius: 0 0 10px 10px; 11 | -webkit-box-shadow: 0 3px 5px #888; 12 | box-shadow: 0 3px 5px #888; 13 | font-size: 12px; 14 | } 15 | 16 | .ui-autocomplete .ui-menu-item { 17 | padding: 0; 18 | margin: 0; 19 | } 20 | 21 | .ui-autocomplete .ui-menu-item a { 22 | display: block; 23 | padding: 4px 6px; 24 | margin: 0; 25 | text-decoration: none; 26 | line-height: 12px; 27 | border-bottom: 1px solid #E5E5E5; 28 | border-top: 1px solid #fff; 29 | color: #78959D; 30 | 31 | } 32 | 33 | .ui-autocomplete .ui-menu-item a.ui-state-hover, 34 | .ui-autocomplete .ui-menu-item a.ui-state-active { 35 | background-color: #c0d1e2; 36 | color: #555; 37 | border-color: #a6cef7; 38 | } 39 | 40 | .ui-autocomplete-loading { 41 | background: white url(ui-anim_basic_16x16.gif) right center no-repeat; 42 | } 43 | 44 | ul.tagit { 45 | cursor: text; 46 | overflow: auto; 47 | font-size: 14px; 48 | width: 97%; 49 | padding: 3px; 50 | margin-top: 2px; 51 | margin-right: 6px; 52 | margin-bottom: 16px; 53 | border: 1px solid #E5E5E5; 54 | background: #fff; 55 | color: #555; 56 | } 57 | 58 | ul.tagit li { 59 | border-radius: 5px; 60 | display: block; 61 | float: left; 62 | margin: 2px 5px 2px 0; 63 | position: relative; 64 | } 65 | 66 | ul.tagit.ui-sortable li.tagit-choice a.ui-icon.ui-icon-grip-dotted-vertical{ 67 | float: left; 68 | width: 12px; 69 | margin-left: -5px; 70 | cursor: move; 71 | } 72 | 73 | ul.tagit li.tagit-choice { 74 | background-color: #DEE7F8; 75 | border: 1px solid #CAD8F3; 76 | padding: 2px 13px 3px 4px; 77 | } 78 | 79 | ul.tagit li.tagit-choice.selected { 80 | background-color: #f5b0b0; 81 | border-color: #f76464; 82 | } 83 | 84 | ul.tagit li.tagit-choice:hover { 85 | background-color: #bbcef1; 86 | border-color: #6d95e0; 87 | } 88 | 89 | ul.tagit li.tagit-new { 90 | padding: 2px 4px 3px; 91 | padding: 2px 4px 1px; 92 | padding: 2px 4px 1px 0; 93 | } 94 | 95 | ul.tagit li.tagit-choice input { 96 | display: block; 97 | float: left; 98 | margin: 0 5px 0 0; 99 | padding-top: 2px; 100 | padding-bottom: 2px; 101 | } 102 | 103 | ul.tagit li.tagit-choice a.tagit-close { 104 | color: #777777; 105 | cursor: pointer; 106 | font-size: 12px; 107 | font-weight: bold; 108 | outline: medium none; 109 | padding: 2px 0 2px 3px; 110 | text-decoration: none; 111 | position: absolute; 112 | display: block; 113 | top: 0; 114 | right: 3px; 115 | text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7); 116 | } 117 | 118 | ul.tagit li.tagit-choice a.tagit-close:hover { 119 | color: #535353; 120 | } 121 | 122 | ul.tagit div.tagit-label.hidden { 123 | display: none; 124 | } 125 | 126 | ul.tagit input.tagit-edit { 127 | margin: 0px 0px 0px 2px; 128 | border: none; 129 | line-height: 16px; 130 | } 131 | 132 | ul.tagit input[type="text"] { 133 | -moz-box-sizing: border-box; 134 | border: none !important; 135 | margin: 0 !important; 136 | padding: 0 !important; 137 | width: inherit !important; 138 | outline: none; 139 | } 140 | 141 | .tagit-hiddenSelect { 142 | display:none; 143 | } -------------------------------------------------------------------------------- /css/tagit-simple-green.css: -------------------------------------------------------------------------------- 1 | .ui-autocomplete { 2 | background-color: #fff; 3 | position: absolute; 4 | cursor: default; 5 | list-style: none; 6 | margin: 25px 0 0; 7 | padding: 0; 8 | border: 1px solid #E5E5E5; 9 | border-top: none; 10 | border-radius: 0 0 10px 10px; 11 | -webkit-box-shadow: 0 3px 5px #888; 12 | box-shadow: 0 3px 5px #888; 13 | font-size: 12px; 14 | } 15 | 16 | .ui-autocomplete .ui-menu-item { 17 | padding: 0; 18 | margin: 0; 19 | } 20 | 21 | .ui-autocomplete .ui-menu-item a { 22 | display: block; 23 | padding: 4px 6px; 24 | margin: 0; 25 | text-decoration: none; 26 | line-height: 12px; 27 | border-bottom: 1px solid #E5E5E5; 28 | border-top: 1px solid #fff; 29 | color: #789d7a; 30 | 31 | } 32 | 33 | .ui-autocomplete .ui-menu-item a.ui-state-hover, 34 | .ui-autocomplete .ui-menu-item a.ui-state-active { 35 | background-color: #c0e2c0; 36 | color: #555; 37 | border-color: #a6f7aa; 38 | } 39 | 40 | .ui-autocomplete-loading { 41 | background: white url(ui-anim_basic_16x16.gif) right center no-repeat; 42 | } 43 | 44 | ul.tagit { 45 | cursor: text; 46 | overflow: auto; 47 | font-size: 14px; 48 | width: 97%; 49 | padding: 3px; 50 | margin-top: 2px; 51 | margin-right: 6px; 52 | margin-bottom: 16px; 53 | border: 1px solid #E5E5E5; 54 | background: #fff; 55 | color: #555; 56 | } 57 | 58 | ul.tagit li { 59 | border-radius: 5px; 60 | display: block; 61 | float: left; 62 | margin: 2px 5px 2px 0; 63 | position: relative; 64 | } 65 | 66 | ul.tagit.ui-sortable li.tagit-choice a.ui-icon.ui-icon-grip-dotted-vertical{ 67 | float: left; 68 | width: 12px; 69 | margin-left: -5px; 70 | cursor: move; 71 | } 72 | 73 | ul.tagit li.tagit-choice { 74 | background-color: #dff8de; 75 | border: 1px solid #caf3cd; 76 | padding: 2px 13px 3px 4px; 77 | } 78 | 79 | ul.tagit li.tagit-choice.selected { 80 | background-color: #f5b0b0; 81 | border-color: #f76464; 82 | } 83 | 84 | ul.tagit li.tagit-choice:hover { 85 | background-color: #caf3cd; 86 | border-color: #6de072; 87 | } 88 | 89 | ul.tagit li.tagit-new { 90 | padding: 2px 4px 3px; 91 | padding: 2px 4px 1px; 92 | padding: 2px 4px 1px 0; 93 | } 94 | 95 | ul.tagit li.tagit-choice input { 96 | display: block; 97 | float: left; 98 | margin: 0 5px 0 0; 99 | padding-top: 2px; 100 | padding-bottom: 2px; 101 | } 102 | 103 | ul.tagit li.tagit-choice a.tagit-close { 104 | color: #777777; 105 | cursor: pointer; 106 | font-size: 12px; 107 | font-weight: bold; 108 | outline: medium none; 109 | padding: 2px 0 2px 3px; 110 | text-decoration: none; 111 | position: absolute; 112 | display: block; 113 | top: 0; 114 | right: 3px; 115 | text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7); 116 | } 117 | 118 | ul.tagit li.tagit-choice a.tagit-close:hover { 119 | color: #535353; 120 | } 121 | 122 | ul.tagit div.tagit-label.hidden { 123 | display: none; 124 | } 125 | 126 | ul.tagit input.tagit-edit { 127 | margin: 0px 0px 0px 2px; 128 | border: none; 129 | line-height: 16px; 130 | } 131 | 132 | ul.tagit input[type="text"] { 133 | -moz-box-sizing: border-box; 134 | border: none !important; 135 | margin: 0 !important; 136 | padding: 0 !important; 137 | width: inherit !important; 138 | outline: none; 139 | } 140 | 141 | .tagit-hiddenSelect { 142 | display:none; 143 | } -------------------------------------------------------------------------------- /css/tagit-simple-grey.css: -------------------------------------------------------------------------------- 1 | .ui-autocomplete { 2 | background-color: #fff; 3 | position: absolute; 4 | cursor: default; 5 | list-style: none; 6 | margin: 25px 0 0; 7 | padding: 0; 8 | border: 1px solid #E5E5E5; 9 | border-top: none; 10 | border-radius: 0 0 10px 10px; 11 | -webkit-box-shadow: 0 3px 5px #888; 12 | box-shadow: 0 3px 5px #888; 13 | font-size: 12px; 14 | } 15 | 16 | .ui-autocomplete .ui-menu-item { 17 | padding: 0; 18 | margin: 0; 19 | } 20 | 21 | .ui-autocomplete .ui-menu-item a { 22 | display: block; 23 | padding: 4px 6px; 24 | margin: 0; 25 | text-decoration: none; 26 | line-height: 12px; 27 | border-bottom: 1px solid #E5E5E5; 28 | border-top: 1px solid #fff; 29 | color: #78959D; 30 | 31 | } 32 | 33 | .ui-autocomplete .ui-menu-item a.ui-state-hover, 34 | .ui-autocomplete .ui-menu-item a.ui-state-active { 35 | background-color: #e3e3e3; 36 | color: #555; 37 | border-color: #f7f7f7; 38 | } 39 | 40 | .ui-autocomplete-loading { 41 | background: white url(ui-anim_basic_16x16.gif) right center no-repeat; 42 | } 43 | 44 | ul.tagit { 45 | cursor: text; 46 | overflow: auto; 47 | font-size: 14px; 48 | width: 97%; 49 | padding: 3px; 50 | margin-top: 2px; 51 | margin-right: 6px; 52 | margin-bottom: 16px; 53 | border: 1px solid #E5E5E5; 54 | background: #fff; 55 | color: #555; 56 | } 57 | 58 | ul.tagit li { 59 | border-radius: 5px; 60 | display: block; 61 | float: left; 62 | margin: 2px 5px 2px 0; 63 | position: relative; 64 | } 65 | 66 | ul.tagit.ui-sortable li.tagit-choice a.ui-icon.ui-icon-grip-dotted-vertical{ 67 | float: left; 68 | width: 12px; 69 | margin-left: -5px; 70 | cursor: move; 71 | } 72 | 73 | ul.tagit li.tagit-choice { 74 | background-color: #f7f7f7; 75 | border: 1px solid #f2f2f2; 76 | padding: 2px 13px 3px 4px; 77 | } 78 | 79 | ul.tagit li.tagit-choice.selected { 80 | background-color: #f5b0b0; 81 | border-color: #f76464; 82 | } 83 | 84 | ul.tagit li.tagit-choice:hover { 85 | background-color: #f2f2f2; 86 | border-color: #e0e0e0; 87 | } 88 | 89 | ul.tagit li.tagit-new { 90 | padding: 2px 4px 3px; 91 | padding: 2px 4px 1px; 92 | padding: 2px 4px 1px 0; 93 | } 94 | 95 | ul.tagit li.tagit-choice input { 96 | display: block; 97 | float: left; 98 | margin: 0 5px 0 0; 99 | padding-top: 2px; 100 | padding-bottom: 2px; 101 | } 102 | 103 | ul.tagit li.tagit-choice a.tagit-close { 104 | color: #777777; 105 | cursor: pointer; 106 | font-size: 12px; 107 | font-weight: bold; 108 | outline: medium none; 109 | padding: 2px 0 2px 3px; 110 | text-decoration: none; 111 | position: absolute; 112 | display: block; 113 | top: 0; 114 | right: 3px; 115 | text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7); 116 | } 117 | 118 | ul.tagit li.tagit-choice a.tagit-close:hover { 119 | color: #535353; 120 | } 121 | 122 | ul.tagit div.tagit-label.hidden { 123 | display: none; 124 | } 125 | 126 | ul.tagit input.tagit-edit { 127 | margin: 0px 0px 0px 2px; 128 | border: none; 129 | line-height: 16px; 130 | } 131 | 132 | ul.tagit input[type="text"] { 133 | -moz-box-sizing: border-box; 134 | border: none !important; 135 | margin: 0 !important; 136 | padding: 0 !important; 137 | width: inherit !important; 138 | outline: none; 139 | } 140 | 141 | .tagit-hiddenSelect { 142 | display:none; 143 | } -------------------------------------------------------------------------------- /css/tagit-stylish-yellow.css: -------------------------------------------------------------------------------- 1 | .ui-autocomplete { 2 | background-color: #fff; 3 | position: absolute; 4 | cursor: default; 5 | list-style: none; 6 | margin: 25px 0 0; 7 | padding: 0; 8 | border: 1px solid #E5E5E5; 9 | border-top: none; 10 | border-radius: 0 0 10px 10px; 11 | -webkit-box-shadow: 0 3px 5px #888; 12 | box-shadow: 0 3px 5px #888; 13 | font-size: 12px; 14 | } 15 | 16 | .ui-autocomplete .ui-menu-item { 17 | padding: 0; 18 | margin: 0; 19 | } 20 | 21 | .ui-autocomplete .ui-menu-item a { 22 | display: block; 23 | padding: 4px 6px; 24 | margin: 0; 25 | text-decoration: none; 26 | line-height: 12px; 27 | border-bottom: 1px solid #E5E5E5; 28 | border-top: 1px solid #fff; 29 | color: #78959D; 30 | 31 | } 32 | 33 | .ui-autocomplete .ui-menu-item a.ui-state-hover, 34 | .ui-autocomplete .ui-menu-item a.ui-state-active { 35 | background-color: #c0d1e2; 36 | color: #555; 37 | border-color: #a6cef7; 38 | } 39 | 40 | .ui-autocomplete-loading { 41 | background: white url(ui-anim_basic_16x16.gif) right center no-repeat; 42 | } 43 | 44 | ul.tagit { 45 | cursor: text; 46 | overflow: auto; 47 | font-size: 14px; 48 | width: 97%; 49 | padding: 3px; 50 | margin-top: 2px; 51 | margin-right: 6px; 52 | margin-bottom: 16px; 53 | border: 1px solid #E5E5E5; 54 | background: #fff; 55 | color: #333; 56 | } 57 | 58 | ul.tagit li { 59 | display: block; 60 | float: left; 61 | margin: 2px 5px 2px 0; 62 | position: relative; 63 | } 64 | 65 | ul.tagit.ui-sortable li.tagit-choice a.ui-icon.ui-icon-grip-dotted-vertical{ 66 | float: left; 67 | width: 12px; 68 | margin-left: -5px; 69 | cursor: move; 70 | } 71 | 72 | ul.tagit li.tagit-choice { 73 | background: #FFF5BB; 74 | background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.32,#FFF5BB),color-stop(0.66,#FDF2B1),color-stop(0.83, #FCEE9B)); 75 | background-image: -moz-linear-gradient(top,#FFF5BB,#FCEE9B); 76 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5bb', endColorstr='#fcee9b'); 77 | border: 1px solid #F2E598; 78 | border-bottom-left-radius: 6px; 79 | border-top-right-radius: 6px; 80 | padding: 2px 15px 3px 4px; 81 | cursor: default; 82 | } 83 | 84 | ul.tagit li.tagit-choice.selected { 85 | background: #ff3019; /* old browsers */ 86 | background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* firefox */ 87 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* webkit */ 88 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ff3019', endColorstr = '#cf0404', GradientType = 0); /* ie */ 89 | border-color: #f76464; 90 | } 91 | 92 | ul.tagit li.tagit-choice:hover { 93 | background: #FFF5BB; 94 | background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.32,#FFF57E),color-stop(0.66,#FDF2B1),color-stop(0.83, #FCEE9B)); 95 | background-image: -moz-linear-gradient(top,#FFF57E,#FCEE9B); 96 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF57E', endColorstr='#fcee9b'); 97 | } 98 | 99 | ul.tagit li.tagit-new { 100 | padding: 2px 4px 3px; 101 | padding: 2px 4px 1px; 102 | padding: 2px 4px 1px 0; 103 | } 104 | 105 | ul.tagit li.tagit-choice input { 106 | display: block; 107 | float: left; 108 | margin: 0 5px 0 0; 109 | padding-top: 2px; 110 | padding-bottom: 2px; 111 | } 112 | 113 | ul.tagit li.tagit-choice a.tagit-close { 114 | color: #111; 115 | cursor: pointer; 116 | font-size: 12px; 117 | font-weight: bold; 118 | outline: medium none; 119 | padding: 3px 0 2px 3px; 120 | text-decoration: none; 121 | position: absolute; 122 | display: block; 123 | top: 0; 124 | right: 3px; 125 | text-shadow: -1px -1px 0 rgba(150, 150, 0, 0.7); 126 | } 127 | 128 | ul.tagit li.tagit-choice a.tagit-close:hover { 129 | color: #f00; 130 | } 131 | 132 | ul.tagit div.tagit-label.hidden { 133 | display: none; 134 | } 135 | 136 | ul.tagit input.tagit-edit { 137 | margin: 0px 0px 0px 2px; 138 | border: none; 139 | line-height: 16px; 140 | } 141 | 142 | ul.tagit input[type="text"] { 143 | -moz-box-sizing: border-box; 144 | border: none !important; 145 | margin: 0 !important; 146 | padding: 0 !important; 147 | width: inherit !important; 148 | outline: none; 149 | } 150 | 151 | .tagit-hiddenSelect { 152 | display:none; 153 | } 154 | -------------------------------------------------------------------------------- /css/themeroller/aristo/images/bg_fallback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/aristo/images/bg_fallback.png -------------------------------------------------------------------------------- /css/themeroller/aristo/images/icon_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/aristo/images/icon_sprite.png -------------------------------------------------------------------------------- /css/themeroller/aristo/images/progress_bar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/aristo/images/progress_bar.gif -------------------------------------------------------------------------------- /css/themeroller/aristo/images/slider_handles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/aristo/images/slider_handles.png -------------------------------------------------------------------------------- /css/themeroller/aristo/images/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/aristo/images/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /css/themeroller/aristo/images/ui-icons_454545_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/aristo/images/ui-icons_454545_256x240.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-bg_flat_0_aaaaaa_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-bg_flat_0_aaaaaa_40x100.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-bg_glass_55_fbf9ee_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-bg_glass_55_fbf9ee_1x400.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-bg_glass_65_ffffff_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-bg_glass_65_ffffff_1x400.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-bg_glass_75_dadada_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-bg_glass_75_dadada_1x400.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-bg_glass_75_e6e6e6_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-bg_glass_75_e6e6e6_1x400.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-bg_glass_75_ffffff_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-bg_glass_75_ffffff_1x400.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-bg_highlight-soft_75_cccccc_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-bg_highlight-soft_75_cccccc_1x100.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-bg_inset-soft_95_fef1ec_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-bg_inset-soft_95_fef1ec_1x100.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-icons_2e83ff_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-icons_2e83ff_256x240.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-icons_454545_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-icons_454545_256x240.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-icons_888888_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-icons_888888_256x240.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-icons_cd0a0a_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-icons_cd0a0a_256x240.png -------------------------------------------------------------------------------- /css/themeroller/bootstrap/images/ui-icons_f6cf3b_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/themeroller/bootstrap/images/ui-icons_f6cf3b_256x240.png -------------------------------------------------------------------------------- /css/themeroller/tagit.css: -------------------------------------------------------------------------------- 1 | ul.tagit.ui-widget{ 2 | overflow: auto; 3 | list-style-type: none; 4 | padding: 1px 5px; 5 | } 6 | 7 | ul.tagit.ui-widget li.tagit-choice{ 8 | display: block; 9 | float: left; 10 | margin: 2px 5px 2px 0; 11 | position: relative; 12 | line-height: inherit; 13 | padding: .2em 11px .2em .5em; 14 | } 15 | 16 | ul.tagit.ui-widget li.tagit-new{ 17 | display: block; 18 | float: left; 19 | margin: 2px 5px 2px 0; 20 | position: relative; 21 | line-height: inherit; 22 | padding: .2em 0; 23 | } 24 | 25 | ul.tagit.ui-widget li.tagit-choice.ui-state-error { 26 | border-radius: 0; 27 | } 28 | 29 | ul.tagit.ui-widget li.tagit-choice a.tagit-close{ 30 | cursor: pointer; 31 | position: absolute; 32 | right: 2px; 33 | top: 50%; 34 | margin-top: -8px; 35 | } 36 | 37 | ul.tagit div.tagit-label.hidden { 38 | display: none; 39 | } 40 | 41 | ul.tagit input.tagit-edit { 42 | margin: 0px 0px 0px 2px; 43 | border: none; 44 | line-height: 16px; 45 | } 46 | 47 | ul.tagit input[type="text"] { 48 | -moz-box-sizing: border-box; 49 | border: none !important; 50 | margin: 0 !important; 51 | padding: 0 !important; 52 | width: inherit !important; 53 | outline: none; 54 | } 55 | 56 | ul.tagit.ui-widget li.tagit-new input[type="text"].tagit-input, 57 | ul.tagit.ui-widget li.tagit-new input[type="text"].tagit-input:active, 58 | ul.tagit.ui-widget li.tagit-new input[type="text"].tagit-input:hover, 59 | ul.tagit.ui-widget li.tagit-new input[type="text"].tagit-input:focus{ 60 | box-sizing: border-box; 61 | border: none; 62 | margin: 0; 63 | padding: 0; 64 | width: inherit; 65 | background-color: inherit; 66 | outline: none; 67 | display: block; 68 | border-radius: 0; 69 | box-shadow: none; 70 | } 71 | 72 | ul.ui-autocomplete.custom-ac{ 73 | width: 760px; 74 | } 75 | 76 | ul.ui-autocomplete li.ui-menu-item.ac-item{ 77 | float: left; 78 | width: 253px; 79 | clear: none; 80 | } 81 | 82 | ul.ui-autocomplete li.ui-menu-item.ac-item div.ui-widget-content{ 83 | font-size: 85%; 84 | height: 80px; 85 | overflow: auto; 86 | padding: 3px; 87 | 88 | } 89 | 90 | .tagit-hiddenSelect { 91 | display:none; 92 | } -------------------------------------------------------------------------------- /css/ui-anim_basic_16x16.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/css/ui-anim_basic_16x16.gif -------------------------------------------------------------------------------- /demo/css/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: Helvetica; 5 | background-color: #396884; 6 | font-size: 12px; 7 | } 8 | 9 | .tr { 10 | width: 200px; 11 | } 12 | 13 | #switcher.notr a:active, 14 | #switcher.notr a:visited, 15 | #switcher.notr a { 16 | text-decoration: none; 17 | color: #fff; 18 | font-size: 14px; 19 | font-weight: bold; 20 | text-align: center; 21 | padding: 5px; 22 | background-color: rgba(0, 0, 0, 0.5); 23 | border-radius: 5px; 24 | box-shadow: 2px 2px 2px rgba(255, 255, 255, 0.2), -2px -2px 2px rgba(0, 0, 0, 0.2); 25 | display: block; 26 | } 27 | 28 | #switcher.notr a:hover { 29 | background-color: rgba(0, 0, 0, 0.6); 30 | } 31 | 32 | #switcher_parent { 33 | position: fixed; 34 | top: 10px; 35 | right: 10px; 36 | } 37 | 38 | #wrap { 39 | width: 800px; 40 | margin: 20px auto; 41 | padding: 16px; 42 | font-weight: normal; 43 | -khtml-border-radius: 11px; 44 | -webkit-border-radius: 11px; 45 | border-radius: 5px; 46 | background: #fff; 47 | border: 1px solid #e5e5e5; 48 | -webkit-box-shadow: rgba(200, 200, 200, 1) 0 4px 18px; 49 | -khtml-box-shadow: rgba(200, 200, 200, 1) 0 4px 18px; 50 | box-shadow: rgba(200, 200, 200, 1) 0 4px 18px; 51 | } 52 | 53 | h1, h2, h3, h4, h5, h6 { 54 | color: #1a3c73; 55 | padding-bottom: 10px; 56 | padding-top: 15px; 57 | margin-bottom: 0; 58 | font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 59 | } 60 | 61 | #description { 62 | margin-bottom: 20px; 63 | } 64 | 65 | .blue { 66 | text-decoration:underline;; 67 | color:Blue; 68 | } 69 | 70 | .box { 71 | padding: 10px; 72 | font-size: 12px; 73 | border-radius: 2px; 74 | background: #f3f3f3; 75 | color: #4f6f95; 76 | border: 1px solid #e5e5e5; 77 | } 78 | 79 | .note { 80 | border: 1px solid #7a8fa9; 81 | background: #fef1ec; 82 | margin: 5px 0; 83 | border-radius: 2px; 84 | padding: 3px; 85 | } 86 | 87 | .code { 88 | background-color: #eee; 89 | border: 1px solid #eee; 90 | color: #000; 91 | } 92 | 93 | .code .wrap { 94 | font-family: monospace; 95 | white-space: pre; 96 | } 97 | 98 | .box:hover .code { 99 | background-color: #fff; 100 | border-color: #92b5de; 101 | } 102 | 103 | .code .blue { 104 | color: #2c4bc1; 105 | } 106 | 107 | .code .red { 108 | color: #c12c2c; 109 | } 110 | 111 | .code .green { 112 | color: #14730d; 113 | } 114 | 115 | .features { 116 | font-size: 14px; 117 | } 118 | 119 | .features ul li { 120 | margin-bottom: 5px; 121 | } 122 | 123 | table { 124 | width: 100%; 125 | border: 1px solid #e5eff8; 126 | margin: 0 auto; 127 | border-collapse: collapse; 128 | background-color: #fff; 129 | -webkit-box-shadow: rgba(200, 200, 200, 1) 0 4px 4px; 130 | -khtml-box-shadow: rgba(200, 200, 200, 1) 0 4px 4px; 131 | box-shadow: rgba(200, 200, 200, 1) 0 4px 4px; 132 | font-size: 11px; 133 | } 134 | 135 | .box:hover table { 136 | border-color: #9fccf4; 137 | } 138 | 139 | tr.odd td { 140 | background: #f7fbff 141 | } 142 | 143 | tr:hover td { 144 | background-color: #bddaf4; 145 | color: #1d4b74; 146 | } 147 | 148 | td { 149 | color: #678197; 150 | border-bottom: 1px solid #e5eff8; 151 | border-left: 1px solid #e5eff8; 152 | padding: .7em 1em; 153 | } 154 | 155 | td.left { 156 | text-align: left; 157 | } 158 | 159 | th { 160 | font-weight: normal; 161 | color: #678197; 162 | text-align: left; 163 | border-bottom: 1px solid #e5eff8; 164 | border-left: 1px solid #e5eff8; 165 | padding: .3em 1em; 166 | } 167 | 168 | thead th { 169 | background: #f4f9fe; 170 | font: bold 1.2em/2em "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif; 171 | color: #66a3d3 172 | } 173 | 174 | .browser { 175 | width: 138px; 176 | height: 138px; 177 | float: left; 178 | margin-right: 22px; 179 | position: relative; 180 | border-radius: 5px; 181 | } 182 | 183 | .browser:hover { 184 | background-color: #d5e0fe; 185 | } 186 | 187 | .browser a { 188 | display: block; 189 | height: 100%; 190 | width: 100%; 191 | margin: 5px; 192 | text-decoration: none; 193 | } 194 | 195 | .browser a div { 196 | top: 50%; 197 | display: none; 198 | background-color: rgba(0, 0, 0, 0.8); 199 | /*background-color: #000000;*/ 200 | text-align: center; 201 | height: 25px; 202 | line-height: 25px; 203 | position: absolute; 204 | width: 128px; 205 | border-radius: 5px; 206 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); 207 | border: 1px solid #82bac9; 208 | color: #fff; 209 | font-size: 10px; 210 | text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2); 211 | text-decoration: none; 212 | } 213 | 214 | #firefox { 215 | background: url('../images/browsers/firefox.png') no-repeat; 216 | } 217 | 218 | #chrome { 219 | background: url('../images/browsers/chrome.png') no-repeat; 220 | } 221 | 222 | #ie { 223 | background: url('../images/browsers/ie.png') no-repeat; 224 | } 225 | 226 | #opera { 227 | background: url('../images/browsers/opera.png') no-repeat; 228 | } 229 | 230 | #safari { 231 | background: url('../images/browsers/safari.png') no-repeat; 232 | } 233 | 234 | .box a { 235 | text-decoration: none; 236 | color: #4c91df; 237 | } 238 | 239 | .box a:hover { 240 | color: #9fc4ed; 241 | } 242 | 243 | select.tagit-hiddenSelect { 244 | display: inline-block !important; 245 | } -------------------------------------------------------------------------------- /demo/css/images/ui-bg_flat_0_aaaaaa_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-bg_flat_0_aaaaaa_40x100.png -------------------------------------------------------------------------------- /demo/css/images/ui-bg_flat_75_ffffff_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-bg_flat_75_ffffff_40x100.png -------------------------------------------------------------------------------- /demo/css/images/ui-bg_glass_55_fbf9ee_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-bg_glass_55_fbf9ee_1x400.png -------------------------------------------------------------------------------- /demo/css/images/ui-bg_glass_65_ffffff_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-bg_glass_65_ffffff_1x400.png -------------------------------------------------------------------------------- /demo/css/images/ui-bg_glass_75_dadada_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-bg_glass_75_dadada_1x400.png -------------------------------------------------------------------------------- /demo/css/images/ui-bg_glass_75_e6e6e6_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-bg_glass_75_e6e6e6_1x400.png -------------------------------------------------------------------------------- /demo/css/images/ui-bg_glass_95_fef1ec_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-bg_glass_95_fef1ec_1x400.png -------------------------------------------------------------------------------- /demo/css/images/ui-bg_highlight-soft_75_cccccc_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-bg_highlight-soft_75_cccccc_1x100.png -------------------------------------------------------------------------------- /demo/css/images/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /demo/css/images/ui-icons_2e83ff_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-icons_2e83ff_256x240.png -------------------------------------------------------------------------------- /demo/css/images/ui-icons_454545_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-icons_454545_256x240.png -------------------------------------------------------------------------------- /demo/css/images/ui-icons_888888_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-icons_888888_256x240.png -------------------------------------------------------------------------------- /demo/css/images/ui-icons_cd0a0a_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/css/images/ui-icons_cd0a0a_256x240.png -------------------------------------------------------------------------------- /demo/css/jquery-ui-base-1.8.20.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery UI CSS Framework 1.8.20 3 | * 4 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Theming/API 9 | */ 10 | 11 | /* Layout helpers 12 | ----------------------------------*/ 13 | .ui-helper-hidden { display: none; } 14 | .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } 15 | .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } 16 | .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; } 17 | .ui-helper-clearfix:after { clear: both; } 18 | .ui-helper-clearfix { zoom: 1; } 19 | .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } 20 | 21 | 22 | /* Interaction Cues 23 | ----------------------------------*/ 24 | .ui-state-disabled { cursor: default !important; } 25 | 26 | 27 | /* Icons 28 | ----------------------------------*/ 29 | 30 | /* states and images */ 31 | .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } 32 | 33 | 34 | /* Misc visuals 35 | ----------------------------------*/ 36 | 37 | /* Overlays */ 38 | .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 39 | 40 | /*! 41 | * jQuery UI Selectable 1.8.20 42 | * 43 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 44 | * Dual licensed under the MIT or GPL Version 2 licenses. 45 | * http://jquery.org/license 46 | * 47 | * http://docs.jquery.com/UI/Selectable#theming 48 | */ 49 | .ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; } 50 | 51 | /*! 52 | * jQuery UI Autocomplete 1.8.20 53 | * 54 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 55 | * Dual licensed under the MIT or GPL Version 2 licenses. 56 | * http://jquery.org/license 57 | * 58 | * http://docs.jquery.com/UI/Autocomplete#theming 59 | */ 60 | .ui-autocomplete { position: absolute; cursor: default; } 61 | 62 | /* workarounds */ 63 | * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ 64 | 65 | /* 66 | * jQuery UI Menu 1.8.20 67 | * 68 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 69 | * Dual licensed under the MIT or GPL Version 2 licenses. 70 | * http://jquery.org/license 71 | * 72 | * http://docs.jquery.com/UI/Menu#theming 73 | */ 74 | .ui-menu { 75 | list-style:none; 76 | padding: 2px; 77 | margin: 0; 78 | display:block; 79 | float: left; 80 | } 81 | .ui-menu .ui-menu { 82 | margin-top: -3px; 83 | } 84 | .ui-menu .ui-menu-item { 85 | margin:0; 86 | padding: 0; 87 | zoom: 1; 88 | float: left; 89 | clear: left; 90 | width: 100%; 91 | } 92 | .ui-menu .ui-menu-item a { 93 | text-decoration:none; 94 | display:block; 95 | padding:.2em .4em; 96 | line-height:1.5; 97 | zoom:1; 98 | } 99 | .ui-menu .ui-menu-item a.ui-state-hover, 100 | .ui-menu .ui-menu-item a.ui-state-active { 101 | font-weight: normal; 102 | margin: -1px; 103 | } 104 | 105 | /*! 106 | * jQuery UI CSS Framework 1.8.20 107 | * 108 | * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) 109 | * Dual licensed under the MIT or GPL Version 2 licenses. 110 | * http://jquery.org/license 111 | * 112 | * http://docs.jquery.com/UI/Theming/API 113 | * 114 | * To view and modify this theme, visit http://jqueryui.com/themeroller/ 115 | */ 116 | 117 | 118 | /* Component containers 119 | ----------------------------------*/ 120 | .ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; } 121 | .ui-widget .ui-widget { font-size: 1em; } 122 | .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; } 123 | .ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; } 124 | .ui-widget-content a { color: #222222/*{fcContent}*/; } 125 | .ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; } 126 | .ui-widget-header a { color: #222222/*{fcHeader}*/; } 127 | 128 | /* Interaction states 129 | ----------------------------------*/ 130 | .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; } 131 | .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; } 132 | .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999/*{borderColorHover}*/; background: #dadada/*{bgColorHover}*/ url(images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; } 133 | .ui-state-hover a, .ui-state-hover a:hover { color: #212121/*{fcHover}*/; text-decoration: none; } 134 | .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; } 135 | .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; } 136 | .ui-widget :active { outline: none; } 137 | 138 | /* Interaction Cues 139 | ----------------------------------*/ 140 | .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ url(images/ui-bg_glass_55_fbf9ee_1x400.png)/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; } 141 | .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636/*{fcHighlight}*/; } 142 | .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ url(images/ui-bg_glass_95_fef1ec_1x400.png)/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; } 143 | .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a/*{fcError}*/; } 144 | .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a/*{fcError}*/; } 145 | .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } 146 | .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } 147 | .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } 148 | 149 | /* Icons 150 | ----------------------------------*/ 151 | 152 | /* states and images */ 153 | .ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; } 154 | .ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; } 155 | .ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; } 156 | .ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; } 157 | .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHover}*/; } 158 | .ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; } 159 | .ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; } 160 | .ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; } 161 | 162 | /* positioning */ 163 | .ui-icon-carat-1-n { background-position: 0 0; } 164 | .ui-icon-carat-1-ne { background-position: -16px 0; } 165 | .ui-icon-carat-1-e { background-position: -32px 0; } 166 | .ui-icon-carat-1-se { background-position: -48px 0; } 167 | .ui-icon-carat-1-s { background-position: -64px 0; } 168 | .ui-icon-carat-1-sw { background-position: -80px 0; } 169 | .ui-icon-carat-1-w { background-position: -96px 0; } 170 | .ui-icon-carat-1-nw { background-position: -112px 0; } 171 | .ui-icon-carat-2-n-s { background-position: -128px 0; } 172 | .ui-icon-carat-2-e-w { background-position: -144px 0; } 173 | .ui-icon-triangle-1-n { background-position: 0 -16px; } 174 | .ui-icon-triangle-1-ne { background-position: -16px -16px; } 175 | .ui-icon-triangle-1-e { background-position: -32px -16px; } 176 | .ui-icon-triangle-1-se { background-position: -48px -16px; } 177 | .ui-icon-triangle-1-s { background-position: -64px -16px; } 178 | .ui-icon-triangle-1-sw { background-position: -80px -16px; } 179 | .ui-icon-triangle-1-w { background-position: -96px -16px; } 180 | .ui-icon-triangle-1-nw { background-position: -112px -16px; } 181 | .ui-icon-triangle-2-n-s { background-position: -128px -16px; } 182 | .ui-icon-triangle-2-e-w { background-position: -144px -16px; } 183 | .ui-icon-arrow-1-n { background-position: 0 -32px; } 184 | .ui-icon-arrow-1-ne { background-position: -16px -32px; } 185 | .ui-icon-arrow-1-e { background-position: -32px -32px; } 186 | .ui-icon-arrow-1-se { background-position: -48px -32px; } 187 | .ui-icon-arrow-1-s { background-position: -64px -32px; } 188 | .ui-icon-arrow-1-sw { background-position: -80px -32px; } 189 | .ui-icon-arrow-1-w { background-position: -96px -32px; } 190 | .ui-icon-arrow-1-nw { background-position: -112px -32px; } 191 | .ui-icon-arrow-2-n-s { background-position: -128px -32px; } 192 | .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } 193 | .ui-icon-arrow-2-e-w { background-position: -160px -32px; } 194 | .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } 195 | .ui-icon-arrowstop-1-n { background-position: -192px -32px; } 196 | .ui-icon-arrowstop-1-e { background-position: -208px -32px; } 197 | .ui-icon-arrowstop-1-s { background-position: -224px -32px; } 198 | .ui-icon-arrowstop-1-w { background-position: -240px -32px; } 199 | .ui-icon-arrowthick-1-n { background-position: 0 -48px; } 200 | .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } 201 | .ui-icon-arrowthick-1-e { background-position: -32px -48px; } 202 | .ui-icon-arrowthick-1-se { background-position: -48px -48px; } 203 | .ui-icon-arrowthick-1-s { background-position: -64px -48px; } 204 | .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } 205 | .ui-icon-arrowthick-1-w { background-position: -96px -48px; } 206 | .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } 207 | .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } 208 | .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } 209 | .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } 210 | .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } 211 | .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } 212 | .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } 213 | .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } 214 | .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } 215 | .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } 216 | .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } 217 | .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } 218 | .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } 219 | .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } 220 | .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } 221 | .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } 222 | .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } 223 | .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } 224 | .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } 225 | .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } 226 | .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } 227 | .ui-icon-arrow-4 { background-position: 0 -80px; } 228 | .ui-icon-arrow-4-diag { background-position: -16px -80px; } 229 | .ui-icon-extlink { background-position: -32px -80px; } 230 | .ui-icon-newwin { background-position: -48px -80px; } 231 | .ui-icon-refresh { background-position: -64px -80px; } 232 | .ui-icon-shuffle { background-position: -80px -80px; } 233 | .ui-icon-transfer-e-w { background-position: -96px -80px; } 234 | .ui-icon-transferthick-e-w { background-position: -112px -80px; } 235 | .ui-icon-folder-collapsed { background-position: 0 -96px; } 236 | .ui-icon-folder-open { background-position: -16px -96px; } 237 | .ui-icon-document { background-position: -32px -96px; } 238 | .ui-icon-document-b { background-position: -48px -96px; } 239 | .ui-icon-note { background-position: -64px -96px; } 240 | .ui-icon-mail-closed { background-position: -80px -96px; } 241 | .ui-icon-mail-open { background-position: -96px -96px; } 242 | .ui-icon-suitcase { background-position: -112px -96px; } 243 | .ui-icon-comment { background-position: -128px -96px; } 244 | .ui-icon-person { background-position: -144px -96px; } 245 | .ui-icon-print { background-position: -160px -96px; } 246 | .ui-icon-trash { background-position: -176px -96px; } 247 | .ui-icon-locked { background-position: -192px -96px; } 248 | .ui-icon-unlocked { background-position: -208px -96px; } 249 | .ui-icon-bookmark { background-position: -224px -96px; } 250 | .ui-icon-tag { background-position: -240px -96px; } 251 | .ui-icon-home { background-position: 0 -112px; } 252 | .ui-icon-flag { background-position: -16px -112px; } 253 | .ui-icon-calendar { background-position: -32px -112px; } 254 | .ui-icon-cart { background-position: -48px -112px; } 255 | .ui-icon-pencil { background-position: -64px -112px; } 256 | .ui-icon-clock { background-position: -80px -112px; } 257 | .ui-icon-disk { background-position: -96px -112px; } 258 | .ui-icon-calculator { background-position: -112px -112px; } 259 | .ui-icon-zoomin { background-position: -128px -112px; } 260 | .ui-icon-zoomout { background-position: -144px -112px; } 261 | .ui-icon-search { background-position: -160px -112px; } 262 | .ui-icon-wrench { background-position: -176px -112px; } 263 | .ui-icon-gear { background-position: -192px -112px; } 264 | .ui-icon-heart { background-position: -208px -112px; } 265 | .ui-icon-star { background-position: -224px -112px; } 266 | .ui-icon-link { background-position: -240px -112px; } 267 | .ui-icon-cancel { background-position: 0 -128px; } 268 | .ui-icon-plus { background-position: -16px -128px; } 269 | .ui-icon-plusthick { background-position: -32px -128px; } 270 | .ui-icon-minus { background-position: -48px -128px; } 271 | .ui-icon-minusthick { background-position: -64px -128px; } 272 | .ui-icon-close { background-position: -80px -128px; } 273 | .ui-icon-closethick { background-position: -96px -128px; } 274 | .ui-icon-key { background-position: -112px -128px; } 275 | .ui-icon-lightbulb { background-position: -128px -128px; } 276 | .ui-icon-scissors { background-position: -144px -128px; } 277 | .ui-icon-clipboard { background-position: -160px -128px; } 278 | .ui-icon-copy { background-position: -176px -128px; } 279 | .ui-icon-contact { background-position: -192px -128px; } 280 | .ui-icon-image { background-position: -208px -128px; } 281 | .ui-icon-video { background-position: -224px -128px; } 282 | .ui-icon-script { background-position: -240px -128px; } 283 | .ui-icon-alert { background-position: 0 -144px; } 284 | .ui-icon-info { background-position: -16px -144px; } 285 | .ui-icon-notice { background-position: -32px -144px; } 286 | .ui-icon-help { background-position: -48px -144px; } 287 | .ui-icon-check { background-position: -64px -144px; } 288 | .ui-icon-bullet { background-position: -80px -144px; } 289 | .ui-icon-radio-off { background-position: -96px -144px; } 290 | .ui-icon-radio-on { background-position: -112px -144px; } 291 | .ui-icon-pin-w { background-position: -128px -144px; } 292 | .ui-icon-pin-s { background-position: -144px -144px; } 293 | .ui-icon-play { background-position: 0 -160px; } 294 | .ui-icon-pause { background-position: -16px -160px; } 295 | .ui-icon-seek-next { background-position: -32px -160px; } 296 | .ui-icon-seek-prev { background-position: -48px -160px; } 297 | .ui-icon-seek-end { background-position: -64px -160px; } 298 | .ui-icon-seek-start { background-position: -80px -160px; } 299 | /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ 300 | .ui-icon-seek-first { background-position: -80px -160px; } 301 | .ui-icon-stop { background-position: -96px -160px; } 302 | .ui-icon-eject { background-position: -112px -160px; } 303 | .ui-icon-volume-off { background-position: -128px -160px; } 304 | .ui-icon-volume-on { background-position: -144px -160px; } 305 | .ui-icon-power { background-position: 0 -176px; } 306 | .ui-icon-signal-diag { background-position: -16px -176px; } 307 | .ui-icon-signal { background-position: -32px -176px; } 308 | .ui-icon-battery-0 { background-position: -48px -176px; } 309 | .ui-icon-battery-1 { background-position: -64px -176px; } 310 | .ui-icon-battery-2 { background-position: -80px -176px; } 311 | .ui-icon-battery-3 { background-position: -96px -176px; } 312 | .ui-icon-circle-plus { background-position: 0 -192px; } 313 | .ui-icon-circle-minus { background-position: -16px -192px; } 314 | .ui-icon-circle-close { background-position: -32px -192px; } 315 | .ui-icon-circle-triangle-e { background-position: -48px -192px; } 316 | .ui-icon-circle-triangle-s { background-position: -64px -192px; } 317 | .ui-icon-circle-triangle-w { background-position: -80px -192px; } 318 | .ui-icon-circle-triangle-n { background-position: -96px -192px; } 319 | .ui-icon-circle-arrow-e { background-position: -112px -192px; } 320 | .ui-icon-circle-arrow-s { background-position: -128px -192px; } 321 | .ui-icon-circle-arrow-w { background-position: -144px -192px; } 322 | .ui-icon-circle-arrow-n { background-position: -160px -192px; } 323 | .ui-icon-circle-zoomin { background-position: -176px -192px; } 324 | .ui-icon-circle-zoomout { background-position: -192px -192px; } 325 | .ui-icon-circle-check { background-position: -208px -192px; } 326 | .ui-icon-circlesmall-plus { background-position: 0 -208px; } 327 | .ui-icon-circlesmall-minus { background-position: -16px -208px; } 328 | .ui-icon-circlesmall-close { background-position: -32px -208px; } 329 | .ui-icon-squaresmall-plus { background-position: -48px -208px; } 330 | .ui-icon-squaresmall-minus { background-position: -64px -208px; } 331 | .ui-icon-squaresmall-close { background-position: -80px -208px; } 332 | .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } 333 | .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } 334 | .ui-icon-grip-solid-vertical { background-position: -32px -224px; } 335 | .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } 336 | .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } 337 | .ui-icon-grip-diagonal-se { background-position: -80px -224px; } 338 | 339 | 340 | /* Misc visuals 341 | ----------------------------------*/ 342 | 343 | /* Corner radius */ 344 | .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/; } 345 | .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/; } 346 | .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/; } 347 | .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/; } 348 | 349 | /* Overlays */ 350 | .ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; } 351 | .ui-widget-shadow { margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/; padding: 8px/*{thicknessShadow}*/; background: #aaaaaa/*{bgColorShadow}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityShadow}*/; -moz-border-radius: 8px/*{cornerRadiusShadow}*/; -khtml-border-radius: 8px/*{cornerRadiusShadow}*/; -webkit-border-radius: 8px/*{cornerRadiusShadow}*/; border-radius: 8px/*{cornerRadiusShadow}*/; } 352 | -------------------------------------------------------------------------------- /demo/images/browsers/chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/images/browsers/chrome.png -------------------------------------------------------------------------------- /demo/images/browsers/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/images/browsers/firefox.png -------------------------------------------------------------------------------- /demo/images/browsers/ie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/images/browsers/ie.png -------------------------------------------------------------------------------- /demo/images/browsers/opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/images/browsers/opera.png -------------------------------------------------------------------------------- /demo/images/browsers/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/images/browsers/safari.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/buttonbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/buttonbg.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/icon_color_arrow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/icon_color_arrow.gif -------------------------------------------------------------------------------- /demo/themeswitcher/images/menuhoverbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/menuhoverbg.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_aristo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_aristo.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_black_matte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_black_matte.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_black_tie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_black_tie.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_blitzer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_blitzer.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_cupertino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_cupertino.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_dark_hive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_dark_hive.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_dot_luv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_dot_luv.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_eggplant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_eggplant.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_excite_bike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_excite_bike.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_flick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_flick.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_hot_sneaks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_hot_sneaks.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_humanity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_humanity.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_le_frog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_le_frog.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_mint_choco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_mint_choco.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_overcast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_overcast.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_pepper_grinder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_pepper_grinder.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_smoothness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_smoothness.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_south_street.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_south_street.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_start_menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_start_menu.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_sunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_sunny.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_swanky_purse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_swanky_purse.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_trontastic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_trontastic.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_ui_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_ui_dark.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_ui_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_ui_light.png -------------------------------------------------------------------------------- /demo/themeswitcher/images/theme_90_windoze.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hailwood/jQuery-Tagit/a940c692a426c77dba7150e65d6741ee4ea7ddf4/demo/themeswitcher/images/theme_90_windoze.png -------------------------------------------------------------------------------- /demo/themeswitcher/jquery.themeswitcher.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery Theme Switcher plugin 3 | * 4 | * Copyright (c) 2011 Dave Hoff (davehoff.com) 5 | * Dual licensed under the MIT and GPL licenses: 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * http://www.gnu.org/licenses/gpl.html 8 | * 9 | */ 10 | 11 | (function( $ ){ 12 | 13 | $.fn.themeswitcher = function( options ) { 14 | var switcherDiv = this, switcherOptions = {}; 15 | var settings = { 16 | loadtheme : "", 17 | height: 200, 18 | width: 175, 19 | rounded: true, 20 | imgpath: "", 21 | jqueryuiversion: "1.8.10", 22 | initialtext: "Switch Theme", 23 | buttonpretext: "Theme:", 24 | closeonselect: true, 25 | buttonheight: 14, 26 | cookiename: "jquery-ui-theme", 27 | themes: [], 28 | additionalthemes: [], 29 | onopen: null, 30 | onclose: null, 31 | onselect: null 32 | }; 33 | 34 | if(options) { 35 | //lowercase all options passed in 36 | $.each(options, function(k,v){ 37 | switcherOptions[k.toLowerCase()] = v; 38 | }); 39 | 40 | $.extend( settings, switcherOptions ); 41 | } 42 | 43 | if( ! settings.themes.length ){ 44 | var themes = [ 45 | { 46 | title: "Black Tie", 47 | name: "black-tie", 48 | icon: "theme_90_black_tie.png" 49 | }, 50 | { 51 | title: "Blitzer", 52 | name: "blitzer", 53 | icon: "theme_90_blitzer.png" 54 | }, 55 | { 56 | title: "Cupertino", 57 | name: "cupertino", 58 | icon: "theme_90_cupertino.png" 59 | }, 60 | { 61 | title: "Dark Hive", 62 | name: "dark-hive", 63 | icon: "theme_90_dark_hive.png" 64 | }, 65 | { 66 | title: "Dot Luv", 67 | name: "dot-luv", 68 | icon: "theme_90_dot_luv.png" 69 | }, 70 | { 71 | title: "Eggplant", 72 | name: "eggplant", 73 | icon: "theme_90_eggplant.png" 74 | }, 75 | { 76 | title: "Excite Bike", 77 | name: "excite-bike", 78 | icon: "theme_90_excite_bike.png" 79 | }, 80 | { 81 | title: "Flick", 82 | name: "flick", 83 | icon: "theme_90_flick.png" 84 | }, 85 | { 86 | title: "Hot Sneaks", 87 | name: "hot-sneaks", 88 | icon: "theme_90_hot_sneaks.png" 89 | }, 90 | { 91 | title: "Humanity", 92 | name: "humanity", 93 | icon: "theme_90_humanity.png" 94 | }, 95 | { 96 | title: "Le Frog", 97 | name: "le-frog", 98 | icon: "theme_90_le_frog.png" 99 | }, 100 | { 101 | title: "Mint Choc", 102 | name: "mint-choc", 103 | icon: "theme_90_mint_choco.png" 104 | }, 105 | { 106 | title: "Overcast", 107 | name: "overcast", 108 | icon: "theme_90_overcast.png" 109 | }, 110 | { 111 | title: "Pepper Grinder", 112 | name: "pepper-grinder", 113 | icon: "theme_90_pepper_grinder.png" 114 | }, 115 | { 116 | title: "Redmond", 117 | name: "redmond", 118 | icon: "theme_90_windoze.png" 119 | }, 120 | { 121 | title: "Smoothness", 122 | name: "smoothness", 123 | icon: "theme_90_smoothness.png" 124 | }, 125 | { 126 | title: "South Street", 127 | name: "south-street", 128 | icon: "theme_90_south_street.png" 129 | }, 130 | { 131 | title: "Start", 132 | name: "start", 133 | icon: "theme_90_start_menu.png" 134 | }, 135 | { 136 | title: "Sunny", 137 | name: "sunny", 138 | icon: "theme_90_sunny.png" 139 | }, 140 | { 141 | title: "Swanky Purse", 142 | name: "swanky-purse", 143 | icon: "theme_90_swanky_purse.png" 144 | }, 145 | { 146 | title: "Trontastic", 147 | name: "trontastic", 148 | icon: "theme_90_trontastic.png" 149 | }, 150 | { 151 | title: "UI Darkness", 152 | name: "ui-darkness", 153 | icon: "theme_90_ui_dark.png" 154 | }, 155 | { 156 | title: "UI Lightness", 157 | name: "ui-lightness", 158 | icon: "theme_90_ui_light.png" 159 | }, 160 | { 161 | title: "Vader", 162 | name: "vader", 163 | icon: "theme_90_black_matte.png" 164 | } 165 | ] 166 | }else{ 167 | var themes = settings.themes; 168 | } 169 | 170 | if( settings.additionalthemes.length ){ 171 | $.extend( themes, settings.additionalthemes ); 172 | } 173 | 174 | // Switcher link 175 | var switcherLinkStyle = { 176 | "cursor": "pointer", 177 | "font-family": "'Trebuchet MS', Verdana, sans-serif", 178 | "font-size": "11px", 179 | "color": "#666", 180 | "background": "#eee url("+settings.imgpath+"buttonbg.png) repeat-x 50% 50%", 181 | "border": "1px solid #CCC", 182 | "text-decoration": "none", 183 | "padding": "3px 3px 3px 8px", 184 | "width": settings.width+"px", 185 | "display": "block", 186 | "height": settings.buttonheight+"px", 187 | "outline": "0px" , 188 | "line-height": settings.buttonheight+"px" 189 | } 190 | 191 | if( settings.rounded ){ 192 | switcherLinkStyle['border-radius'] = "6px"; 193 | switcherLinkStyle['-moz-border-radius'] = "6px"; 194 | switcherLinkStyle['-webkit-border-radius'] = "6px"; 195 | } 196 | 197 | var switcherLink = $("") 198 | .addClass("jquery-ui-switcher-link") 199 | .css(switcherLinkStyle) 200 | .bind({ 201 | mouseenter: function(){ 202 | $(this).css({ 203 | "background": "#eee" 204 | }) 205 | }, 206 | mouseleave: function(){ 207 | if( ! switcherDiv.find(".jquery-ui-switcher-list-hldr").is(":visible") ){ 208 | $(this).css({ 209 | "background":"#eee url("+settings.imgpath+"buttonbg.png) repeat-x 50% 50%" 210 | }) 211 | } 212 | }, 213 | click: function(){ 214 | (!switcherDiv.find(".jquery-ui-switcher-list-hldr").is(":visible")) ? openSwitcher() : closeSwitcher(); 215 | } 216 | }); 217 | 218 | // Title & Icon for switcher link 219 | var switcherTitle = $("").addClass("jquery-ui-switcher-title").appendTo(switcherLink); 220 | $("").addClass("jquery-ui-switcher-arrow") 221 | .css({ 222 | "float": "right", 223 | "width": "16px", 224 | "height": "16px", 225 | "background": "url("+settings.imgpath+"icon_color_arrow.gif) no-repeat 50% 50%" 226 | }) 227 | .appendTo(switcherLink); 228 | 229 | // load the default theme or the theme stored in the cookie 230 | if( $.cookie(settings.cookiename) ){ 231 | updateTheme( findTheme($.cookie(settings.cookiename)) ); 232 | 233 | }else if( settings.loadtheme.length ){ 234 | updateTheme( findTheme(settings.loadtheme) ); 235 | 236 | }else{ 237 | switcherTitle.text(settings.initialtext); 238 | } 239 | 240 | var switcherListHldr = $("
") 241 | .addClass("jquery-ui-switcher-list-hldr") 242 | .css({ 243 | "width": eval(settings.width+8)+"px", 244 | "background": "#000", 245 | "color": "#FFF", 246 | "font-family": "'Trebuchet MS', Verdana, sans-serif", 247 | "font-size": "12px", 248 | "border": "1px solid #CCC", 249 | "border-top": "none", 250 | "z-index": "999999", 251 | "position": "absolute", 252 | "top": eval(settings.buttonheight+3)+"px", 253 | "left": "0px", 254 | "padding": "3px 3px 3px 0", 255 | "display": "none" 256 | }) 257 | .bind({ 258 | mouseleave: function(){ 259 | closeSwitcher(); 260 | } 261 | }); 262 | 263 | if( settings.rounded ){ 264 | switcherListHldr.css("border-radius","0 0 6px 6px"); 265 | switcherListHldr.css("-moz-border-radius","0 0 6px 6px"); 266 | switcherListHldr.css("-webkit-border-radius","0 0 6px 6px"); 267 | } 268 | 269 | var switcherList = $("
    ") 270 | .css({ 271 | "list-style": "none", 272 | "margin": "0", 273 | "padding": "0", 274 | "overflow-y": "auto", 275 | "overflow-x": "hidden", 276 | "height": settings.height+"px" 277 | }) 278 | .appendTo(switcherListHldr); 279 | 280 | // Iterate over themes and build links 281 | $.each(themes, function(k,v){ 282 | var listItem = $("
  • ") 283 | .css("height","90px") 284 | .css("list-style","none") 285 | .appendTo(switcherList); 286 | 287 | var listLink = $("") 288 | .css({ 289 | "display": "block", 290 | "padding": "5px 3px 5px 5px", 291 | "text-decoration": "none", 292 | "float": "left", 293 | "width": "100%", 294 | "clear": "left" 295 | }) 296 | .bind({ 297 | mouseenter: function(){ 298 | listLink.css("background","url("+settings.imgpath+"menuhoverbg.png) repeat-x 50% 50%"); 299 | }, 300 | mouseleave: function(){ 301 | listLink.css("background","none"); 302 | }, 303 | click: function(e){ 304 | updateTheme($(this).data()); 305 | e.preventDefault(); 306 | } 307 | }) 308 | .attr("href","#") 309 | .data(v) 310 | .appendTo(listItem); 311 | 312 | var linkImg = $("") 313 | .attr("src", settings.imgpath + v.icon) 314 | .attr("title",v.title) 315 | .css({ 316 | "float": "left", 317 | "margin-right": "5px", 318 | "border": "1px solid #333" 319 | }) 320 | .appendTo(listLink); 321 | 322 | var linkText = $("") 323 | .css({ 324 | "float": "left", 325 | "padding-top": "5px", 326 | "color": "#AAA" 327 | }) 328 | .text(v.title) 329 | .appendTo(listLink); 330 | }); 331 | 332 | function updateTheme(data){ 333 | if( settings.onselect !== null ) 334 | settings.onselect(); 335 | 336 | switcherTitle.text(settings.buttonpretext +" "+ data.title); 337 | 338 | var style = $("") 339 | .attr("type","text/css") 340 | .attr("rel","stylesheet"); 341 | 342 | ( data.url )? style.attr("href",data.url) : style.attr("href","http://ajax.googleapis.com/ajax/libs/jqueryui/"+settings.jqueryuiversion+"/themes/"+data.name+"/jquery-ui.css"); 343 | style.appendTo("head"); 344 | 345 | $.cookie(settings.cookiename, data.name); 346 | switcherDiv.find(".jquery-ui-switcher-title").text(settings.buttonpretext + " " + data.title); 347 | 348 | if( settings.closeonselect ) 349 | closeSwitcher(); 350 | } 351 | 352 | // Finds a theme[] based on a valid name or title 353 | function findTheme(theme){ 354 | var result = null; 355 | $.each(themes, function(k,v){ 356 | if( v.name.toLowerCase() === theme.toLowerCase() || v.title.toLowerCase() === theme.toLowerCase() ){ 357 | result = v; 358 | return false; 359 | } 360 | }); 361 | 362 | if( !result ){ 363 | return themes[0]; 364 | } 365 | return result; 366 | } 367 | 368 | function openSwitcher(){ 369 | if( settings.onopen !== null ) 370 | settings.onopen(); 371 | 372 | switcherDiv.find(".jquery-ui-switcher-link").css({ 373 | "color": "#AAA", 374 | "background": "#000" 375 | }); 376 | switcherDiv.find(".jquery-ui-switcher-list-hldr").slideDown("fast"); 377 | } 378 | 379 | function closeSwitcher(){ 380 | if( settings.onclose !== null ) 381 | settings.onclose(); 382 | 383 | switcherDiv.find(".jquery-ui-switcher-list-hldr").slideUp("fast", function(){ 384 | switcherDiv.find(".jquery-ui-switcher-link").css({ 385 | "color":"#666", 386 | "background": "#eee url("+settings.imgpath+"buttonbg.png) repeat-x 50% 50%" 387 | }); 388 | }); 389 | } 390 | 391 | 392 | this.css("position","relative"); 393 | this.append(switcherLink); 394 | this.append(switcherListHldr); 395 | 396 | return this; 397 | } 398 | 399 | })( jQuery ); 400 | 401 | /** 402 | * Cookie plugin 403 | * 404 | * Copyright (c) 2006 Klaus Hartl (stilbuero.de) 405 | * Dual licensed under the MIT and GPL licenses: 406 | * http://www.opensource.org/licenses/mit-license.php 407 | * http://www.gnu.org/licenses/gpl.html 408 | * 409 | */ 410 | jQuery.cookie = function (key, value, options) { 411 | 412 | // key and at least value given, set cookie... 413 | if (arguments.length > 1 && String(value) !== "[object Object]") { 414 | options = jQuery.extend({}, options); 415 | 416 | if (value === null || value === undefined) { 417 | options.expires = -1; 418 | } 419 | 420 | if (typeof options.expires === 'number') { 421 | var days = options.expires, t = options.expires = new Date(); 422 | t.setDate(t.getDate() + days); 423 | } 424 | 425 | value = String(value); 426 | 427 | return (document.cookie = [ 428 | encodeURIComponent(key), '=', 429 | options.raw ? value : encodeURIComponent(value), 430 | options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE 431 | options.path ? '; path=' + options.path : '', 432 | options.domain ? '; domain=' + options.domain : '', 433 | options.secure ? '; secure' : '' 434 | ].join('')); 435 | } 436 | 437 | // key and possibly options given, get cookie... 438 | options = value || {}; 439 | var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; 440 | return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; 441 | }; -------------------------------------------------------------------------------- /docs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Tagit Demo Page (HTML) 6 | 7 | 8 | 9 | 10 | 11 | 30 | 31 | 32 | 33 | Fork me on GitHub 35 | 36 | 37 |
    38 |

    jQuery Tagit Documentation Page

    39 | 40 |
    41 | The jQuery Tagit plugin transforms an html unordered list into a unique tagging plugin.
    42 | Why unique? Because jQuery Tagit uses jQuery Ui's auto-complete plugin to supply suggestions to users 43 | as they type. 44 |
    45 | 46 |

    Browser Support

    47 | 48 |
    49 |
    50 | 51 |
    Works in Google Chrome!
    52 |     53 |
    54 |
    55 | 56 |
    Works in Firefox!
    57 |     58 |
    59 |
    60 | 61 |
    Works in IE7+!
    62 |     63 |
    64 |
    65 | 66 |
    Works in Opera!
    67 |     68 |
    69 |
    70 | 71 |
    Works in Safari!
    72 |     73 |
    74 |
    75 |
    76 | 77 |

    Features

    78 | 79 |
    80 |
      81 |
    • Convenient way for users to enter a list of items
      • 82 |
    • Fully integrated with jQuery ui auto complete
      • 83 |
    • Automatically adds current input as tag if input loses focus
      • 84 |
    • Easy to use public methods
      • 85 |
    • Easy to theme (See the css folder)
      • 86 |
    • Customizable accept keys
      • 87 |
    • Backspace on empty input deletes previous tag
      • 88 |
    • Ability to provide initial tags on creation through options
      • 89 |
    • Ability to provide initial tags on creation via list items
      • 90 |
    • Option to toggle usage of a hidden select so the tags can be sent using a normal form!
      • 91 |
    • Ability to re-arrange tags by drag and drop!
      • 92 |
    • Optional ThemeRoller compatibility!
      • 93 |
    • Fully HTML5 Data attribute compliant!
      • 94 |
    95 |
    96 | 97 |

    The Minimum Code Required

    98 | 99 |
    100 | $('#tags').tagit(); 101 |
    102 | 103 |

    Options

    104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 225 | 226 | 227 |
    NameTypeDefaultNote
    tagSourceString, Array, Callback[]This option maps directly to the jQuery 120 | UI Autocomplete source option
    triggerKeysArray['enter', 'space', 'comma', 'tab']An array containing all or any of the default options.
    128 | These are the keys that will trigger a tag completion 129 |
    allowNewTagsBooltrueAllow tags that do not exist in tagSource to be entered?
    initialTagsArray[]An array containing tags to pre-populate the field with
    minLengthInt1The minimum length before a triggerKey will create a tag
    selectBoolfalseMaintain a hidden select in place for form submissions
    158 | To name the select simply give your UL a name attribute! 159 |
    160 | Don't forget 161 | to include [ and ] if your language (e.g. PHP) requires them! 162 |
    tagsChangedCallbackfunction(tagValue, action, element)Callback on changed tags:
    170 | tagValue: string
    171 | action: string - either 'added', 'popped', 'moved' or 'reset'
    172 | element: object - reference to the added LI element 173 |
    caseSensitiveBoolfalse 181 | The check for existing tags is case sensitive. If false the words "Foo" and "foo" considered the same 182 |
    highlightOnExistColorString#0F0 190 | If the user tries to add a tag, that already exists, the existing tag will run a highlight effect using 191 | the defined background color. 192 | If null, the highlight effect is turned off. 193 |
    maxLengthIntunlimited 201 | The maximum allowable length of a tag.
    202 | If omitted, tags of unlimited length are allowed. 203 |
    maxTagsIntunlimited 211 | The maximum number of tags that the user can enter.
    212 | If omitted, an unlimited number of tags are allowed. 213 |
    sortableBool, Stringfalse 221 | Allows the user to re-order the tags using drag and drop.
    222 | If true the whole tag is draggable, if 'handle' a handle is
    223 | rendered and the tag is only draggable using the handle. 224 |
    228 | 229 |

    Methods

    230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 |
    NameReturnNote
    .tagit("destroy")nullReturns the ul to its original state
    .tagit("tags")ArrayReturns an array of objects about all the tags.
    .tagit("reset")nullResets the tags list to the initial value
    .tagit("fill", [{label: 'tag', value: 12}, {label: 'stuff', value: 13}])nullEmpties the tags and fills the plugin with the provided tags.
    .tagit("add", {label: 'tag', value: 12})BoolAdds a tag to the plugin.
    272 | 273 |

    274 | 275 |
    276 | © Content and Design Matthew Hailwood 2012
    277 |
    278 | 279 |
    280 | 281 | 282 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Tagit Demo Page (HTML) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 105 | 106 | 107 | 108 | Fork me on GitHub 110 | 111 | 112 |
    113 | 122 |

    jQuery Tagit Demo Page

    123 | 124 |
    View the documentation!
    125 | 126 |

    Demos

    127 | 128 |

    Hidden Select

    129 | 130 |
    131 |
    132 | Normally the select is hidden, however we have shown it for this demo so you can see 133 | how it operates! 134 |
    135 |
      136 |
      137 | 138 |
      139 |
      140 | 141 |

      Initial Tags

      142 | 143 |
      144 |
      145 | You can manually specify tags in your markup by adding list items to the unordered list! 146 |
      147 | 148 |
        149 |
      • here
        • 150 |
      • are
        • 151 |
      • some
        • 152 | 153 |
      • initial
        • 154 |
      • tags
        • 155 |
      156 |
      157 | 158 | 159 |
      160 |
      161 | 162 |

      Allowing Spaces

      163 | 164 |
      165 |
      166 | By overriding the trigger keys you can have spaces, comma's and any other character in your tags! 167 |
      168 | 169 |
        170 |
        171 | 172 |
        173 |
        174 | 175 |

        Callback

        176 | 177 |
        178 |
        179 | By passing a function in for tagsChanged you can preform your own events too! 180 |
        181 | 182 |
          183 |
          184 | 185 |
          186 |

          Action: 187 | 188 |

          none
          189 |

          190 |

          191 | 192 |

          Limits

          193 | 194 |
          195 |
          196 | You can limit both the maximum and minimum amount of, and characters per tag! 197 |
          198 | 199 |
            200 |
            201 | 202 |
            203 |

            Maximum of 5 tags and 5 characters per tag.

            204 |
            205 | 206 |

            Sortable : true

            207 | 208 |
            209 |
            210 | You can allow the tags to be sortable by dragging the entire tag! 211 |
            212 | 213 |
              214 |
            • here
              • 215 |
            • are
              • 216 |
            • some
              • 217 |
            • initial
              • 218 |
            • tags
              • 219 |
            220 |
            221 | 222 |
            223 |
            224 | 225 |

            Sortable : handle

            226 | 227 |
            228 |
            229 | Or only draggable by a handle! 230 |
            231 | 232 |
              233 |
            • here
              • 234 |
            • are
              • 235 |
            • some
              • 236 |
            • initial
              • 237 |
            • tags
              • 238 |
            239 |
            240 | 241 |
            242 |
            243 | 244 |

            Editable

            245 | 246 |
            247 |
            248 | Click on a tag to edit it! 249 |
            250 | 251 |
              252 |
            • here
              • 253 |
            • are
              • 254 |
            • some
              • 255 |
            • initial
              • 256 |
            • tags
              • 257 |
            258 |
            259 | 260 |
            261 |
            262 | 263 |

            Custom Autocomplete

            264 | 265 |
            266 |
            267 | You can hack into the autocomplete dropdown to display custom data! 268 |
            269 | 270 |
            271 | While this demo could be done using either the themeroller or normal version 272 | for simplicities sake we have only created this particular demo using themeroller. 274 |
            275 | Please Click here to view this demo! 276 |
            277 |
            278 | 279 | 280 |

            281 | 282 |
            283 | © Content and Design Matthew Hailwood 2012
            284 |
            285 | 286 |
            287 | 288 | 289 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | '; 8 | } 9 | 10 | function js($link) 11 | { 12 | return ''; 13 | } 14 | 15 | function getTags($id) 16 | { 17 | return '$("#demo' . $id . 'GetTags").click(function () { showTags($("#demo' . $id . '").tagit("tags")) });'; 18 | } 19 | 20 | ?> 21 | 22 | 23 | 24 | 25 | 26 | jQuery Tagit Demo Page (PHP<?php echo isset($themeroller) ? '/ThemeRoller' : ''; ?>) 27 | 45 | 310 | 311 | 312 | 313 | Fork me on GitHub 315 | 316 | 317 |
            318 |
            319 | 322 | 329 | 334 |
            335 | 336 |
            337 |

            jQuery Tagit Demo Page

            338 | 339 |
            View the documentation!
            340 | 341 |

            Demos

            342 | 345 |
            Theme: 346 | Simple Green | 347 | Simple Blue | 348 | Simple Grey | 349 | Stylish Yellow | 350 | Dark Grey | 351 | Awesome Orange | 352 | Awesome Blue | 353 |
            354 | 355 | 356 |

            Hidden Select

            357 | 358 |
            359 |
            360 | Normally the select is hidden, however we have shown it for this demo so you can see 361 | how it operates! 362 |
            363 |
              364 |
              365 | 366 |
              367 |
              368 | 369 |

              Initial Tags

              370 | 371 |
              372 |
              373 | You can manually specify tags in your markup by adding list items to the unordered list! 374 |
              375 | 376 |
                377 |
              • here
                • 378 |
              • are
                • 379 |
              • some
                • 380 |
              • initial
                • 381 |
              • tags
                • 382 |
              383 |
              384 | 385 | 386 |
              387 |
              388 | 389 |

              Allowing Spaces

              390 | 391 |
              392 |
              393 | By overriding the trigger keys you can have spaces, comma's and any other character in your tags! 394 |
              395 | 396 |
                397 |
                398 | 399 |
                400 |
                401 | 402 |

                Callback

                403 | 404 |
                405 |
                406 | By passing a function in for tagsChanged you can preform your own events too! 407 |
                408 | 409 |
                  410 |
                  411 | 412 |
                  413 |

                  Action: 414 | 415 |

                  none
                  416 |

                  417 |

                  418 | 419 |

                  Limits

                  420 | 421 |
                  422 |
                  423 | You can limit both the maximum and minimum amount of, and characters per tag! 424 |
                  425 | 426 |
                    427 |
                    428 | 429 |
                    430 |

                    Maximum of 5 tags and 5 characters per tag.

                    431 |
                    432 | 433 |

                    Sortable : true

                    434 | 435 |
                    436 |
                    437 | You can allow the tags to be sortable by dragging the entire tag! 438 |
                    439 | 440 |
                      441 |
                    • here
                      • 442 |
                    • are
                      • 443 |
                    • some
                      • 444 |
                    • initial
                      • 445 |
                    • tags
                      • 446 |
                    447 |
                    448 | 449 |
                    450 |
                    451 | 452 |

                    Sortable : handle

                    453 | 454 |
                    455 |
                    456 | Or only draggable by a handle! 457 |
                    458 | 459 |
                      460 |
                    • here
                      • 461 |
                    • are
                      • 462 |
                    • some
                      • 463 |
                    • initial
                      • 464 |
                    • tags
                      • 465 |
                    466 |
                    467 | 468 |
                    469 |
                    470 | 471 |

                    Custom Autocomplete

                    472 | 473 |
                    474 |
                    475 | You can hack into the autocomplete dropdown to display custom data! 476 |
                    477 | 480 |
                      481 |
                      482 | 483 |
                      484 | 489 |
                      490 | While this demo could be done using either the themeroller or normal version 491 | for simplicities sake we have only created this particular demo using themeroller. 493 |
                      494 | Please Click here to view this demo! 495 |
                      496 | 497 |
                      498 | 499 | 500 |

                      501 | 502 |
                      503 | © Content and Design Matthew Hailwood
                      504 |
                      505 | 506 |
                      507 | 508 | 509 | -------------------------------------------------------------------------------- /index.themeroller.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Tagit Demo Page (HTML/ThemeRoller) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 299 | 300 | 301 | 302 | Fork me on GitHub 304 | 305 |
                      306 |
                      307 |
                      308 |
                      309 |

                      jQuery Tagit Demo Page

                      310 | 311 |
                      View the documentation!
                      312 | 313 |

                      Demos

                      314 | 315 |

                      Hidden Select

                      316 | 317 |
                      318 |
                      319 | Normally the select is hidden, however we have shown it for this demo so you can see 320 | how it operates! 321 |
                      322 |
                        323 |
                        324 | 325 |
                        326 |
                        327 | 328 |

                        Initial Tags

                        329 | 330 |
                        331 |
                        332 | You can manually specify tags in your markup by adding list items to the unordered list! 333 |
                        334 | 335 |
                          336 |
                        • here
                          • 337 |
                        • are
                          • 338 |
                        • some
                          • 339 | 340 |
                        • initial
                          • 341 |
                        • tags
                          • 342 |
                        343 |
                        344 | 345 | 346 |
                        347 |
                        348 | 349 |

                        Allowing Spaces

                        350 | 351 |
                        352 |
                        353 | By overriding the trigger keys you can have spaces, comma's and any other character in your tags! 354 |
                        355 | 356 |
                          357 |
                          358 | 359 |
                          360 |
                          361 | 362 |

                          Callback

                          363 | 364 |
                          365 |
                          366 | By passing a function in for tagsChanged you can preform your own events too! 367 |
                          368 | 369 |
                            370 |
                            371 | 372 |
                            373 |

                            Action: 374 | 375 |

                            none
                            376 |

                            377 |

                            378 | 379 |

                            Limits

                            380 | 381 |
                            382 |
                            383 | You can limit both the maximum and minimum amount of, and characters per tag! 384 |
                            385 | 386 |
                              387 |
                              388 | 389 |
                              390 |

                              Maximum of 5 tags and 5 characters per tag.

                              391 |
                              392 | 393 |

                              Sortable : true

                              394 | 395 |
                              396 |
                              397 | You can allow the tags to be sortable by dragging the entire tag! 398 |
                              399 | 400 |
                                401 |
                              • here
                                • 402 |
                              • are
                                • 403 |
                              • some
                                • 404 |
                              • initial
                                • 405 |
                              • tags
                                • 406 |
                              407 |
                              408 | 409 |
                              410 |
                              411 | 412 |

                              Sortable : handle

                              413 | 414 |
                              415 |
                              416 | Or only draggable by a handle! 417 |
                              418 | 419 |
                                420 |
                              • here
                                • 421 |
                              • are
                                • 422 |
                              • some
                                • 423 |
                              • initial
                                • 424 |
                              • tags
                                • 425 |
                              426 |
                              427 | 428 |
                              429 |
                              430 | 431 |

                              Custom Autocomplete

                              432 | 433 |
                              434 |
                              435 | You can hack into the autocomplete dropdown to display custom data! 436 |
                              437 |
                                438 |
                                439 | 440 |
                                441 |
                                442 | 443 |

                                Editable

                                444 | 445 |
                                446 |
                                447 | Click on a tag to edit it! 448 |
                                449 | 450 |
                                  451 |
                                • here
                                  • 452 |
                                • are
                                  • 453 |
                                • some
                                  • 454 |
                                • initial
                                  • 455 |
                                • tags
                                  • 456 |
                                457 |
                                458 | 459 |
                                460 |
                                461 | 462 |

                                463 | 464 |
                                465 | © Content and Design Matthew Hailwood 2012
                                466 |
                                467 | 468 |
                                469 | 470 | 471 | -------------------------------------------------------------------------------- /js/tagit-themeroller.js: -------------------------------------------------------------------------------- 1 | /*globals jQuery*/ 2 | /*jslint vars:true*/ 3 | /* 4 | * INFORMATION 5 | * --------------------------- 6 | * Owner: jquery.webspirited.com 7 | * Developer: Matthew Hailwood 8 | * --------------------------- 9 | */ 10 | 11 | (function ($) {'use strict'; 12 | 13 | $.fn.autoGrowInput = function (o) { 14 | 15 | o = $.extend({ 16 | maxWidth: 1000, 17 | minWidth: 0, 18 | comfortZone: 70 19 | }, o); 20 | 21 | this.filter('input:text').each(function () { 22 | var minWidth = o.minWidth || $(this).width(), 23 | val = '', 24 | input = $(this), 25 | testSubject = $('').css({ 26 | position: 'absolute', 27 | top: -9999, 28 | left: -9999, 29 | width: 'auto', 30 | fontSize: input.css('fontSize'), 31 | fontFamily: input.css('fontFamily'), 32 | fontWeight: input.css('fontWeight'), 33 | letterSpacing: input.css('letterSpacing'), 34 | whiteSpace: 'nowrap' 35 | }), 36 | check = function () { 37 | 38 | if (val === (val = input.val())) {return;} 39 | 40 | // Enter new content into testSubject 41 | var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(//g, '>'); 42 | testSubject.html(escaped); 43 | 44 | // Calculate new width + whether to change 45 | var testerWidth = testSubject.width(), 46 | newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth, 47 | currentWidth = input.width(), 48 | isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth) 49 | || (newWidth > minWidth && newWidth < o.maxWidth); 50 | 51 | // Animate width 52 | if (isValidWidthChange) { 53 | //input.width(newWidth); 54 | //input.css('cssText', "width: " + newWidth + "px !important"); 55 | var styles = input.attr('style'); 56 | input.css('cssText', "width: " + newWidth + "px !important;"+styles); 57 | } 58 | 59 | }; 60 | 61 | testSubject.insertAfter(input); 62 | 63 | $(this).bind('keyup keydown blur update', check); 64 | 65 | }); 66 | 67 | return this; 68 | 69 | }; 70 | 71 | }(jQuery)); 72 | 73 | (function ($) { 'use strict'; 74 | $.widget( "custom.catcomplete", $.ui.autocomplete, { 75 | _renderMenu: function (ul, items) { 76 | var that = this, 77 | currentCategory = ""; 78 | $.each(items, function (index, item) { 79 | if (item.category && item.category !== currentCategory) { 80 | ul.append( "
                              • " + item.category + "
                                • " ); 81 | currentCategory = item.category; 82 | } 83 | that._renderItem( ul, item ).data( "ui-autocomplete-item", item); 84 | }); 85 | } 86 | }); 87 | $.widget("ui.tagit", { 88 | 89 | // default options 90 | options: { 91 | //Maps directly to the jQuery-ui Autocomplete option 92 | tagSource: [], 93 | //What keys should trigger the completion of a tag 94 | triggerKeys: ['enter', 'space', 'comma', 'tab','semicolon'], 95 | //custom regex for splitting data 96 | seperatorKeys: ['comma','semicolon'], 97 | //array method for setting initial tags 98 | initialTags: [], 99 | defaultType: 'none', //default type for newly added tags 100 | //minimum length of tags 101 | minLength: 1, 102 | //minimum length of typed text before triggering jQuery-ui Autocomplete 103 | autocompleteMinLength: 1, 104 | //should an html select be rendered to allow for normal form submission 105 | select: false, 106 | //if false only tags from `tagSource` are able to be entered 107 | allowNewTags: true, 108 | //should tag and Tag be treated as identical 109 | caseSensitive: false, 110 | //should tags be drag-and-drop sortable? 111 | //true: entire tag is draggable 112 | //'handle': a handle is rendered which is draggable 113 | sortable: false, 114 | editable: false, 115 | //color to highlight text when a duplicate tag is entered 116 | highlightOnExistColor: '#0F0', 117 | // The place holder to be shown in the 118 | // tagit field. 119 | placeholder: 'Enter tags...', 120 | // The input width of the text field, If the placeholder is 121 | // too long or too short this value can be adjusted to fit it in. 122 | inputWidth: 150, 123 | //empty search on focus 124 | //empty search on focus 125 | emptySearch: true, 126 | //callback function for when tags are changed 127 | //tagValue: value of tag that was changed 128 | //action e.g. removed, added, sorted 129 | tagsChanged: function (/*tagValue, action, element*/) { 130 | 131 | }, 132 | maxTags: undefined, 133 | //should 'paste' event trigger 'blur', thus potentially adding a new tag 134 | // (true for backwards compatibility) 135 | blurOnPaste: true, 136 | //Add functionality to allow duplicates 137 | //False uses normal behavior 138 | //True allows Duplicate Tags to be used 139 | allowDuplicates: false 140 | }, 141 | 142 | _splitAt: /\ |,/g, 143 | _existingAtIndex: 0, 144 | _keys: { 145 | backspace: [8], 146 | enter: [13], 147 | space: [32], 148 | comma: [44, 188], 149 | tab: [9], 150 | semicolon: [59,186] 151 | }, 152 | 153 | _sortable: { 154 | sorting: -1 155 | }, 156 | 157 | _idEditing: false, 158 | 159 | //initialization function 160 | _create: function () { 161 | 162 | var self = this; 163 | this.tagsArray = []; 164 | this.timer = null; 165 | //add class "tagit" for theming 166 | this.element.addClass("tagit ui-widget ui-widget-content"); 167 | 168 | //add any initial tags added through html to the array 169 | this.element.children('li').each(function () { 170 | var tag = $(this); 171 | var tagValue = tag.attr('tagValue') || $(this).data('value'); 172 | self.options.initialTags.push({label: tag.text(), value: (tagValue || tag.text())}); 173 | }); 174 | 175 | var regexes = []; 176 | var pushRegex = function (key, regex) { 177 | if ($.inArray(key, self.options.seperatorKeys) !== -1) { 178 | regexes.push(regex); 179 | } 180 | }; 181 | //setup split according to the trigger keys 182 | self._splitAt = null; 183 | 184 | pushRegex('space', /\ /); 185 | pushRegex('semicolon', /;/); 186 | pushRegex('comma', /,/); 187 | 188 | var regexString = $.map(regexes,function (x) { 189 | return x.source; 190 | }).join('|'); 191 | 192 | self._splitAt = new RegExp(regexString,"g"); 193 | 194 | //add the html input 195 | this.element.html('
                                • '); 196 | 197 | this.input = this.element.find(".tagit-input"); 198 | this.input.autoGrowInput(); 199 | //setup click handler 200 | $(this.element).click(function (e) { 201 | if ($(e.target).hasClass('tagit-close')) { 202 | // Removes a tag when the little 'x' is clicked. 203 | var parent = $(e.target).parent(); 204 | 205 | var tag = self.tagsArray[parent.index()]; 206 | 207 | tag.element.remove(); 208 | self._popTag(tag); 209 | } 210 | else { 211 | if (!self._isEditing) { //focus default input if we're not editing existing tag at the moment 212 | self.input.focus(); 213 | } 214 | if (self.options.emptySearch && $(e.target).hasClass('tagit-input') && self.input.val() === '' && self.input.catcomplete != undefined) { 215 | self.input.catcomplete('search'); 216 | } 217 | if (self.options.editable && $(e.target).hasClass('tagit-label')) { 218 | self._edit(e.target); 219 | } 220 | } 221 | }); 222 | 223 | //setup autocomplete handler 224 | var os = this.options.select; 225 | var ml = this.options.minLength; 226 | this.options.appendTo = this.element; 227 | this.options.source = this.options.tagSource; 228 | this.options.select = function (event, ui) { 229 | self.input.data('autoCompleteTag', true); 230 | clearTimeout(self.timer); 231 | if (self.options.maxTags !== undefined && self.tagsArray.length === self.options.maxTags) { 232 | self.input.val(""); 233 | } 234 | else { 235 | if (ui.item.label === undefined) { 236 | self._addTag({ label: ui.item.value}); 237 | } 238 | else { 239 | self._addTag({ label: ui.item.label, value: ui.item.value, type: ui.item.category}); 240 | } 241 | } 242 | 243 | return false; 244 | }; 245 | 246 | this.options.focus = function (event, ui) { 247 | if (ui.item.label !== undefined && /^key/.test(event.originalEvent.type)) { 248 | self.input.val(ui.item.label); 249 | self.input.data('value', ui.item.value); 250 | return false; 251 | } 252 | }; 253 | this.options.autoFocus = !this.options.allowNewTags; 254 | this.options.minLength = this.options.autocompleteMinLength; 255 | this.input.catcomplete(this.options); 256 | this.options.minLength = ml; 257 | this.options.select = os; 258 | 259 | self.isKeyEventProcessed = false; 260 | this.input.keyup(function (/*e*/) { 261 | self.isKeyEventProcessed = false; 262 | }); 263 | 264 | this.input.keydown(function (e) { 265 | self._processKeyEvent(e); 266 | }); 267 | //setup keydown handler 268 | this.input.keypress(function (e) { 269 | self._processKeyEvent(e); 270 | }); 271 | 272 | this.input.bind("paste", function (/*e*/) { 273 | if (self.options.blurOnPaste) { 274 | var input = $(this); 275 | self.timer = setTimeout(function () { input.blur(); }, 0); 276 | } 277 | }); 278 | 279 | //setup blur handler 280 | this.input.blur(function (/*e*/) { 281 | self.currentLabel = $(this).val(); 282 | self.currentValue = $(this).data('value'); 283 | if (self.options.allowNewTags) { 284 | self.timer = setTimeout(function () { 285 | self._addTag({ label: self.currentLabel, value: self.currentValue, type: self.options.defaultType}); 286 | self.currentValue = ''; 287 | self.currentLabel = ''; 288 | }, 400); 289 | } 290 | $(this).val('').removeData('value'); 291 | return false; 292 | }); 293 | 294 | //define missing trim function for strings 295 | if (!String.prototype.trim) { 296 | String.prototype.trim = function () { 297 | return this.replace(/^\s+|\s+$/g, ''); 298 | }; 299 | } 300 | 301 | if (this.options.select) { 302 | this.select = $(''); 305 | this.element.after(this.select); 306 | } 307 | this._initialTags(); 308 | 309 | //setup sortable handler 310 | if (self.options.sortable !== false) { 311 | 312 | var soptions = { 313 | items: '.tagit-choice', 314 | containment: 'parent', 315 | opacity: 0.6, 316 | tolerance: 'pointer', 317 | start: function (event, ui) { 318 | self._sortable.tag = $(ui.item); 319 | self._sortable.origIndex = self._sortable.tag.index(); 320 | }, 321 | update: function (event/*, ui*/) { 322 | self._sortable.newIndex = self._sortable.tag.index(); 323 | self._moveTag(self._sortable.origIndex, self._sortable.newIndex); 324 | if (self.options.tagsChanged) { 325 | var tag = self.tagsArray[self._sortable.newIndex]; 326 | self.options.tagsChanged(tag.value, 'moved', tag.element); 327 | } 328 | } 329 | }; 330 | 331 | if (self.options.sortable === 'handle') { 332 | soptions.handle = 'a.ui-icon'; 333 | soptions.cursor = 'move'; 334 | } 335 | 336 | self.element.sortable(soptions); 337 | } 338 | 339 | }, 340 | 341 | _processKeyEvent: function (e) { 342 | if (this.isKeyEventProcessed) { 343 | return; //don't process key events twice 344 | } 345 | 346 | var pressedKey = e.which || e.keyCode || e.charCode; 347 | var lastLi = this.element.children(".tagit-choice:last"); 348 | 349 | this.isKeyEventProcessed = true; 350 | 351 | if (pressedKey === this._keys.backspace[0]) { 352 | return this._backspace(lastLi); 353 | } 354 | 355 | if (this._isInitKey(pressedKey) && !(this._isTabKey(pressedKey) && this.value === '' && !this.input.data('autoCompleteTag'))) { 356 | e.preventDefault(); 357 | 358 | this.input.data('autoCompleteTag', false); 359 | 360 | if (!this.options.allowNewTags || (this.options.maxTags !== undefined && this.tagsArray.length === this.options.maxTags)) { 361 | this.input.val(""); 362 | } 363 | else if (this.options.allowNewTags && this.input.val().length >= this.options.minLength) { 364 | this._addTag({ label: this.input.val(), type: this.options.defaultType}); 365 | } 366 | } 367 | 368 | if (this.options.maxLength !== undefined && this.input.val().length > this.options.maxLength) { 369 | e.preventDefault(); 370 | this.input.val(this.input.val().substring(0, this.options.maxLength)); 371 | } 372 | 373 | if (lastLi.hasClass('selected')) { 374 | lastLi.removeClass('selected'); 375 | } 376 | 377 | this.lastKey = pressedKey; 378 | }, 379 | 380 | _postEdit: function (element, editInput, initialValue) { 381 | var finishEditing = $.proxy(function () { 382 | editInput.remove(); 383 | $(element).removeClass('hidden'); 384 | $(element).parent().removeClass('edited'); 385 | this._isEditing = false; 386 | }, this); 387 | 388 | return function () { 389 | var initialTagIndex = $(element).parent().index(); 390 | var initialTag = this.tagsArray[initialTagIndex]; 391 | //try to add new and if success - remove old 392 | var newValue = editInput.val(); 393 | if (this._splitAt && newValue.search(this._splitAt) > 0) { 394 | newValue = newValue.split(this._splitAt)[0]; //use only first value part - no splitters in edit 395 | } 396 | if (newValue === initialValue) { 397 | finishEditing(); 398 | } else if (this._addTag({ label: newValue})) { 399 | //else attempt to add new tag and if succeeded - remove old element and edit box 400 | initialTag.element.remove(); 401 | this._popTag(initialTag); 402 | var lastTagIndex = this.tagsArray.length - 1; 403 | if (lastTagIndex !== initialTagIndex) { 404 | var lastTag = this.tagsArray[lastTagIndex]; 405 | //visually move tag to the old place 406 | lastTag.element.insertBefore(this.tagsArray[initialTagIndex].element); 407 | this._moveTag(this.tagsArray.length - 1, initialTagIndex); //move element from last to old place 408 | if (this.options.tagsChanged) { //fire an update 409 | var tag = this.tagsArray[initialTagIndex]; 410 | this.options.tagsChanged(tag.value, 'moved', tag.element); 411 | } 412 | } 413 | finishEditing(); 414 | } 415 | }; 416 | }, 417 | 418 | _edit: function (element) { 419 | this._isEditing = true; 420 | var initialValue = $(element).text(); 421 | var editInput = $(''); 422 | editInput.val(initialValue); 423 | $(element).parent().addClass('edited'); 424 | editInput.addClass('tagit-edit'); 425 | editInput.css('width', $(element).outerWidth()); 426 | $(element).addClass('hidden'); 427 | editInput.blur($.proxy(this._postEdit(element, editInput, initialValue), this)); 428 | editInput.keypress($.proxy(function (e) { 429 | var pressedKey = e.which || e.keyCode || e.charCode; 430 | if (this._isInitKey(pressedKey)) { 431 | editInput.blur(); 432 | } 433 | }, this)); 434 | $(element).before(editInput); 435 | editInput[0].select(); 436 | }, 437 | 438 | _popSelect: function (tag) { 439 | $('option:eq(' + tag.index + ')', this.select).remove(); 440 | this.select.change(); 441 | }, 442 | 443 | _addSelect: function (tag) { 444 | this.select.append(''); 445 | this.select.change(); 446 | }, 447 | 448 | _popTag: function (tag) { 449 | 450 | //are we removing the last tag or a specific tag? 451 | if (tag === undefined) { 452 | tag = this.tagsArray.pop(); 453 | } 454 | else { 455 | this.tagsArray.splice(tag.index, 1); 456 | } 457 | 458 | 459 | //maintain the indexes 460 | var ind; 461 | for (ind = 0; ind < this.tagsArray.length; ind++) { 462 | this.tagsArray[ind].index = ind; 463 | } 464 | 465 | if (this.options.select) { 466 | this._popSelect(tag); 467 | } 468 | if (this.options.tagsChanged) { 469 | this.options.tagsChanged(tag? (tag.value || tag.label) : null, 'popped', tag); 470 | } 471 | return; 472 | }, 473 | 474 | _addTag: function (newTag) { 475 | if (newTag.label === undefined) { //set label to value to simplify possible use-cases, eg. if we send data from server where title isn't set 476 | newTag.label = newTag.value; 477 | } 478 | if(newTag.label === parseInt(newTag.label, 10)){ 479 | newTag.label=newTag.label.toString(); 480 | } 481 | this.input.catcomplete('close').val(""); 482 | 483 | //are we trying to add a tag that should be split? 484 | if (this._splitAt && newTag.label.search(this._splitAt) > 0) { 485 | var result = newTag.label.split(this._splitAt); 486 | var i; 487 | for (i = 0; i < result.length; i++) { 488 | this._addTag({ label: result[i], value: newTag.value}); 489 | } 490 | return; 491 | } 492 | 493 | newTag.label = newTag.label.replace(/,+$/, "").trim(); 494 | 495 | if (newTag.label === "") { 496 | return false; 497 | } 498 | 499 | //escape < > and & 500 | newTag.label = newTag.label.replace(/&/g, "&").replace(//g, ">"); 501 | 502 | var tagExists = this._exists(newTag.label, newTag.value); 503 | if (tagExists !== false && !this.options.allowDuplicates) { 504 | this._highlightExisting(tagExists); 505 | return false; 506 | } 507 | 508 | var tag = this.tag(newTag.label, newTag.value, newTag.type); 509 | tag.element = $('
                              • ' 512 | + (this.options.sortable === 'handle' ? '' : '') 513 | + '
                                ' + newTag.label + '
                                ' + 'x
                                • '); 514 | tag.element.insertBefore(this.input.parent()); 515 | this.tagsArray.push(tag); 516 | 517 | this.input.val(""); 518 | 519 | if (this.options.select) { 520 | this._addSelect(tag); 521 | } 522 | if (this.options.tagsChanged) { 523 | this.options.tagsChanged(tag.label, 'added', tag.element); 524 | } 525 | return true; 526 | }, 527 | 528 | _exists: function (label, value) { 529 | if (this.tagsArray.length === 0) { 530 | return false; 531 | } 532 | 533 | label = this._lowerIfCaseInsensitive(label); 534 | value = this._lowerIfCaseInsensitive(value); 535 | 536 | var ind; 537 | for (ind = 0; ind < this.tagsArray.length; ind++) { 538 | if (this._lowerIfCaseInsensitive(this.tagsArray[ind].label) === label) { 539 | if (value !== undefined) { 540 | if (this._lowerIfCaseInsensitive(this.tagsArray[ind].value) === value) { 541 | return ind; 542 | } 543 | } else { 544 | return ind; 545 | } 546 | } 547 | } 548 | 549 | return false; 550 | }, 551 | 552 | _highlightExisting: function (index) { 553 | if (this.options.highlightOnExistColor === undefined) { 554 | return; 555 | } 556 | var tag = this.tagsArray[index]; 557 | tag.element.stop(); 558 | 559 | var initialColor = tag.element.css('color'); 560 | tag.element.animate({color: this.options.highlightOnExistColor}, 100).animate({'color': initialColor}, 800, null, function () { 561 | //reset style to initial 562 | tag.element.attr('style', ''); 563 | }); 564 | }, 565 | 566 | _isInitKey: function (keyCode) { 567 | 568 | var keyName = ""; 569 | var key; 570 | for (key in this._keys) { 571 | if (this._keys.hasOwnProperty(key)) { 572 | if ($.inArray(keyCode, this._keys[key]) !== -1) { 573 | keyName = key; 574 | } 575 | } 576 | } 577 | 578 | if ($.inArray(keyName, this.options.triggerKeys) !== -1) { 579 | return true; 580 | } 581 | return false; 582 | }, 583 | 584 | _isTabKey: function (keyCode) { 585 | var tabKeys = this._keys.tab; 586 | return $.inArray(keyCode, tabKeys) > -1; 587 | }, 588 | 589 | _removeTag: function () { 590 | this._popTag(); 591 | this.element.children(".tagit-choice:last").remove(); 592 | }, 593 | 594 | _backspace: function (li) { 595 | if (this.input.val() === "") { 596 | // When backspace is pressed, the last tag is deleted. 597 | if (this.lastKey === this._keys.backspace[0]) { 598 | this._popTag(); 599 | li.remove(); 600 | this.lastKey = null; 601 | } else { 602 | li.removeClass('ui-state-default').addClass('selected ui-state-error'); 603 | this.lastKey = this._keys.backspace[0]; 604 | } 605 | } 606 | return true; 607 | }, 608 | 609 | _initialTags: function () { 610 | var input = this; 611 | var _temp; 612 | if (this.options.tagsChanged) { 613 | _temp = this.options.tagsChanged; 614 | } 615 | this.options.tagsChanged = null; 616 | 617 | if (this.options.initialTags.length !== 0) { 618 | $(this.options.initialTags).each(function (i, element) { 619 | if (typeof element === "object") { 620 | input._addTag({ label: element.label, value: element.value, type: element.type}); 621 | } 622 | else { 623 | input._addTag({ label: element}); 624 | } 625 | }); 626 | } 627 | this.options.tagsChanged = _temp; 628 | this.options.tagsChanged(null, 'tagsInited', null); 629 | }, 630 | 631 | _lowerIfCaseInsensitive: function (inp) { 632 | 633 | if (inp === undefined || typeof inp !== typeof "a") { 634 | return inp; 635 | } 636 | 637 | if (this.options.caseSensitive) { 638 | return inp; 639 | } 640 | 641 | return inp.toLowerCase(); 642 | 643 | }, 644 | 645 | _moveTag: function (old_index, new_index) { 646 | this.tagsArray.splice(new_index, 0, this.tagsArray.splice(old_index, 1)[0]); 647 | var ind; 648 | for (ind = 0; ind < this.tagsArray.length; ind++) { 649 | this.tagsArray[ind].index = ind; 650 | } 651 | 652 | if (this.options.select) { 653 | if (old_index < new_index) { 654 | $('option:eq(' + old_index + ')', this.select).insertAfter($('option:eq(' + new_index + ')', this.select)); 655 | } 656 | else { 657 | $('option:eq(' + old_index + ')', this.select).insertBefore($('option:eq(' + new_index + ')', this.select)); 658 | } 659 | } 660 | }, 661 | tags: function () { 662 | return this.tagsArray; 663 | }, 664 | 665 | destroy: function () { 666 | $.Widget.prototype.destroy.apply(this, arguments); // default destroy 667 | clearTimeout(this.timer); 668 | this.tagsArray = []; 669 | }, 670 | 671 | reset: function () { 672 | this.element.find(".tagit-choice").remove(); 673 | this.tagsArray = []; 674 | if (this.options.select) { 675 | this.select.children().remove(); 676 | this.select.change(); 677 | } 678 | this._initialTags(); 679 | if (this.options.tagsChanged) { 680 | this.options.tagsChanged(null, 'reset', null); 681 | } 682 | }, 683 | 684 | fill: function (tags) { 685 | 686 | if (tags !== undefined) { 687 | this.options.initialTags = tags; 688 | } 689 | this.reset(); 690 | }, 691 | 692 | add: function (label, value) { 693 | if (typeof label === "object") { 694 | return this._addTag({ label: label.label, value: label.value}); 695 | } 696 | return this._addTag({ label: label, value: value}); 697 | }, 698 | 699 | autocomplete: function () { 700 | return this.input.data("autocomplete"); 701 | }, 702 | 703 | tag: function (label, value, type, element) { 704 | var self = this; 705 | return { 706 | label: label, 707 | value: (value === undefined ? label : value), 708 | type: type, 709 | element: element, 710 | index: self.tagsArray.length 711 | }; 712 | }, 713 | 714 | remove: function (label, value) { 715 | if (this.tagsArray.length === 0) { 716 | return false; 717 | } 718 | 719 | label = this._lowerIfCaseInsensitive(label); 720 | value = this._lowerIfCaseInsensitive(value); 721 | 722 | var i; 723 | for (i = 0; i < this.tagsArray.length; i++) { 724 | if (this._lowerIfCaseInsensitive(this.tagsArray[i].value) === value || this._lowerIfCaseInsensitive(this.tagsArray[i].label) === label) { 725 | break; 726 | } 727 | } 728 | 729 | if (i >= 0 && i < this.tagsArray.length) { 730 | var tag = this.tagsArray[i]; 731 | tag.element.remove(); 732 | this._popTag(tag); 733 | return true; 734 | } 735 | return false; 736 | } 737 | 738 | 739 | }); 740 | }(jQuery)); 741 | -------------------------------------------------------------------------------- /js/tagit.js: -------------------------------------------------------------------------------- 1 | /*globals jQuery*/ 2 | /*jslint vars:true*/ 3 | /* 4 | * INFORMATION 5 | * --------------------------- 6 | * Owner: jquery.webspirited.com 7 | * Developer: Matthew Hailwood 8 | * --------------------------- 9 | */ 10 | 11 | (function ($) {'use strict'; 12 | 13 | $.fn.autoGrowInput = function (o) { 14 | 15 | o = $.extend({ 16 | maxWidth: 1000, 17 | minWidth: 0, 18 | comfortZone: 70 19 | }, o); 20 | 21 | this.filter('input:text').each(function () { 22 | var minWidth = o.minWidth || $(this).width(), 23 | val = '', 24 | input = $(this), 25 | testSubject = $('').css({ 26 | position: 'absolute', 27 | top: -9999, 28 | left: -9999, 29 | width: 'auto', 30 | fontSize: input.css('fontSize'), 31 | fontFamily: input.css('fontFamily'), 32 | fontWeight: input.css('fontWeight'), 33 | letterSpacing: input.css('letterSpacing'), 34 | whiteSpace: 'nowrap' 35 | }), 36 | check = function () { 37 | 38 | if (val === (val = input.val())) {return;} 39 | 40 | // Enter new content into testSubject 41 | var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(//g, '>'); 42 | testSubject.html(escaped); 43 | 44 | // Calculate new width + whether to change 45 | var testerWidth = testSubject.width(), 46 | newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth, 47 | currentWidth = input.width(), 48 | isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth) 49 | || (newWidth > minWidth && newWidth < o.maxWidth); 50 | 51 | // Animate width 52 | if (isValidWidthChange) { 53 | //input.width(newWidth); 54 | //input.css('cssText', "width: " + newWidth + "px !important"); 55 | var styles = input.attr('style'); 56 | input.css('cssText', "width: " + newWidth + "px !important;"+styles); 57 | } 58 | 59 | }; 60 | 61 | testSubject.insertAfter(input); 62 | 63 | $(this).bind('keyup keydown blur update', check); 64 | 65 | }); 66 | 67 | return this; 68 | 69 | }; 70 | 71 | }(jQuery)); 72 | (function ($) { 'use strict'; 73 | $.widget("custom.catcomplete", $.ui.autocomplete, { 74 | _renderMenu: function (ul, items) { 75 | var that = this, 76 | currentCategory = ""; 77 | $.each(items, function (index, item) { 78 | if (item.category && item.category !== currentCategory) { 79 | ul.append( "
                              • " + item.category + "
                                • " ); 80 | currentCategory = item.category; 81 | } 82 | that._renderItem( ul, item ).data( "ui-autocomplete-item", item); 83 | }); 84 | } 85 | }); 86 | $.widget("ui.tagit", { 87 | 88 | // default options 89 | options: { 90 | //Maps directly to the jQuery-ui Autocomplete option 91 | tagSource: [], 92 | //What keys should trigger the completion of a tag 93 | triggerKeys: ['enter', 'space', 'comma', 'tab','semicolon'], 94 | //custom regex for splitting data 95 | seperatorKeys: ['comma','semicolon'], 96 | //array method for setting initial tags 97 | initialTags: [], 98 | defaultType: 'none', //default type for newly added tags 99 | //minimum length of tags 100 | minLength: 1, 101 | //minimum length of typed text before triggering jQuery-ui Autocomplete 102 | autocompleteMinLength: 1, 103 | //should an html select be rendered to allow for normal form submission 104 | select: false, 105 | //if false only tags from `tagSource` are able to be entered 106 | allowNewTags: true, 107 | //should tag and Tag be treated as identical 108 | caseSensitive: false, 109 | //should tags be drag-and-drop sortable? 110 | //true: entire tag is draggable 111 | //'handle': a handle is rendered which is draggable 112 | sortable: false, 113 | editable: false, 114 | //color to highlight text when a duplicate tag is entered 115 | highlightOnExistColor: '#0F0', 116 | // The place holder to be shown in the 117 | // tagit field. 118 | placeholder: 'Enter tags...', 119 | // The input width of the text field, If the placeholder is 120 | // too long or too short this value can be adjusted to fit it in. 121 | inputWidth: 150, 122 | //empty search on focus 123 | emptySearch: true, 124 | //callback function for when tags are changed 125 | //tagValue: value of tag that was changed 126 | //action e.g. removed, added, sorted 127 | tagsChanged: function (/*tagValue, action, element*/) { 128 | 129 | }, 130 | maxTags: undefined, 131 | //should 'paste' event trigger 'blur', thus potentially adding a new tag 132 | // (true for backwards compatibility) 133 | blurOnPaste: true, 134 | //Add functionality to allow duplicates 135 | //False uses normal behavior 136 | //True allows Duplicate Tags to be used 137 | allowDuplicates: false 138 | }, 139 | 140 | _splitAt: /\ |,/g, 141 | _existingAtIndex: 0, 142 | _keys: { 143 | backspace: [8], 144 | enter: [13], 145 | space: [32], 146 | comma: [44, 188], 147 | tab: [9], 148 | semicolon: [59,186] 149 | }, 150 | 151 | _sortable: { 152 | sorting: -1 153 | }, 154 | 155 | _idEditing: false, 156 | 157 | //initialization function 158 | _create: function () { 159 | 160 | var self = this; 161 | this.tagsArray = []; 162 | this.timer = null; 163 | this.lastKey = 0; 164 | //add class "tagit" for theming 165 | this.element.addClass("tagit"); 166 | 167 | //add any initial tags added through html to the array 168 | this.element.children('li').each(function () { 169 | var tag = $(this); 170 | var tagValue = tag.attr('tagValue') || tag.data('value'); 171 | self.options.initialTags.push({label: tag.text(), value: (tagValue || tag.text())}); 172 | }); 173 | 174 | var regexes = []; 175 | var pushRegex = function (key, regex) { 176 | if ($.inArray(key, self.options.seperatorKeys) !== -1) { 177 | regexes.push(regex); 178 | } 179 | }; 180 | //setup split according to the trigger keys 181 | self._splitAt = null; 182 | 183 | pushRegex('space', /\ /); 184 | pushRegex('semicolon', /;/); 185 | pushRegex('comma', /,/); 186 | 187 | var regexString = $.map(regexes, function (x) { 188 | return x.source; 189 | }).join('|'); 190 | 191 | self._splitAt = new RegExp(regexString,"g"); 192 | 193 | //alert(self._splitAt); 194 | 195 | //add the html input 196 | this.element.html('
                                • '); 197 | 198 | this.input = this.element.find(".tagit-input"); 199 | this.input.autoGrowInput(); 200 | //setup click handler 201 | $(this.element).click(function (e) { 202 | if ($(e.target).hasClass('tagit-close')) { 203 | // Removes a tag when the little 'x' is clicked. 204 | var parent = $(e.target).parent(); 205 | 206 | var tag = self.tagsArray[parent.index()]; 207 | 208 | tag.element.remove(); 209 | self._popTag(tag); 210 | } 211 | else { 212 | if (!self._isEditing) { //focus default input if we're not editing existing tag at the moment 213 | self.input.focus(); 214 | } 215 | if (self.options.emptySearch && $(e.target).hasClass('tagit-input') && self.input.val() === '' && self.input.catcomplete != undefined) { 216 | self.input.catcomplete('search'); 217 | } 218 | if (self.options.editable && $(e.target).hasClass('tagit-label')) { 219 | self._edit(e.target); 220 | } 221 | } 222 | }); 223 | 224 | //setup autocomplete handler 225 | var os = this.options.select; 226 | var ml = this.options.minLength; 227 | this.options.appendTo = this.element; 228 | this.options.source = this.options.tagSource; 229 | this.options.select = function (event, ui) { 230 | self.input.data('autoCompleteTag', true); 231 | clearTimeout(self.timer); 232 | if (self.options.maxTags !== undefined && self.tagsArray.length === self.options.maxTags) { 233 | self.input.val(""); 234 | } 235 | else { 236 | if (ui.item.label === undefined) { 237 | self._addTag({ label: ui.item.value}); 238 | } 239 | else { 240 | self._addTag({ label: ui.item.label, value: ui.item.value, type: ui.item.category}); 241 | } 242 | } 243 | 244 | return false; 245 | }; 246 | 247 | this.options.focus = function (event, ui) { 248 | if (ui.item.label !== undefined && /^key/.test(event.originalEvent.type)) { 249 | self.input.val(ui.item.label); 250 | self.input.data('value', ui.item.value); 251 | return false; 252 | } 253 | }; 254 | this.options.autoFocus = !this.options.allowNewTags; 255 | this.options.minLength = this.options.autocompleteMinLength; 256 | this.input.catcomplete(this.options); 257 | this.options.minLength = ml; 258 | this.options.select = os; 259 | 260 | self.isKeyEventProcessed = false; 261 | this.input.keyup(function (/*e*/) { 262 | self.isKeyEventProcessed = false; 263 | }); 264 | 265 | this.input.keydown(function (e) { 266 | self._processKeyEvent(e); 267 | }); 268 | //setup keydown handler 269 | this.input.keypress(function (e) { 270 | self._processKeyEvent(e); 271 | }); 272 | 273 | this.input.bind("paste", function (/*e*/) { 274 | if (self.options.blurOnPaste) { 275 | var input = $(this); 276 | self.timer = setTimeout(function () { input.blur(); }, 0); 277 | } 278 | }); 279 | 280 | //setup blur handler 281 | this.input.blur(function (/*e*/) { 282 | self.currentLabel = $(this).val(); 283 | self.currentValue = $(this).data('value'); 284 | if (self.options.allowNewTags) { 285 | self.timer = setTimeout(function () { 286 | self._addTag({ label: self.currentLabel, value: self.currentValue, type: self.options.defaultType}); 287 | self.currentValue = ''; 288 | self.currentLabel = ''; 289 | }, 400); 290 | } 291 | $(this).val('').removeData('value'); 292 | return false; 293 | }); 294 | 295 | //define missing trim function for strings 296 | if (!String.prototype.trim) { 297 | String.prototype.trim = function () { 298 | return this.replace(/^\s+|\s+$/g, ''); 299 | }; 300 | } 301 | 302 | if (this.options.select) { 303 | this.select = $(''); 306 | this.element.after(this.select); 307 | } 308 | this._initialTags(); 309 | 310 | //setup sortable handler 311 | if (self.options.sortable !== false) { 312 | 313 | var soptions = { 314 | items: '.tagit-choice', 315 | containment: 'parent', 316 | opacity: 0.6, 317 | tolerance: 'pointer', 318 | start: function (event, ui) { 319 | self._sortable.tag = $(ui.item); 320 | self._sortable.origIndex = self._sortable.tag.index(); 321 | }, 322 | update: function (event/*, ui*/) { 323 | self._sortable.newIndex = self._sortable.tag.index(); 324 | self._moveTag(self._sortable.origIndex, self._sortable.newIndex); 325 | if (self.options.tagsChanged) { 326 | var tag = self.tagsArray[self._sortable.newIndex]; 327 | self.options.tagsChanged(tag.value, 'moved', tag.element); 328 | } 329 | } 330 | }; 331 | 332 | if (self.options.sortable === 'handle') { 333 | soptions.handle = 'a.ui-icon'; 334 | soptions.cursor = 'move'; 335 | } 336 | 337 | self.element.sortable(soptions); 338 | } 339 | 340 | }, 341 | 342 | _processKeyEvent: function (e) { 343 | if (this.isKeyEventProcessed) { 344 | return; //don't process key events twice 345 | } 346 | 347 | var pressedKey = e.which || e.keyCode || e.charCode; 348 | var lastLi = this.element.children(".tagit-choice:last"); 349 | 350 | this.isKeyEventProcessed = true; 351 | 352 | if (pressedKey === this._keys.backspace[0]) { 353 | return this._backspace(lastLi); 354 | } 355 | 356 | if (this._isInitKey(pressedKey) && !(this._isTabKey(pressedKey) && this.value === '' && !this.input.data('autoCompleteTag'))) { 357 | e.preventDefault(); 358 | 359 | this.input.data('autoCompleteTag', false); 360 | 361 | if (!this.options.allowNewTags || (this.options.maxTags !== undefined && this.tagsArray.length === this.options.maxTags)) { 362 | this.input.val(""); 363 | } 364 | else if (this.options.allowNewTags && this.input.val().length >= this.options.minLength) { 365 | this._addTag({ label: this.input.val(), type: this.options.defaultType}); 366 | } 367 | } 368 | 369 | if (this.options.maxLength !== undefined && this.input.val().length > this.options.maxLength) { 370 | e.preventDefault(); 371 | this.input.val(this.input.val().substring(0, this.options.maxLength)); 372 | } 373 | 374 | if (lastLi.hasClass('selected')) { 375 | lastLi.removeClass('selected'); 376 | } 377 | 378 | this.lastKey = pressedKey; 379 | }, 380 | 381 | _postEdit: function (element, editInput, initialValue) { 382 | var finishEditing = $.proxy(function () { 383 | editInput.remove(); 384 | $(element).removeClass('hidden'); 385 | $(element).parent().removeClass('edited'); 386 | this._isEditing = false; 387 | }, this); 388 | 389 | return function () { 390 | var initialTagIndex = $(element).parent().index(); 391 | var initialTag = this.tagsArray[initialTagIndex]; 392 | //try to add new and if success - remove old 393 | var newValue = editInput.val(); 394 | if (this._splitAt && newValue.search(this._splitAt) > 0) { 395 | newValue = newValue.split(this._splitAt)[0]; //use only first value part - no splitters in edit 396 | } 397 | if (newValue === initialValue) { 398 | finishEditing(); 399 | } else if (this._addTag({ label: newValue})) { 400 | //else attempt to add new tag and if succeeded - remove old element and edit box 401 | initialTag.element.remove(); 402 | this._popTag(initialTag); 403 | var lastTagIndex = this.tagsArray.length - 1; 404 | if (lastTagIndex !== initialTagIndex) { 405 | var lastTag = this.tagsArray[lastTagIndex]; 406 | //visually move tag to the old place 407 | lastTag.element.insertBefore(this.tagsArray[initialTagIndex].element); 408 | this._moveTag(this.tagsArray.length - 1, initialTagIndex); //move element from last to old place 409 | if (this.options.tagsChanged) { //fire an update 410 | var tag = this.tagsArray[initialTagIndex]; 411 | this.options.tagsChanged(tag.value, 'moved', tag.element); 412 | } 413 | } 414 | finishEditing(); 415 | } 416 | }; 417 | }, 418 | 419 | _edit: function (element) { 420 | this._isEditing = true; 421 | var initialValue = $(element).text(); 422 | var editInput = $(''); 423 | editInput.val(initialValue); 424 | $(element).parent().addClass('edited'); 425 | editInput.addClass('tagit-edit'); 426 | editInput.css('width', $(element).outerWidth()); 427 | $(element).addClass('hidden'); 428 | editInput.blur($.proxy(this._postEdit(element, editInput, initialValue), this)); 429 | editInput.keypress($.proxy(function (e) { 430 | var pressedKey = e.which || e.keyCode || e.charCode; 431 | if (this._isInitKey(pressedKey)) { 432 | editInput.blur(); 433 | } 434 | }, this)); 435 | $(element).before(editInput); 436 | editInput[0].select(); 437 | }, 438 | 439 | _popSelect: function (tag) { 440 | $('option:eq(' + tag.index + ')', this.select).remove(); 441 | this.select.change(); 442 | }, 443 | 444 | _addSelect: function (tag) { 445 | this.select.append(''); 446 | this.select.change(); 447 | }, 448 | 449 | _popTag: function (tag) { 450 | 451 | //are we removing the last tag or a specific tag? 452 | if (tag === undefined) { 453 | tag = this.tagsArray.pop(); 454 | } 455 | else { 456 | this.tagsArray.splice(tag.index, 1); 457 | } 458 | 459 | 460 | //maintain the indexes 461 | var ind; 462 | for (ind = 0; ind < this.tagsArray.length; ind++) { 463 | this.tagsArray[ind].index = ind; 464 | } 465 | 466 | if (this.options.select) { 467 | this._popSelect(tag); 468 | } 469 | if (this.options.tagsChanged) { 470 | this.options.tagsChanged(tag? (tag.value || tag.label) : null, 'popped', tag); 471 | } 472 | return; 473 | }, 474 | 475 | _addTag: function (newTag) { 476 | if (newTag.label === undefined) { //set label to value to simplify possible use-cases, eg. if we send data from server where title isn't set 477 | newTag.label = newTag.value; 478 | } 479 | if(newTag.label === parseInt(newTag.label, 10)){ 480 | newTag.label=newTag.label.toString(); 481 | } 482 | this.input.catcomplete('close').val(""); 483 | 484 | //are we trying to add a tag that should be split? 485 | if (this._splitAt && newTag.label.search(this._splitAt) > 0) { 486 | var result = newTag.label.split(this._splitAt); 487 | var i; 488 | for (i = 0; i < result.length; i++) { 489 | this._addTag({label: result[i], value: newTag.value}); 490 | } 491 | return; 492 | } 493 | 494 | newTag.label = newTag.label.replace(/,+$/, "").trim(); 495 | 496 | if (newTag.label === "") { 497 | return false; 498 | } 499 | 500 | //escape < > and & 501 | newTag.label = newTag.label.replace(/&/g, "&").replace(//g, ">"); 502 | 503 | var tagExists = this._exists(newTag.label, newTag.value); 504 | if (tagExists !== false && !this.options.allowDuplicates) { 505 | this._highlightExisting(tagExists); 506 | return false; 507 | } 508 | 509 | var tag = this.tag(newTag.label, newTag.value, newTag.type); 510 | tag.element = $('
                              • ' 513 | + (this.options.sortable === 'handle' ? '' : '') 514 | + '
                                ' + newTag.label + '
                                ' + 'x
                                • '); 515 | tag.element.insertBefore(this.input.parent()); 516 | this.tagsArray.push(tag); 517 | 518 | this.input.val(""); 519 | 520 | if (this.options.select) { 521 | this._addSelect(tag); 522 | } 523 | if (this.options.tagsChanged) { 524 | this.options.tagsChanged(tag.label, 'added', tag.element); 525 | } 526 | return true; 527 | }, 528 | 529 | _exists: function (label, value) { 530 | if (this.tagsArray.length === 0) { 531 | return false; 532 | } 533 | 534 | label = this._lowerIfCaseInsensitive(label); 535 | value = this._lowerIfCaseInsensitive(value); 536 | 537 | var ind; 538 | for (ind = 0; ind < this.tagsArray.length; ind++) { 539 | if (this._lowerIfCaseInsensitive(this.tagsArray[ind].label) === label) { 540 | if (value !== undefined) { 541 | if (this._lowerIfCaseInsensitive(this.tagsArray[ind].value) === value) { 542 | return ind; 543 | } 544 | } else { 545 | return ind; 546 | } 547 | } 548 | } 549 | 550 | return false; 551 | }, 552 | 553 | _highlightExisting: function (index) { 554 | if (this.options.highlightOnExistColor === undefined) { 555 | return; 556 | } 557 | var tag = this.tagsArray[index]; 558 | tag.element.stop(); 559 | 560 | var initialColor = tag.element.css('color'); 561 | tag.element.animate({color: this.options.highlightOnExistColor}, 100).animate({'color': initialColor}, 800, null, function () { 562 | //reset style to initial 563 | tag.element.attr('style', ''); 564 | }); 565 | }, 566 | 567 | _isInitKey: function (keyCode) { 568 | 569 | var keyName = ""; 570 | var key; 571 | for (key in this._keys) { 572 | if (this._keys.hasOwnProperty(key)) { 573 | if ($.inArray(keyCode, this._keys[key]) !== -1) { 574 | keyName = key; 575 | } 576 | } 577 | } 578 | 579 | if ($.inArray(keyName, this.options.triggerKeys) !== -1) { 580 | return true; 581 | } 582 | return false; 583 | }, 584 | 585 | _isTabKey: function (keyCode) { 586 | var tabKeys = this._keys.tab; 587 | return $.inArray(keyCode, tabKeys) > -1; 588 | }, 589 | 590 | _removeTag: function () { 591 | this._popTag(); 592 | this.element.children(".tagit-choice:last").remove(); 593 | }, 594 | 595 | _backspace: function (li) { 596 | if (this.input.val() === "") { 597 | // When backspace is pressed, the last tag is deleted. 598 | if (this.lastKey == this._keys.backspace[0]) { 599 | this._popTag(); 600 | li.remove(); 601 | this.lastKey = null; 602 | } else { 603 | li.addClass('selected'); 604 | this.lastKey = this._keys.backspace[0]; 605 | } 606 | } 607 | return true; 608 | }, 609 | 610 | _initialTags: function () { 611 | var input = this; 612 | var _temp; 613 | if (this.options.tagsChanged) { 614 | _temp = this.options.tagsChanged; 615 | } 616 | this.options.tagsChanged = null; 617 | 618 | if (this.options.initialTags.length !== 0) { 619 | $(this.options.initialTags).each(function (i, element) { 620 | if (typeof element === "object") { 621 | input._addTag({ label: element.label, value: element.value, type: element.type}); 622 | } 623 | else { 624 | input._addTag({ label: element}); 625 | } 626 | }); 627 | } 628 | this.options.tagsChanged = _temp; 629 | this.options.tagsChanged(null, 'tagsInited', null); 630 | }, 631 | 632 | _lowerIfCaseInsensitive: function (inp) { 633 | 634 | if (inp === undefined || typeof inp !== typeof "a") { 635 | return inp; 636 | } 637 | 638 | if (this.options.caseSensitive) { 639 | return inp; 640 | } 641 | 642 | return inp.toLowerCase(); 643 | 644 | }, 645 | 646 | _moveTag: function (old_index, new_index) { 647 | this.tagsArray.splice(new_index, 0, this.tagsArray.splice(old_index, 1)[0]); 648 | var ind; 649 | for (ind = 0; ind < this.tagsArray.length; ind++) { 650 | this.tagsArray[ind].index = ind; 651 | } 652 | 653 | if (this.options.select) { 654 | if (old_index < new_index) { 655 | $('option:eq(' + old_index + ')', this.select).insertAfter($('option:eq(' + new_index + ')', this.select)); 656 | } 657 | else { 658 | $('option:eq(' + old_index + ')', this.select).insertBefore($('option:eq(' + new_index + ')', this.select)); 659 | } 660 | } 661 | }, 662 | tags: function () { 663 | return this.tagsArray; 664 | }, 665 | 666 | destroy: function () { 667 | $.Widget.prototype.destroy.apply(this, arguments); // default destroy 668 | clearTimeout(this.timer); 669 | this.tagsArray = []; 670 | }, 671 | 672 | reset: function () { 673 | this.element.find(".tagit-choice").remove(); 674 | this.tagsArray = []; 675 | if (this.options.select) { 676 | this.select.children().remove(); 677 | this.select.change(); 678 | } 679 | this._initialTags(); 680 | if (this.options.tagsChanged) { 681 | this.options.tagsChanged(null, 'reset', null); 682 | } 683 | }, 684 | 685 | fill: function (tags) { 686 | 687 | if (tags !== undefined) { 688 | this.options.initialTags = tags; 689 | } 690 | this.reset(); 691 | }, 692 | 693 | add: function (label, value) { 694 | if (typeof label === "object") { 695 | return this._addTag({ label: label.label, value: label.value}); 696 | } 697 | return this._addTag({ label: label, value: value}); 698 | }, 699 | 700 | autocomplete: function () { 701 | return this.input.data("autocomplete"); 702 | }, 703 | 704 | tag: function (label, value, type, element) { 705 | var self = this; 706 | return { 707 | label: label, 708 | value: (value === undefined ? label : value), 709 | type: type, 710 | element: element, 711 | index: self.tagsArray.length 712 | }; 713 | }, 714 | 715 | remove: function (label, value) { 716 | if (this.tagsArray.length === 0) { 717 | return false; 718 | } 719 | 720 | label = this._lowerIfCaseInsensitive(label); 721 | value = this._lowerIfCaseInsensitive(value); 722 | 723 | var i; 724 | for (i = 0; i < this.tagsArray.length; i++) { 725 | if (this._lowerIfCaseInsensitive(this.tagsArray[i].value) === value || this._lowerIfCaseInsensitive(this.tagsArray[i].label) === label) { 726 | break; 727 | } 728 | } 729 | 730 | if (i >= 0 && i < this.tagsArray.length) { 731 | var tag = this.tagsArray[i]; 732 | tag.element.remove(); 733 | this._popTag(tag); 734 | return true; 735 | } 736 | return false; 737 | } 738 | 739 | 740 | }); 741 | }(jQuery)); 742 | --------------------------------------------------------------------------------