Skip to content

Commit cee2870

Browse files
claviskaclaviska
committed
Dropdown label class now syncs with selected option's class(es); moved info to readme
1 parent ad8df2a commit cee2870

File tree

4 files changed

+123
-180
lines changed

4 files changed

+123
-180
lines changed

‎README

Lines changed: 74 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
** Overview **
1+
jQuery selectBox
22

3-
The plugin works by piggy-backing your existing SELECT controls. Since the original controls aren’t destroyed (they’re hidden), you can easily integrate this plugin into just about any existing form. The plugin degrades gracefully, as users without JavaScript will see the default SELECT controls.
3+
A cosmetic, styleable replacement for SELECT elements.
44

5+
Homepage: http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
6+
Demo: http://labs.abeautifulsite.dev/jquery-selectBox/
57

6-
** Features **
8+
Copyright 2012 Cory LaViska for A Beautiful Site, LLC.
9+
10+
Features:
711

812
- Supports OPTGROUPS
913
- Supports standard dropdown controls
@@ -16,17 +20,12 @@ The plugin works by piggy-backing your existing SELECT controls. Since the orig
1620
- Tested in IE7-IE9, Firefox 3-4, recent webkit browsers, and Opera
1721

1822

19-
** Demo **
20-
21-
http://labs.abeautifulsite.dev/jquery-selectBox/
22-
23-
24-
** License **
23+
License:
2524

