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
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
|
<!DOCTYPE html>
<html>
<head>
<title>jQuery Stylish Select 0.4.9 plugin examples</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylish-select.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.stylish-select.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#my-dropdown, #my-dropdown2, #my-dropdown3, #my-dropdown4, #my-dropdown5, #my-dropdown6, #my-dropdown7, #my-dropdown8, #my-dropdown9').sSelect();
//set max height
$('#my-dropdownCountries').sSelect({ddMaxHeight: '300px'});
//set value on click
$('#setVal').click(function(){
$('#my-dropdown5').getSetSSValue('4');
});
//get value on click
$('#getVal').click(function(){
alert('The value is: '+$('#my-dropdown5').getSetSSValue());
});
//alert change event
$('#my-dropdownChange').sSelect().change(function(){alert('changed')});
//add options to select and update
$('#addOptions').click(function(){
$('#my-dropdown6').append('<option value="newOpt">New Option</option>').resetSS();
return false;
});
});
</script>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.selCont {clear:both; margin-bottom:20px; padding-bottom:40px; float:left; border-bottom:dotted 1px #000; width:600px;}
</style>
</head>
<body>
<form action="" method="post">
<h1>Stylish Select 0.4.9</h1>
<h2>A cross-browser, accessible alternative to the standard form element which can be fully customised with CSS</h2>
<p>Stylish Select attempts to replicate the functionality of the browser default select box as closely as possible with support for keyboard navigation, and intelligent positioning.</p>
<p>Stylish Select aims to have a minimal code footprint and weighs in at just over 3KB when minified.</p>
<a href="http://github.com/scottdarby/Stylish-Select">Get latest source code from GitHub</a>
<h2>Usage</h2>
<p>First, include the stylesheet, jQuery and the stylish select .js file in your html head tag.</p>
<p>The plugin can be used to replace any select with the following:</p>
<pre class="brush: javascript">
$(document).ready(function(){
$('#my-dropdown').sSelect();
});
</pre>
<div class="selCont">
<h2>Simplest example, option selected by default</h2>
<p>You can use the alphabetical and arrow keys to navigate the list as you would a browser default select.</p>
<select id="my-dropdown" name="my-dropdown">
<option value="1">A cappella</option>
<option value="test">Acid Jazz</option>
<option value="3">Big Band</option>
<option value="4">Big Beat</option>
<option value="5">Cakewalk</option>
<option value="6">Calenda</option>
<option value="7">Dark ambient</option>
<option value="8">Dark cabaret</option>
<option value="9">Chalk & Cheese</option>
</select>
</div>
<div class="selCont">
<h2>Change event</h2>
<p>Stylish Select alters the original select on the page, so you can access it's change event:</p>
<pre class="brush: javascript">
//change event
$('#my-dropdownChange').sSelect().change(function(){alert('changed')});
</pre>
<select id="my-dropdownChange" name="my-dropdown">
<option value="1">A cappella</option>
<option value="test">Acid Jazz</option>
<option value="3" selected="selected">Big Band</option>
<option value="4">Big Beat</option>
<option value="5">Cakewalk</option>
<option value="6">Calenda</option>
<option value="7">Dark ambient</option>
<option value="8">Dark cabaret</option>
</select>
</div>
<div class="selCont">
<h2>Grouped options</h2>
<p>Stylish Select supports optgroups and also optgroups and options together.</p>
<select id="my-dropdown2" name="my-dropdown">
<option>Please select</option>
<optgroup label="Tool">
<option value="1">Opiate</option>
<option value="2">Undertow</option>
<option value="3">Aenima</option>
<option value="4">Lateralus</option>
</optgroup>
<optgroup label="A Tribe Called Quest">
<option value="5">People's Instinctive Travels and the Paths of Rhythm</option>
<option value="6">The Low End Theory</option>
<option selected="selected" value="7">Midnight Marauders</option>
<option value="8">Beats, Rhymes and Life</option>
<option value="9">The Love Movement</option>
</optgroup>
</select>
</div>
<div id="get-set" class="selCont">
<h2>Getting/setting the value</h2>
<pre class="brush: javascript">
//set value
$('#setVal').click(function(){
$('#my-dropdown5').getSetSSValue(4);
});
//get value
$('#getVal').click(function(){
alert('The value is: '+$('#my-dropdown5').getSetSSValue());
});
</pre>
<p><a id="setVal" href="javascript:void(0)">Set value to 4</a></p>
<p><a id="getVal" href="javascript:void(0)">Get value</a></p>
<select id="my-dropdown5" name="my-dropdown">
<option value="1">Lorem</option>
<option value="2">Ipsum</option>
<option value="3">Dolor</option>
<option value="4">Sit</option>
<option value="5">Amet</option>
<option value="6">Consectetuer</option>
<option value="7">Adipiscing</option>
</select>
</div>
<div id="update" class="selCont">
<h2>Add new options to Stylish Select</h2>
<pre class="brush: javascript">
//add options to select and update
$('#addOptions').click(function(){
$('#my-dropdown6').append('<option value="newOpt">New Option</option>').resetSS();
});
</pre>
<p>If you add or remove options from the initial select element on the page, be sure to call the .resetSS() method on the select to update the Stylish Select replacement.</p>
<p><a id="addOptions" href="javascript:void(0)">Add new options to select and update</a></p>
<select id="my-dropdown6" name="my-dropdown">
<option value="1">Lorem</option>
<option value="2">Ipsum</option>
<option value="3">Dolor</option>
<option value="4">Sit</option>
<option value="5">Amet</option>
<option value="6">Consectetuer</option>
<option value="7">Adipiscing</option>
<option value="7">Adipiscing</option>
<option value="7">Adipiscing</option>
<option value="7">Adipiscing</option>
</select>
</div>
<div class="selCont">
<h2>Max-height for large lists</h2>
<pre class="brush: javascript">
$('#my-dropdown').sSelect({ddMaxHeight: '300px'});
</pre>
<select id="my-dropdownCountries" name="my-dropdown">
<option value="1">Afghanistan</option>
<option value="1">Akrotiri</option>
<option value="1">Albania</option>
<option value="1">Algeria</option>
<option value="1">American Samoa</option>
<option value="1">Andorra</option>
<option value="1">Angola</option>
<option value="1">Anguilla</option>
<option value="1">Antarctica</option>
<option value="1">Antigua and Barbuda</option>
<option value="1">Argentina</option>
<option value="1">Armenia</option>
<option value="1">Aruba</option>
<option value="1">Ashmore and Cartier Islands</option>
<option value="1">Australia</option>
<option value="1">Austria</option>
<option value="1">Azerbaijan</option>
<option value="1">Bahamas, The</option>
<option value="1">Bahrain</option>
<option value="1">Bangladesh</option>
<option value="1">Barbados</option>
<option value="1">Bassas da India</option>
<option value="1">Belarus</option>
<option value="1">Belgium</option>
<option value="1">Belize</option>
<option value="1">Benin</option>
<option value="1">Bermuda</option>
<option value="1">Bhutan</option>
<option value="1">Bolivia</option>
<option value="1">Bosnia and Herzegovina</option>
<option value="1">Botswana</option>
<option value="1">Bouvet Island</option>
<option value="1">Brazil</option>
<option value="1">British Indian Ocean Territory</option>
<option value="1">British Virgin Islands</option>
<option value="1">Brunei</option>
<option value="1">Bulgaria</option>
<option value="1">Burkina Faso</option>
<option value="1">Burma</option>
<option value="1">Burundi</option>
<option value="1">Cambodia</option>
<option value="1">Cameroon</option>
<option value="1">Canada</option>
<option value="1">Cape Verde</option>
<option value="1">Cayman Islands</option>
<option value="1">Central African Republic</option>
<option value="1">Chad</option>
<option value="1">Chile</option>
<option value="1">China</option>
<option value="1">Christmas Island</option>
<option value="1">Clipperton Island</option>
<option value="1">Cocos (Keeling) Islands</option>
<option value="1">Colombia</option>
<option value="1">Comoros</option>
<option value="1">Congo, Democratic Republic of the</option>
<option value="1">Congo, Republic of the</option>
<option value="1">Cook Islands</option>
<option value="1">Coral Sea Islands</option>
<option value="1">Costa Rica</option>
<option value="1">Cote d'Ivoire</option>
<option value="1">Croatia</option>
<option value="1">Cuba</option>
<option value="1">Cyprus</option>
<option value="1">Czech Republic</option>
<option value="1">Denmark</option>
<option value="1">Dhekelia</option>
<option value="1">Djibouti</option>
<option value="1">Dominica</option>
<option value="1">Dominican Republic</option>
<option value="1">Ecuador</option>
<option value="1">Egypt</option>
<option value="1">El Salvador</option>
<option value="1">Equatorial Guinea</option>
<option value="1">Eritrea</option>
<option value="1">Estonia</option>
<option value="1">Ethiopia</option>
<option value="1">Europa Island</option>
<option value="1">Falkland Islands (Islas Malvinas)</option>
<option value="1">Faroe Islands</option>
<option value="1">Fiji</option>
<option value="1">Finland</option>
<option value="1">France</option>
<option value="1">French Guiana</option>
</select>
</div>
<div class="selCont">
<h2>Intelligent positioning</h2>
<p>Stylish Select will always remain visible on the page.</p>
<select id="my-dropdown4" name="my-dropdown">
<optgroup label="Tool">
<option value="1">Opiate</option>
<option value="2">Undertow</option>
<option value="3">Aenima</option>
<option value="4">Lateralus</option>
</optgroup>
<optgroup label="A Tribe Called Quest">
<option value="5">People's Instinctive Travels and the Paths of Rhythm</option>
<option value="6">The Low End Theory</option>
<option value="7" selected="selected">Midnight Marauders</option>
<option value="8">Beats, Rhymes and Life</option>
<option value="9">The Love Movement</option>
</optgroup>
</select>
</div>
<div class="selCont">
<h2>Disabled Select</h2>
<select disabled="disabled" id="my-dropdown7" name="my-dropdown">
<option value="1">Opiate</option>
<option value="2">Undertow</option>
<option value="3">Aenima</option>
<option value="4">Lateralus</option>
<option value="9">The Love Movement</option>
</select>
</div>
<div class="selCont">
<h2>Disabled Options</h2>
<select id="my-dropdown8" name="my-dropdown">
<option value="1">Opiate</option>
<option disabled="disabled" value="2">Undertow</option>
<option value="3">Aenima</option>
<option selected="selected" value="4">Lateralus</option>
<option value="9">The Love Movement</option>
</select>
</div>
<div class="selCont">
<h2>Disabled Grouped options</h2>
<select id="my-dropdown9" name="my-dropdown">
<optgroup label="Tool" disabled="disabled">
<option value="1">Opiate</option>
<option value="2">Undertow</option>
<option value="3">Aenima</option>
<option value="4">Lateralus</option>
</optgroup>
<optgroup label="A Tribe Called Quest">
<option value="5">People's Instinctive Travels and the Paths of Rhythm</option>
<option value="6">The Low End Theory</option>
<option value="7" selected="selected">Midnight Marauders</option>
<option value="8">Beats, Rhymes and Life</option>
<option value="9">The Love Movement</option>
</optgroup>
</select>
</div>
</form>
</body>
</html>
|
