-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathexample.html
254 lines (234 loc) · 8.9 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
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
228
229
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery.multiselect</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.multiselect.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="jquery.multiselect.css" type="text/css" media="screen" charset="utf-8">
<script type="text/javascript" charset="utf-8">
$().ready(function() {
var optsColor = {
addText : 'Other color'
},
filmOpts = {
addText : 'Other film',
parse : function(v) { return v.split(/\s*,\s*/); },
inputTitle : 'Separate values by comma',
layout : '<div class="ui-widget mselect">'
+'<div class="ui-widget-content ui-corner-all mselect-list">'
+'%items%'
+'</div>'
+'<a href="#" class="mselect-button-add"><span class="ui-state-default mselect-button-add-icon"><span class="ui-icon ui-icon-plusthick"/></span>%addText%</a>'
+'<div class="mselect-input-container">'
+'<input type="text" class="ui-widget-content ui-corner-all mselect-input" title="%inputTitle%"/>'
+'<a href="#" class="ui-state-default mselect-button-cancel" title="%cancelText%"><span class="ui-icon ui-icon-closethick"/></a>'
+'</div>'
+'</div>'
},
writerOpts = {
addText : 'Other author',
parse : function(v) { return v.split(/\s*,\s*/); },
inputTitle : 'Separate values by comma',
toggleAddButton : false,
layout : '<div class="ui-widget mselect">'
+'<div class="ui-widget-content ui-corner-all mselect-list">'
+'%items%'
+'<div class="mselect-input-container">'
+'<input type="text" class="ui-widget-content ui-corner-all mselect-input" title="%inputTitle%"/>'
+'<a href="#" class="ui-state-default mselect-button-cancel" title="%cancelText%"><span class="ui-icon ui-icon-closethick"/></a>'
+'</div>'
+'</div>'
+'<a href="#" class="mselect-button-add" style="float:right"><span class="ui-state-default mselect-button-add-icon"><span class="ui-icon ui-icon-plusthick"/></span>%addText%</a>'
+'</div>'
};
$('#color').multiselect(optsColor);
$('#film').multiselect(filmOpts);
$('#writer').multiselect(writerOpts);
$('#side .ui-button, #form .ui-button').hover(function() {
$(this).toggleClass('ui-state-hover');
});
});
</script>
<style type="text/css" media="screen">
h1 { text-align:center; }
h2 { margin-top:0; margin-bottom:.3em; }
#body { width:980px; margin:0 auto; }
#side { width:200px; float:left; margin-right:5px; }
#side .ui-button { width:100%; margin-bottom:10px; }
#form { margin-left:210px; padding:.2em; }
#form .ui-widget-header { padding:.2em .5em; }
form { margin:.3em; margin-bottom:0;}
#form .ui-dialog-buttonpane {
background:transparent;
border-left:0 solid;
border-right:0 solid;
border-bottom:0 solid;
text-align:right;
padding:.1em .5em;
}
#form .ui-button-text-only .ui-button-text { padding:.1em .7em; }
#form small { color:#999; font-size:x-small; }
.row {
padding:.2em;
font-size:.9em;
clear:right
}
.input {
float:right;
margin-left:10px;
width:400px;
}
.clear { clear:right;}
#content { padding:.2em; font-size:.9em; }
#content .ui-state-default { padding:.1em .3em; }
#content p { margin-top:.5em; padding:0 .3em; }
pre {
border:1px solid #ccc;
padding:1em;
background:#eee;
}
table { width: 100%; margin:.3em 0; border-collapse:collapse; }
table td, table th { border:1px solid #ccc; padding:.2em .3em; }
table th { text-align:left; }
</style>
</head>
<body>
<h1>jQuery.multiselect plugin demo</h1>
<div id="body">
<div id="side">
<a href="https://github.com/dio-el-claire/jquery-multiselect" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<span class="ui-button-text">Download from github</span>
</a>
<img src="http://www.std42.ru/jquery-multiselect/images/screen.png" alt="Screen" style="margin-bottom:10px" />
<a href="http://jqueryui.com/themeroller/" ><img style="border:0 solid" src="http://docs.jquery.com/images/0/09/Themeroller_ready_white_200px.png" width="202" height="60" alt="Themeroller Ready"></a>
</div>
<div id="form" class="ui-widget ui-widget-content ui-corner-all">
<h2 class="ui-widget-header ui-corner-all" style="font-size:1em;">Example</h2>
<form action="http://www.std42.ru/jquery-multiselect/post.php" method="post">
<div class="row">
<div class="input">
<div><input type="text" name="name" class="ui-widget-content ui-corner-all" style="width:99%;margin:0" /></div>
</div>
Your Name:
<!-- <div class="clear"></div> -->
</div>
<div class="row">
<div class="input">
<div><input type="text" name="email" class="ui-widget-content ui-corner-all" style="width:99%"/></div>
</div>
Your Email:
<div class="clear"></div>
</div>
<div class="row">
<div class="input">
<select multiple="on" size="5" name="color[]" id="color">
<option value="white">White</option>
<option value="black" selected="selected">Black</option>
<option value="red">Red</option>
</select>
</div>
Your favorite color:
<br><small>default layout and settings</small>
<div class="clear"></div>
</div>
<div class="row">
<div class="input">
<select multiple="on" size="5" name="film[]" id="film">
<option value="Dostoevsky">Arizona dreams</option>
<option value="Dead man">Dead man</option>
<option value="Avatar">Avatar</option>
</select>
</div>
Your favorite film:
<br><small>custom layout with add button and input field outside the group</small>
<div class="clear"></div>
</div>
<div class="row">
<div class="input">
<select multiple="on" size="5" name="writer[]" id="writer">
<option value="Dostoevsky">Dostoevsky</option>
<option value="Tomas Wolf">Tomas Wolf</option>
<option value="Murakami">Murakami</option>
</select>
</div>
Your favorite writer:<br>
<small>custom layout with add button outside the group on the right not hidden while input and input field inside the group</small>
<div class="clear"></div>
</div>
<div class="ui-dialog-buttonpane ui-widget-content">
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<span class="ui-button-text">Ok</span>
</button>
</div>
</div>
</form>
</div>
<div style="clear:both;margin-bottom:1em"></div>
<div class="ui-widget ui-widget-content ui-corner-all" id="content">
<h2 class="ui-state-default ui-corner-all">Overview</h2>
<p>jQuery plugin that converts <strong><select></strong> input with attribute <em>multiple</em> into group of checkboxes with ability to add new values.<br>
Requires jQuery UI styles (jQuery UI JS is not required).</p><br>
<h2 class="ui-state-default ui-corner-all">How to use</h2>
<p>Here’s a simple example:</p>
<pre>
<select multiple="on" size="5" name="color">
<option value="white">White</option>
<option value="black" selected="selected">Black</option>
<option value="red">Red</option>
</select>
$('select[name="color"]').multiselect();
or
var opts = { ... }
$('select[name="color"]').multiselect(opts);</pre><br>
<h2 class="ui-state-default ui-corner-all">Options</h2>
<table cellspacing="0">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr>
<td>layout</td>
<td>Widget layout template</td>
</tr>
<tr>
<td>item</td>
<td>List item layout template</td>
</tr>
<tr>
<td>addText</td>
<td>Text for "New value" button/link</td>
</tr>
<tr>
<td>cancelText</td>
<td>Text for "Cancel" icon in text field</td>
</tr>
<tr>
<td>inputTitle</td>
<td>Text for input tooltip</td>
</tr>
<tr>
<td>size</td>
<td>How many items show in widget without scroll (used if select has no "size" attribute)</td>
</tr>
<tr>
<td>itemHoverClass</td>
<td>Hover class for list items</td>
</tr>
<tr>
<td>toggleAddButton</td>
<td>Hide "New value" button when text field is visible</td>
</tr>
<tr>
<td>parse</td>
<td>Function. Parse new list value and return values array. By default - split value by space(s)</td>
</tr>
</table>
</div>
<hr style="color:#ccc" noshade="on" />
Made in <a href="http://www.std42.ru/" style="color:#333">Studio 42</a>
</div>
</body>
</html>