2625
Licensed under both the MIT license and the GNU GPLv2 (same as jQuery: http://jquery.org/license)
2726

2827

29-
** Usage **
28+
Usage:
3029

3130
Link to the JS file:
3231

@@ -36,48 +35,76 @@ The plugin works by piggy-backing your existing SELECT controls. Since the orig
3635

3736
<link href="jquery.selectbox.min.css" rel="stylesheet" type="text/css" />
3837

39-
** To create **
40-
41-
$("SELECT").selectBox([settings]);
42-
43-
44-
** Settings **
45-
46-
menuTransition: ['default', 'slide', 'fade']
47-
menuSpeed: [integer, 'slow', 'normal', 'fast']
48-
49-
50-
** Methods **
51-
52-
To call a method use this syntax:
53-
54-
$("SELECT").selectBox('methodName', [options]);
55-
56-
create - Creates the control (default method)
57-
destroy - Destroys the selectBox control and reverts back to the original form control
58-
disable - Disables the control (i.e. disabled="disabled")
59-
enable - Enables the control
60-
value - if passed with a value, sets the control to that value; otherwise returns the current value
61-
options - pass in either a string of HTML or a JSON object to replace the existing options
62-
control - returns the selectBox control element (an anchor tag) for working with directly
63-
refresh - syncs the UI control with the original contol's options
64-
65-
66-
** Events **
38+
To create:
6739

68-
Events are fired on the original select element. You can bind events like this:
40+
$("SELECT").selectBox([settings]);
6941

70-
$("SELECT").selectBox().change( function() { alert( $(this).val() ); } );
71-
72-
focus - Fired when the control gains focus
73-
blur - Fired when the control loses focus
74-
change - Fired when the value of a control changes
7542

43+
Settings:
44+
45+
To specify settings, use this syntax: $("SELECT").selectBox('settings', { settingName: value, ... });
46+
47+
menuTransition: ['default', 'slide', 'fade'] - the show/hide transition for dropdown menus
48+
menuSpeed: [integer, 'slow', 'normal', 'fast'] - the show/hide transition speed
49+
loopOptions: [boolean] - flag to allow arrow keys to loop through options
7650

77-
** Change Log **
7851

79-
- Refer to jquery.selectBox.js for the full change log.
52+
Methods:
53+
54+
To call a method use this syntax: $("SELECT").selectBox('methodName', [options]);
55+
56+
create - Creates the control (default method)
57+
destroy - Destroys the selectBox control and reverts back to the original form control
58+
disable - Disables the control (i.e. disabled="disabled")
59+
enable - Enables the control
60+
value - if passed with a value, sets the control to that value; otherwise returns the current value
61+
options - pass in either a string of HTML or a JSON object to replace the existing options
62+
control - returns the selectBox control element (an anchor tag) for working with directly
63+
refresh - updates the selectBox control's options based on the original controls options
64+
65+
66+
Events:
67+
68+
Events are fired on the original select element. You can bind events like this:
69+
70+
$("SELECT").selectBox().change( function() { alert( $(this).val() ); } );
8071

81-
** Known Issues **
72+
focus - Fired when the control gains focus
73+
blur - Fired when the control loses focus
74+
change - Fired when the value of a control changes
75+
76+
77+
Change Log:
78+
79+
v1.0.0 (2011-04-03) - Complete rewrite with added support for inline and multi-select controls
80+
v1.0.1 (2011-04-04) - Fixed options method so it doesn't destroy/recreate the control when called.
81+
- Added a check for iOS devices (their native controls are much better for
82+
touch-based devices; you can still use selectBox API methods for theme)
83+
- Fixed issue where IE window would lose focus on XP
84+
- Fixed premature selection issue in Webkit browsers
85+
v1.0.2 (2011-04-13) - Fixed auto-height for inline controls when control is invisible on load
86+
- Removed auto-width for dropdown and inline controls; now relies 100% on CSS
87+
for setting the width
88+
- Added 'control' method for working directly with the selectBox control
89+
v1.0.3 (2011-04-22) - Fixed bug in value method that errored if the control didn't exist
90+
v1.0.4 (2011-04-22) - Fixed bug where controls without any options would render with incorrect heights
91+
v1.0.5 (2011-04-22) - Removed 'tick' image in lieu of background colors to indicate selection
92+
- Clicking no longer toggles selected/unselected in multi-selects; use CTRL/CMD and
93+
SHIFT like in normal browser controls
94+
- Fixed bug where inline controls would not receive focus unless tabbed into
95+
v1.0.6 (2011-04-29) - Fixed bug where inline controls could be "dragged" when selecting an empty area
96+
v1.0.7 (2011-05-18) - Expanded iOS check to include Android devices as well
97+
- Added autoWidth option; set to false on init to use CSS widths for dropdown menus
98+
v1.0.8 (2011-12-29) - Added refresh method (contributed by xjamundx)
99+
- Hide menus when window is resized or scrolled (#9)
100+
- Fixed autoWidth data issue (#13)
101+
- SelectBox now gains focus when associated label is clicked
102+
- Dropdown now inherits classes from original control (suffixed by -selectBox-dropdown-menu)
103+
- Fixed meta/ctrl key issue (#41)
104+
- Expanded iOS/Android check to include Windows 7 Phone and BlackBerry
105+
v1.0.9 (2012-01-04) - Dropdown label class now syncs with selected option's class(es)
106+
107+
108+
Known Issues:
82109

83110
- The blur and focus callbacks are not very reliable in IE7. The change callback works fine.

‎index.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -143,10 +143,10 @@ <h1>$("SELECT").selectBox();</h1>
143143
<p>
144144
<label for="standard-dropdown">Standard Dropdown</label><br />
145145
<select id="standard-dropdown" name="standard-dropdown" class="custom-class1 custom-class2">
146-
<option id="testing" data-1="sdcnslc" data-pouet="pouetos" value="1asdasd">Item 1</option>
147-
<option value="2">Item 2</option>
148-
<option value="3">Item 3 has &lt;a&gt; really long label but it won't affect the control's display at all</option>
149-
<option value="4">Item 4</option>
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 &lt;a&gt; really long label but it won't affect the control's display at all</option>
149+
<option value="4" class="test-class-4">Item 4</option>
150150
<option value="5" disabled="disabled">Item 5 (disabled)</option>
151151
<option value="6">Item 6</option>
152152
<option value="7">Item 7</option>
@@ -157,7 +157,7 @@ <h1>$("SELECT").selectBox();</h1>
157157
<option value="12">Item 12</option>
158158
<option value="13">Item 13</option>
159159
<option value="14">Item 14</option>
160-
<option value="15" selected="selected">Item 15</option>
160+
<option value="15">Item 15</option>
161161
<option value="16">Item 16</option>
162162
<option value="17">Item 17</option>
163163
<option value="18">Item 18</option>

0 commit comments

Comments
 (0)