Skip to content

Commit 45bf78b

Browse files
claviskaclaviska
committed
Minor code improvements, whitespace fixes, etc.; added open/beforeopen/close/beforeclose events courtesy of acdvorak
1 parent 37f054d commit 45bf78b

File tree

5 files changed

+245
-188
lines changed

5 files changed

+245
-188
lines changed

‎index.html

Lines changed: 191 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
22
<html xmlns="http://www.w3.org/1999/xhtml">
3-
<head>
4-
<title>jQuery selectBox (select replacement plugin)</title>
3+
<head>
4+
<title>jQuery selectBox (select replacement plugin)</title>
55
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
66
<script type="text/javascript" src="jquery.selectBox.js"></script>
7-
<link type="text/css" rel="stylesheet" href="jquery.selectBox.css"></script>
7+
<link type="text/css" rel="stylesheet" href="jquery.selectBox.css" />
88

99
<script type="text/javascript">
1010

@@ -116,13 +116,13 @@
116116

117117
</script>
118118

119-
</head>
119+
</head>
120120

121-
<body style="font-family: Arial, Helvetica, sans-serif; font-size: 14px;">
121+
<body style="font-family: Arial, Helvetica, sans-serif; font-size: 14px;">
122122

123-
<form style="background: #FFF; padding: 20px; border: solid 2px #DDD;">
123+
<form style="background: #FFF; padding: 20px; border: solid 2px #DDD;">
124124

125-
<div id="console" style="width: 50%; font-family: 'Courier New', monospace; border: solid 2px #000; background: #000; color: #FFF; height: 350px; overflow: auto; padding: 10px; float: right;"></div>
125+
<div id="console" style="width: 50%; font-family: 'Courier New', monospace; border: solid 2px #000; background: #000; color: #FFF; height: 350px; overflow: auto; padding: 10px; float: right;"></div>
126126

127127
<div style="background: #FFFCCC; border: solid 2px #DDD999; padding: 1px 10px; width: 50%; float: right; clear: right; margin: 1em 0;">
128128
<p><strong>Note</strong></p>
@@ -138,160 +138,188 @@
138138
</p>
139139
</div>
140140

