├── README.md ├── example.html ├── jquery.multiselect.css └── jquery.multiselect.js /README.md: -------------------------------------------------------------------------------- 1 | jQuery.multiselect 2 | ================== 3 | 4 | Overview 5 | -------- 6 | 7 | jQuery plugin that converts ` 18 | 19 | 20 | 21 | 22 | 23 | $('select[name="color"]').multiselect(); 24 | 25 | or 26 | 27 | var opts = { ... }; 28 | $('select[name="color"]').multiselect(opts); 29 | 30 | 31 | Options 32 | ------- 33 | 34 | * `layout` - Widget layout template 35 | * `item` - List item layout template 36 | * `addText` - Text for *New value* button/link 37 | * `addButton` - Layout template for the add button so you can also disable then by using the option var opts = { addButton : "" } 38 | * `cancelText` - Text for *Cancel* icon in text field 39 | * `inputTitle` - Text for input tooltip 40 | * `size` - How many items show in widget without scroll (used if select has no *size* attribute) 41 | * `itemHoverClass` - Hover class for list items 42 | * `toggleAddButton` - Hide *New value* button when text field is visible 43 | * `parse` - Function. Parse new list value and return values array. By default - split value by space(s) 44 | 45 | 46 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery.multiselect 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 61 | 103 | 104 | 105 | 106 |

jQuery.multiselect plugin demo

107 |
108 | 109 |
110 | 111 | Download from github 112 | 113 | Screen 114 | Themeroller Ready 115 |
116 | 117 |
118 |

Example

119 |
120 |
121 |
122 |
123 |
124 | Your Name: 125 | 126 |
127 |
128 |
129 |
130 |
131 | Your Email: 132 |
133 |
134 |
135 |
136 | 141 |
142 | Your favorite color: 143 |
default layout and settings 144 |
145 |
146 |
147 |
148 | 153 |
154 | Your favorite film: 155 |
custom layout with add button and input field outside the group 156 |
157 |
158 |
159 |
160 | 165 |
166 | Your favorite writer:
167 | custom layout with add button outside the group on the right not hidden while input and input field inside the group 168 |
169 |
170 | 171 |
172 |
173 | 176 |
177 |
178 |
179 |
180 | 181 |
182 | 183 |
184 |

Overview

185 |

jQuery plugin that converts <select> input with attribute multiple into group of checkboxes with ability to add new values.
186 | Requires jQuery UI styles (jQuery UI JS is not required).


187 | 188 |

How to use

189 |

Here’s a simple example:

190 | 
191 | 	<select multiple="on" size="5" name="color">
192 | 		<option value="white">White</option>
193 | 		<option value="black" selected="selected">Black</option>
194 | 		<option value="red">Red</option>
195 | 	</select>
196 | 
197 | 	$('select[name="color"]').multiselect();
198 | 
199 | 	or 
200 | 
201 | 	var opts = { ... }
202 | 	$('select[name="color"]').multiselect(opts);

203 | 204 |

Options

205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 |
KeyValue
layoutWidget layout template
itemList item layout template
addTextText for "New value" button/link
cancelTextText for "Cancel" icon in text field
inputTitleText for input tooltip
sizeHow many items show in widget without scroll (used if select has no "size" attribute)
itemHoverClassHover class for list items
toggleAddButtonHide "New value" button when text field is visible
parseFunction. Parse new list value and return values array. By default - split value by space(s)
247 |
248 | 249 |
250 | Made in Studio 42 251 |
252 | 253 | 254 | 255 | -------------------------------------------------------------------------------- /jquery.multiselect.css: -------------------------------------------------------------------------------- 1 | .mselect { 2 | position:relative; 3 | } 4 | 5 | .mselect-fixed { 6 | overflow-x:hidden; 7 | overflow-y:auto; 8 | } 9 | 10 | .mselect-list .mselect-list-item.ui-state-hover { 11 | margin-top:-1px; 12 | margin-bottom:-1px; 13 | border-left:0 solid; 14 | border-right:0 solid; 15 | font-weight:normal; 16 | } 17 | 18 | .mselect-list-item { 19 | display:block; 20 | } 21 | 22 | .mselect-list-item label { 23 | width:100%; 24 | display:block; 25 | } 26 | 27 | .mselect-input-container { 28 | position:relative; 29 | padding:.2em; 30 | display:none; 31 | } 32 | 33 | .mselect-input { width: 99%; margin:0; } 34 | 35 | .mselect-button-add { 36 | display:block; 37 | zoom:1; 38 | position:relative; 39 | text-decoration:none; 40 | padding-left:24px; 41 | padding:2px 2px 2px 24px; 42 | cursor:pointer; 43 | } 44 | 45 | .mselect .mselect-button-add-icon, 46 | .mselect .mselect-button-cancel { 47 | width: 17px; 48 | height:17px; 49 | position:absolute; 50 | top:50%; 51 | -moz-border-radius:8px; 52 | -webkit-border-radius:8px; 53 | border-radius:8px; 54 | } 55 | 56 | .mselect-button-add-icon { left:.2em; margin-top:-10px; } 57 | 58 | .mselect .mselect-button-cancel { 59 | right:.5em; 60 | margin-top:-8px; 61 | cursor:pointer; 62 | border:0 solid; 63 | background:transparent; 64 | } 65 | -------------------------------------------------------------------------------- /jquery.multiselect.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | /* 3 | * jQuery.multiselect plugin 4 | * 5 | * Form control: allow select several values from list and add new value(s) to list 6 | * 7 | * Licensed under the BSD License: 8 | * http://www.opensource.org/licenses/bsd-license 9 | * 10 | * Version: 0.9.0 11 | * 12 | * @author Dmitry (dio) Levashov, dio@std42.ru 13 | * @example 14 | * html: ' 150 | +'' 151 | +'' 152 | +'', 153 | /** 154 | * List item layout template 155 | * 156 | * @type String 157 | */ 158 | item : '
', 159 | /** 160 | * Text for "New value" button/link 161 | * 162 | * @type String 163 | */ 164 | addText : 'New value', 165 | /** 166 | * the add buttom 167 | * 168 | * @type String 169 | */ 170 | addButton : '%addText%' , 171 | 172 | /** 173 | * Text for "Cancel" icon in text field 174 | * 175 | * @type String 176 | */ 177 | cancelText : 'Cancel', 178 | /** 179 | * Text for input tooltip 180 | * 181 | * @type String 182 | */ 183 | inputTitle : 'Separate values by space', 184 | /** 185 | * Widget height, owerwrited by select "size" attribute 186 | * 187 | * @type Number 188 | */ 189 | size : 5, 190 | /** 191 | * Hover class for list items 192 | * 193 | * @type String 194 | */ 195 | itemHoverClass : 'ui-state-hover', 196 | /** 197 | * Hide "New value" button when text field is visible 198 | * 199 | * @type Boolean 200 | */ 201 | toggleAddButton : true, 202 | /** 203 | * Parse new list value and return values array 204 | * By default - split value by space(s) 205 | * 206 | * @param String user input 207 | * @return Array 208 | */ 209 | parse : function(v) { return v.split(/\s+/) } 210 | } 211 | 212 | })(jQuery); 213 | --------------------------------------------------------------------------------