forked from michael/multiselect
/
index.html
206 lines (187 loc) · 9.17 KB
/
index.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery UI Multiselect</title>
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" />
<link type="text/css" href="css/ui.multiselect.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/localisation/jquery.localisation-min.js"></script>
<script type="text/javascript" src="js/plugins/scrollTo/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/ui.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$.localise('ui-multiselect', {/*language: 'en',*/ path: 'js/locale/'});
$(".multiselect").multiselect({
selectedContainerOnRight: false,
dividerLocation: 0.4
});
$('#switcher').themeswitcher();
});
</script>
</head>
<body>
<a href="http://github.com/michael/multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" /></a>
<div id="wrapper">
<div id="header">
<h1>jQuery UI Multiselect</h1>
<p>
Another attempt of a <em>sortable</em>, <em>searchable</em> multiple select widget
</p>
<ul id="nav">
<li><a href="http://quasipartikel.at/2009/05/10/jqueryui-multiselect/">Blogpost</a></li>
<li><a href="http://github.com/michael/multiselect">Source</a></li>
<li><a href="http://github.com/michael/multiselect/zipball/master">Download</a></li>
<li><a href="http://github.com/michael/multiselect/issues">Bugs</a></li>
</ul>
</div>
<div id="content">
<p>
It depends on <a href="http://jquery.com/">jQuery 1.5</a> and <a href="http://jqueryui.com/">jQuery UI 1.8</a>.
The widget is styleable using <a href="http://jqueryui.com/themeroller/" title="jQuery UI Themeroller">Themeroller</a>.
It works in an <em>unobtrusive</em> fashion, by just turning html multiple select inputs into a sexier equivalent. There's no extra markup needed.
</p>
<ul>
<li>For installation instructions please have a look at the corresponding <a href="http://www.quasipartikel.at/2009/05/10/jqueryui-multiselect/">blogpost</a></li>
<li>Source code is available at <a href="http://github.com/michael/multiselect/" title="Social Coding">Github</a></li>
<li>In case you are looking for the original version, it has been moved <a href="http://quasipartikel.at/multiselect_original/">here</a></li>
</ul><br/>
<form action="index.html">
<select id="countries" class="multiselect" multiple="multiple" name="countries[]">
<option value="AFG">Afghanistan</option>
<option value="ALB">Albania</option>
<option value="DZA">Algeria</option>
<option value="AND">Andorra</option>
<option value="ARG">Argentina</option>
<option value="ARM">Armenia</option>
<option value="ABW">Aruba</option>
<option value="AUS">Australia</option>
<option value="AUT" selected="selected">Austria</option>
<option value="AZE">Azerbaijan</option>
<option value="BGD">Bangladesh</option>
<option value="BLR">Belarus</option>
<option value="BEL">Belgium</option>
<option value="BIH">Bosnia and Herzegovina</option>
<option value="BRA">Brazil</option>
<option value="BRN">Brunei</option>
<option value="BGR">Bulgaria</option>
<option value="CAN">Canada</option>
<option value="CHN">China</option>
<option value="COL">Colombia</option>
<option value="HRV">Croatia</option>
<option value="CYP">Cyprus</option>
<option value="CZE">Czech Republic</option>
<option value="DNK">Denmark</option>
<option value="EGY">Egypt</option>
<option value="EST">Estonia</option>
<option value="FIN">Finland</option>
<option value="FRA">France</option>
<option value="GEO">Georgia</option>
<option value="DEU" selected="selected">Germany</option>
<option value="GRC">Greece</option>
<option value="HKG">Hong Kong</option>
<option value="HUN">Hungary</option>
<option value="ISL">Iceland</option>
<option value="IND">India</option>
<option value="IDN">Indonesia</option>
<option value="IRN">Iran</option>
<option value="IRL">Ireland</option>
<option value="ISR">Israel</option>
<option value="ITA">Italy</option>
<option value="JPN">Japan</option>
<option value="JOR">Jordan</option>
<option value="KAZ">Kazakhstan</option>
<option value="KWT">Kuwait</option>
<option value="KGZ">Kyrgyzstan</option>
<option value="LVA">Latvia</option>
<option value="LBN">Lebanon</option>
<option value="LIE">Liechtenstein</option>
<option value="LTU">Lithuania</option>
<option value="LUX">Luxembourg</option>
<option value="MAC">Macau</option>
<option value="MKD">Macedonia</option>
<option value="MYS">Malaysia</option>
<option value="MLT">Malta</option>
<option value="MEX">Mexico</option>
<option value="MDA">Moldova</option>
<option value="MNG">Mongolia</option>
<option value="NLD" selected="selected">Netherlands</option>
<option value="NZL">New Zealand</option>
<option value="NGA">Nigeria</option>
<option value="NOR">Norway</option>
<option value="PER">Peru</option>
<option value="PHL">Philippines</option>
<option value="POL">Poland</option>
<option value="PRT">Portugal</option>
<option value="QAT">Qatar</option>
<option value="ROU">Romania</option>
<option value="RUS">Russia</option>
<option value="SMR">San Marino</option>
<option value="SAU">Saudi Arabia</option>
<option value="CSG">Serbia and Montenegro</option>
<option value="SGP">Singapore</option>
<option value="SVK">Slovakia</option>
<option value="SVN">Slovenia</option>
<option value="ZAF">South Africa</option>
<option value="KOR">South Korea</option>
<option value="ESP">Spain</option>
<option value="LKA">Sri Lanka</option>
<option value="SWE">Sweden</option>
<option value="CHE">Switzerland</option>
<option value="SYR">Syria</option>
<option value="TWN">Taiwan</option>
<option value="TJK">Tajikistan</option>
<option value="THA">Thailand</option>
<option value="TUR">Turkey</option>
<option value="TKM">Turkmenistan</option>
<option value="UKR">Ukraine</option>
<option value="ARE">United Arab Emirates</option>
<option value="GBR">United Kingdom</option>
<option value="USA" selected="selected">United States</option>
<option value="UZB">Uzbekistan</option>
<option value="VAT">Vatican City</option>
<option value="VNM">Vietnam</option>
</select>
<br/>
<input type="submit" value="Submit Form"/>
</form>
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
<h2>Features</h2>
<ul>
<li>Search within available options, if there are a lots of them</li>
<li>Displaying counts of selected and available items</li>
<li>Select All / Deselect All Buttons</li>
<li>Dragging items from the available list to the selected list directly</li>
</ul>
<h2>Contributors</h2>
<ul>
<li><a href="http://github.com/michael/multiselect/">Michael Aufreiter</a></li>
<li><a href="http://github.com/yanickrochon/multiselect">Yanick Rochon</a></li>
</ul>
</p>
<h2>Misc</h2>
<p>
There are no limitations. Do whatever you want with this plugin.
If you did some nice modifications, just let me know (via Github). I'd be happy to include them.
</p>
<h2>Other active projects</h2>
<ul>
<li><a href="http://quasipartikel.at/proper">PROPER™ — Semantic Richtext Editor</a> <small style="color: red;">NEW!</small></li>
<li><a href="http://substance.io">Substance — Open Documents For The Web</a> <small style="color: red;">NEW!</small></li>
<li><a href="http://substance.io/#michael/data-js">Data.js — Javascript Data Manipulation</a> <small style="color: red;">NEW!</small></li>
<li><a href="http://quasipartikel.at/donut">DONUT™ - Radial Navigator</a></li>
</ul>
</div>
<div id="footer">
<p class="left">A <a href="http://quasipartikel.at/">Quasipartikel</a> Production</p>
<p class="right">Template adopted from <a href="http://orderedlist.com/demos/fancy-zoom-jquery/">orderedlist.com</a></p>
<br class="clear"/>
</div>
</div>
</body>
</html>