141-
<h1>$("SELECT").selectBox();</h1>
142-
143-
<p>
144-
<label for="standard-dropdown">Standard Dropdown</label><br />
145-
<select id="standard-dropdown" name="standard-dropdown" class="custom-class1 custom-class2" style="width: 200px;">
146-
<option value="1" class="test-class-1">Item 1</option>
147-
<option value="2" class="test-class-2" selected="selected">Item 2</option>
148-
<option value="3" class="test-class-3">Item 3 has a really long label that will not interfere with the control’s width</option>
149-
<option value="4" class="test-class-4">Item 4</option>
150-
<option value="5" disabled="disabled">Item 5 (disabled)</option>
151-
<option value="6">Item 6</option>
152-
<option value="7">Item 7</option>
153-
<option value="8">Item 8</option>
154-
<option value="9">Item 9</option>
155-
<option value="10">Item 10</option>
156-
<option value="11">Item 11</option>
157-
<option value="12">Item 12</option>
158-
<option value="13">Item 13</option>
159-
<option value="14">Item 14</option>
160-
<option value="15">Item 15</option>
161-
<option value="16">Item 16</option>
162-
<option value="17">Item 17</option>
163-
<option value="18">Item 18</option>
164-
<option value="19">Item 19</option>
165-
<option value="20">Item 20</option>
166-
</select>
167-
</p>
168-
169-
<p>
170-
Empty Dropdown<br />
171-
<select name="empty-dropdown"></select>
172-
</p>
173-
174-
<p>
175-
<label for="multi-select-control">Multi-select Control</lable><br />
176-
<select id="multi-select-control" name="multi-select-control" multiple="multiple">
177-
<option value="1" selected="selected">Item 1</option>
178-
<option value="2">Item 2</option>
179-
<option value="3">Item 3</option>
180-
<option value="4">Item 4</option>
181-
<option value="5" disabled="disabled">Item 5 (disabled)</option>
182-
</select>
183-
</p>
184-
185-
<p>
186-
Empty Multi-select<br />
187-
<select name="empty-multi-select" size="5" multiple="multiple"></select>
188-
</p>
189-
190-
<p>
191-
Multi-select with few options<br />
192-
<select name="multi-select-few-options" multiple="multiple" size="5">
193-
<option value="1" selected="selected">Item 1</option>
194-
<option value="2">Item 2</option>
195-
<option value="3">Item 3</option>
196-
</select>
197-
</p>
198-
199-
<p>
200-
No multi-select, size = 4<br />
201-
<select name="no-multi-with-size-4" size="4">
202-
<option value="1" selected="selected">Item 1</option>
203-
<option value="2">Item 2</option>
204-
<option value="3">Item 3 has &lt;a&gt; really long label but it won't affect the control's display at all</option>
205-
<option value="4">Item 4</option>
206-
<option value="5" disabled="disabled">Item 5 (disabled)</option>
207-
</select>
208-
</p>
209-
210-
<p>
211-
Standard control with OPTGROUPS<br />
212-
<select name="standard-with-optgroups">
213-
<optgroup label="Section 1">
214-
<option value="1">Item 1</option>
215-
<option value="2">Item 2</option>
216-
<option value="3">Item 3</option>
217-
<option value="4">Item 4</option>
218-
</optgroup>
219-
<optgroup label="Section 2">
220-
<option value="5">Item 5</option>
221-
<option value="6">Item 6</option>
222-
<option value="7">Item 7</option>
223-
<option value="8">Item 8</option>
224-
</optgroup>
225-
<optgroup label="Section 3">
226-
<option value="9">Item 9</option>
227-
<option value="10">Item 10</option>
228-
<option value="11">Item 11</option>
229-
<option value="12">Item 12</option>
230-
</optgroup>
231-
<optgroup label="Section 4">
232-
<option value="13">Item 13</option>
233-
<option value="14">Item 14</option>
234-
<option value="15">Item 15</option>
235-
<option value="16">Item 16</option>
236-
</optgroup>
237-
<optgroup label="Section 5">
238-
<option value="17">Item 17</option>
239-
<option value="18">Item 18</option>
240-
<option value="19">Item 19</option>
241-
<option value="20">Item 20</option>
242-
</optgroup>
243-
<optgroup label="Section 6">
244-
<option value="21">Item 21</option>
245-
<option value="22">Item 22</option>
246-
<option value="23">Item 23</option>
247-
<option value="24">Item 24</option>
248-
</optgroup>
249-
</select>
250-
</p>
251-
252-
<p>
253-
Multi-select control with OPTGROUPS<br />
254-
<select name="multi-with-optgroups" multiple="multiple">
255-
<optgroup label="Section 1">
256-
<option value="1">Item 1</option>
257-
<option value="2">Item 2</option>
258-
<option value="3">Item 3</option>
259-
<option value="4">Item 4</option>
260-
</optgroup>
261-
<optgroup label="Section 2">
262-
<option value="5">Item 5</option>
263-
<option value="6">Item 6</option>
264-
<option value="7">Item 7</option>
265-
<option value="8">Item 8</option>
266-
</optgroup>
267-
<optgroup label="Section 3">
268-
<option value="9">Item 9</option>
269-
<option value="10">Item 10</option>
270-
<option value="11">Item 11</option>
271-
<option value="12">Item 12</option>
272-
</optgroup>
273-
<optgroup label="Section 4">
274-
<option value="13">Item 13</option>
275-
<option value="14">Item 14</option>
276-
<option value="15">Item 15</option>
277-
<option value="16">Item 16</option>
278-
</optgroup>
279-
<optgroup label="Section 5">
280-
<option value="17">Item 17</option>
281-
<option value="18">Item 18</option>
282-
<option value="19">Item 19</option>
283-
<option value="20">Item 20</option>
284-
</optgroup>
285-
<optgroup label="Section 6">
286-
<option value="21">Item 21</option>
287-
<option value="22">Item 22</option>
288-
<option value="23">Item 23</option>
289-
<option value="24">Item 24</option>
290-
</optgroup>
291-
</select>
292-
</p>
293-
294-
<p style="width: 40%; margin-top: 30px; padding-top: 20px; border-top: solid 1px #DDD;">
141+
<h1>$("SELECT").selectBox();</h1>
142+
143+
<p>
144+
<label for="standard-dropdown">Standard Dropdown</label><br />
145+
<select id="standard-dropdown" name="standard-dropdown" class="custom-class1 custom-class2" style="width: 200px;">
146+
<option value="1" class="test-class-1">Item 1</option>
147+
<option value="2" class="test-class-2" selected="selected">Item 2</option>
148+
<option value="3" class="test-class-3">Item 3 has a really long label that will not interfere with the control's width</option>
149+
<option value="4" class="test-class-4">Item 4</option>
150+
<option value="5" disabled="disabled">Item 5 (disabled)</option>
151+
<option value="6">Item 6</option>
152+
<option value="7">Item 7</option>
153+
<option value="8">Item 8</option>
154+
<option value="9">Item 9</option>
155+
<option value="10">Item 10</option>
156+
<option value="11">Item 11</option>
157+
<option value="12">Item 12</option>
158+
<option value="13">Item 13</option>
159+
<option value="14">Item 14</option>
160+
<option value="15">Item 15</option>
161+
<option value="16">Item 16</option>
162+
<option value="17">Item 17</option>
163+
<option value="18">Item 18</option>
164+
<option value="19">Item 19</option>
165+
<option value="20">Item 20</option>
166+
</select>
167+
</p>
168+
169+
<p>
170+
Empty Dropdown<br />
171+
<select name="empty-dropdown"></select>
172+
</p>
173+
174+
<p>
175+
<label for="multi-select-control">Multi-select Control</label><br />
176+
<select id="multi-select-control" name="multi-select-control" multiple="multiple">
177+
<option value="1" selected="selected">Item 1</option>
178+
<option value="2">Item 2</option>
179+
<option value="3">Item 3</option>
180+
<option value="4">Item 4</option>
181+
<option value="5" disabled="disabled">Item 5 (disabled)</option>
182+
</select>
183+
</p>
184+
185+
<p>
186+
Empty Multi-select<br />
187+
<select name="empty-multi-select" size="5" multiple="multiple"></select>
188+
</p>
189+
190+
<p>
191+
Multi-select with few options<br />
192+
<select name="multi-select-few-options" multiple="multiple" size="5">
193+
<option value="1" selected="selected">Item 1</option>
194+
<option value="2">Item 2</option>
195+
<option value="3">Item 3</option>
196+
</select>
197+
</p>
198+
199+
<p>
200+
No multi-select, size = 4<br />
201+
<select name="no-multi-with-size-4" size="4">
202+
<option value="1" selected="selected">Item 1</option>
203+
<option value="2">Item 2</option>
204+
<option value="3">Item 3 has &lt;a&gt; really long label but it won't affect the control's display at all</option>
205+
<option value="4">Item 4</option>
206+
<option value="5" disabled="disabled">Item 5 (disabled)</option>
207+
</select>
208+
</p>
209+
210+
<p>
211+
Standard control with OPTGROUPS<br />
212+
<select name="standard-with-optgroups">
213+
<optgroup label="Section 1">
214+
<option value="1">Item 1</option>
215+
<option value="2">Item 2</option>
216+
<option value="3">Item 3</option>
217+
<option value="4">Item 4</option>
218+
</optgroup>
219+
<optgroup label="Section 2">
220+
<option value="5">Item 5</option>
221+
<option value="6">Item 6</option>
222+
<option value="7">Item 7</option>
223+
<option value="8">Item 8</option>
224+
</optgroup>
225+
<optgroup label="Section 3">
226+
<option value="9">Item 9</option>
227+
<option value="10">Item 10</option>
228+
<option value="11">Item 11</option>
229+
<option value="12">Item 12</option>
230+
</optgroup>
231+
<optgroup label="Section 4">
232+
<option value="13">Item 13</option>
233+
<option value="14">Item 14</option>
234+
<option value="15">Item 15</option>
235+
<option value="16">Item 16</option>
236+
</optgroup>
237+
<optgroup label="Section 5">
238+
<option value="17">Item 17</option>
239+
<option value="18">Item 18</option>
240+
<option value="19">Item 19</option>
241+
<option value="20">Item 20</option>
242+
</optgroup>
243+
<optgroup label="Section 6">
244+
<option value="21">Item 21</option>
245+
<option value="22">Item 22</option>
246+
<option value="23">Item 23</option>
247+
<option value="24">Item 24</option>
248+
</optgroup>
249+
</select>
250+
</p>
251+
252+
<p>
253+
Multi-select control with OPTGROUPS<br />
254+
<select name="multi-with-optgroups" multiple="multiple">
255+
<optgroup label="Section 1">
256+
<option value="1">Item 1</option>
257+
<option value="2">Item 2</option>
258+
<option value="3">Item 3</option>
259+
<option value="4">Item 4</option>
260+
</optgroup>
261+
<optgroup label="Section 2">
262+
<option value="5">Item 5</option>
263+
<option value="6">Item 6</option>
264+
<option value="7">Item 7</option>
265+
<option value="8">Item 8</option>
266+
</optgroup>
267+
<optgroup label="Section 3">
268+
<option value="9">Item 9</option>
269+
<option value="10">Item 10</option>
270+
<option value="11">Item 11</option>
271+
<option value="12">Item 12</option>
272+
</optgroup>
273+
<optgroup label="Section 4">
274+
<option value="13">Item 13</option>
275+
<option value="14">Item 14</option>
276+
<option value="15">Item 15</option>
277+
<option value="16">Item 16</option>
278+
</optgroup>
279+
<optgroup label="Section 5">
280+
<option value="17">Item 17</option>
281+
<option value="18">Item 18</option>
282+
<option value="19">Item 19</option>
283+
<option value="20">Item 20</option>
284+
</optgroup>
285+
<optgroup label="Section 6">
286+
<option value="21">Item 21</option>
287+
<option value="22">Item 22</option>
288+
<option value="23">Item 23</option>
289+
<option value="24">Item 24</option>
290+
</optgroup>
291+
</select>
292+
</p>
293+
294+
<p>
295+
<label for="obscured-dropdown">Dropdown positioned above control</label> <br />
296+
<select id="obscured-dropdown" name="obscured-dropdown" style="width: 200px">
297+
<option value="1" class="test-class-1">Item 1</option>
298+
<option value="2" class="test-class-2" selected="selected">Item 2</option>
299+
<option value="3" class="test-class-3">Item 3 has a really long label that will not interfere with the control's width</option>
300+
<option value="4" class="test-class-4">Item 4</option>
301+
<option value="5" disabled="disabled">Item 5 (disabled)</option>
302+
<option value="6">Item 6</option>
303+
<option value="7">Item 7</option>
304+
<option value="8">Item 8</option>
305+
<option value="9">Item 9</option>
306+
<option value="10">Item 10</option>
307+
<option value="11">Item 11</option>
308+
<option value="12">Item 12</option>
309+
<option value="13">Item 13</option>
310+
<option value="14">Item 14</option>
311+
<option value="15">Item 15</option>
312+
<option value="16">Item 16</option>
313+
<option value="17">Item 17</option>
314+
<option value="18">Item 18</option>
315+
<option value="19">Item 19</option>
316+
<option value="20">Item 20</option>
317+
</select>
318+
</p>
319+
320+
<hr align="left" style="height: 1px; background-color: #DDD; width: 40%; margin-top: 1.5em; border: 0;" />
321+
322+
<p>
295323
Methods:
296324
<input type="button" id="destroy" value="Destroy" />
297325
<input type="button" id="create" value="Create" />
@@ -317,8 +345,8 @@ <h1>$("SELECT").selectBox();</h1>
317345

318346
<div style="clear: both;"></div>
319347

320-
</form>
348+
</form>
321349

322-
</body>
350+
</body>
323351

324352
</html>

‎jquery.selectBox.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
border: solid 1px #BBB;
66
line-height: 1.5;
77
text-decoration: none;
8+
text-align: left;
89
color: #000;
910
outline: none;
1011
vertical-align: middle;

0 commit comments

Comments
 (0)