Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
selectboxit
Advanced tools
Readme
A jQuery plugin that progressively enhances an HTML Select Box into a single option dropdown list. The dropdown list can be optionally styled with Twitter Bootstrap, jQueryUI ThemeRoller, or jQuery Mobile, optionally animated with jQueryUI show/hide effects, and works on Desktop, Tablet, and Mobile browsers.
Notable Features
Styleable with Twitter Bootstrap, jQueryUI Themeroller, and jQuery Mobile
Supports Desktop, Tablet, and Mobile browsers
Supports all jQuery and jQueryUI show/hide effects (optional)
Supports all Twitter Bootstrap (Glyphicons) and jQueryUI/custom icons
Includes ARIA (Accessible Rich Internet Applications) support
Full keyboard search and navigation support
An event API triggered on the original select box element that calls the plugin
A method API providing methods to interact with the dropdown list (i.e. Search, Open, Disable, Set Options).
Passes jsHint with no errors
Selected, Disabled, and Optgroup Support
Easily extendable to allow developers to create new widgets
##Requirements jQuery 1.8.3+ (It is always recommended to use the latest version of jQuery)
jQueryUI Widget Factory 1.10.0+ (It is always recommended to use the latest version of the jQueryUI Widget Factory)
##Desktop Browser Support IE8+, Firefox 4+, Chrome, Safari 4+, Opera 11+ (Other browsers may work, but I did not test on them)
Note: The CSS3 background-size
property is used for the icon images, which is only supported in IE9+
##Mobile/Tablet Browser Support iOs 3+, Android 2.1+ (Other browsers may work, but I did not test on them)
##Unit Tests All unit tests are written using the Jasmine Framework
##Contributing Take care to maintain the existing coding style. Add Jasmine unit tests for any new or changed functionality. Lint and test your code using grunt.
If you plan to contribute to SelectBoxIt
in the future, keep in mind that you should make sure your code passes the Grunt checks.
To set up the SelectBoxIt grunt/node.js dependencies, first make sure you have PhantomJS installed, which is a headless browser. Unfortunately PhantomJS cannot be installed automatically.
Next, navigate to within the jquery.selectBoxIt.js folder and type `npm install' (this should install grunt and a few other node.js libraries).
Next, type grunt
Note: If you are on Windows, remember you need to run the grunt command using grunt.cmd
. Also, if you have trouble getting the Jasmine Unit Tests to work with PhantomJS 1.5 (the current release), install PhantomJS 1.3.
After you have verified your code, send a pull request to the SelectBoxIt
dev branch. After you send a pull request, you will hear back from me shortly after I review your code.
You'll find source code in the "src" subdirectory!
##Forking If you find that you need a feature that SelectBoxIt does not currently support, either let me know via the SelectBoxIt issue tracker, or fork SelectBoxIt on Github and easily extend SelectBoxIt to create your own widget!
##Change Log
3.8.0
- October 4, 2013
Bug Fixes
Improvements
3.7.0
- August 13, 2013
Bug Fixes
Improvements
3.6.0
- June 23, 2013
BREAKING CHANGES
jQuery v1.8.3 or greater is now required. The reason for the bump is a jQuery bug associated with passing an array of jQuery objects to the append()
method. #175
The size
attribute is no longer supported. You must now use the data-size
attribute to specify size. The reason for the change is because when an HTML select box has a size
attribute, you cannot retrieve the value of the select box (terrible) #170
New Options
hideCurrent
- Hides the currently selected drop down option from the list. #172Bug Fixes
destroy
event from propagating to parent elements #181Improvements
populate
option and add()
method. This change makes it much easier to use the jQuery ajax()
method to dynamically add options. #171showFirstOption
option with mobile/tablet browsers, the first drop down option will now be disabled. Since hiding a select box option is not in the W3C specification, it will not yet be supported. #179option-click
event is now triggered along with the change event. #184setOption()
and setOptions()
methods to handle all option updates. #1853.5.0
- May 10, 2013
New Options
dynamicPositioning
- Determines whether or not the drop down list should fit inside it's viewport.Bug Fixes
3.4.0
- April 26, 2013
BREAKING CHANGES jQuery 1.7+ is now required jQueryUI Widget Factory 1.10.0+ is now required
New Options
populate
- Convenience option that accepts JSON data, an array, a single object, or valid HTML string to add options to the drop down listselectedtext
- Allows the ability to change what is displayed in the collapsed dropdown when an item is selected. Issue #151 **Special thanks to freakingawesome for this new option.size
- Support the size
attribute to determine the maximum number of visible drop down list options that should be shown. Possible values include auto
or a number > 1data-preventclose
HTML5 data attribute to allow you to specify which option selections should not close the drop downNew Methods
add(data, callback)
- Adds drop down options using JSON data, an array, a single object, or valid HTML stringremove(indexes, callback)
- Removes drop down list options using an index or array of indexesBug Fixes
destroy()
method logic and am correctly reapplying the original select box style
attributerefresh()
bug #144Improvements
on()
method and adding event delegation instead of direct binding in a few placeschange
event when using the defaultText option #146dynamic positioning
logic to not set a max-height
in unneccessary placeswait()
logic to internally use the jQueryUI delay()
methodfocus
and hover
CSS pseudo classes being applied in the default themesilk
to the UA detection to help detect Amazon Kindle Fire devices3.3.0
- March 19, 2013
New Options
autoWidth
- Makes sure the width of the drop down is wide enough to fit all of the drop down options. BREAKING CHANGE - This is now the default. #129html
- Determines whether or not option text is rendered as html or as text. #136Bug Fixes
Improvements
3.2.0
- February 28, 2013
New Options
Added copyClasses
option which allows the user to specify if native classes should be copied to the button, the container element, or neither. For backwards compatibility, defaults to "button". #124
Added a nativeMousdown
option to allow the drop down to be opened programmatically using the mousedown event. Currently, the open event logic needs to be updated to allow this. #89
Add a customShowHideEvent
option to which prevents a drop down from opening on click or mousedown, which allows a user to open/close the drop down with a custom event handler. #89
Bug Fixes
open()
, and close()
methods from opening the desktop drop down list with mobile devices3.1.0
- February 20, 2013
IMPORTANT - Only pixel widths for the drop down are guaranteed to work. Do not use percentage based widths or width:auto;
max-width
CSS attribute for the drop down text to make sure even small select boxes would look correctly.3.0.0
- February 20, 2013
$("select").data("selectBox-selectBoxIt");
vertical-align:middle;
to help with vertical label alignment #1152.9.9
- January 20, 2013
2.9.0
- January 15, 2013
2.8.0
- January 12, 2013
IMPORTANT: Dropped IE7 support - This does not mean new features will not work in IE7, but instead that they will not be tested in IE7.
2.7.0
- January 11, 2013
2.6.0
- January 8, 2013
Added support for styling the currently selected
drop down option via the selectboxit-selected CSS class #86
Fixed refresh()
method mobile bug #68
Refactored and fixed bugs for SelectBoxIt internal event triggering: All custom events now return an object containing both the currently selected select box and drop down options
2.5.0
- January 6, 2013
Default Behavior Change
SelectBoxIt will no longer select a drop down option (and trigger the change event on the original select box) when a user navigates to an option using the up and down arrow keys via the keyboard, or searches for an option using the keyboard. An option will only be selected
when a user clicks an option or presses the enter
key when an option is actively "focused". #85
Added a new option, aggressiveChange, which will select a drop down option (and trigger the change event on the original select box) when a user navigates to an option using the up and down arrow keys via the keyboard, or searchs for an option using the keyboard.
There is now always an "active" class when drop down options are moused over. #84
2.4.0
- January 2, 2013
2.3.0
- December 18, 2012
Added the disableOption()
and enableOption()
methods
Fixed disabled state CSS class bug. Now allows all supported themes (Twitter Bootstrap, jQueryUI, and jQuery Mobile) CSS class's are able to take effect
Improved custom event handling. The moveDown, moveUp, search, option-click, disable-option, and enable-option custom events now pass an object back in the second argument of the callback function event handler. Within the object.elem property, is the single select box option that was interacted with.
Added Travis CI testing support
Note: If you are using Twitter Bootstrap as your theme, then it is recommended to upgrade to Twitter Bootstrap v2.2.0 or greater ()
2.2.0
- December 15, 2012
data-theme
supporting2.2.0 RC1
- December 13, 2012
Added jQuery Mobile CSS Theming Support
Added the selectOption() method
2.1.0
- December 3, 2012
Added the native option: Allows you to trigger the native select box element when a user is interacting with the drop down
2.0.0
- November 9th, 2012
Greatly improved dynamic positioning. SelectBoxIt now makes sure that the drop down list never runs off of the page (no matter how small the viewport is)
Improved support for enclosing a drop down arrow inside of a box (by setting a border)
Simplified mobile device checking for iOs, Android, Blackberry, Opera Mini, and Windows mobile devices (Removed the long regex supplied by detectmobilebrowsers.com)
1.9.0
- October 31, 2012
Added nostyle option
Updated the CSS to remove tag names, remove IE7 hack, and improve CSS specificity
Thanks to @gavacho for the contributions
1.8.0
- October 27, 2012
**Multiple Bug Fixes and Features Added:
Fixed IE7 focus bug
Removed all CSS attributes from the JS (to allow for maximum flexibility when changing styles) #34
SelectBoxIt now copies over all classes and inline styles from the original select box to the new drop down #34
Refresh method bug fix #32
1.7.0
- October 12, 2012
**Multiple Bug Fixes**
Allow users to programmatically change the value of the select element #28
Removed unique id attributes from select boxes that do not originally include an id attribute #27
Applied HTML attribute encoding for quotes inside of option values #8
Fixed jQuery 1.8.2 keyboard compatibility bug #26
1.6.0
- September 28, 2012
1.5.0
- September 26, 2012
1.4.0
- September 23, 2012
BIG NEWS: Added Mobile and Tablet Support
Added the isMobile option
1.3.0
- September 9, 2012
1.2.0
- September 6, 2012
Fixed IE8 keyboard navigation and search bug
Added a keydownOpen option to allow the dropdown list to be visible if the user presses the up or down arrow key
1.1.0
- September 5, 2012
Added Twitter Bootstrap Theming Support
Added a refresh public method
Added the destroy method into the SelectBoxIt core
1.0.0
- August 8, 2012 Stable 1.0 release
Upgraded Homepage/Documentation
The plugin was split into modules (multiple files) and a custom build process was created
Big fixes/code clean up
0.9.0
- May 21, 2012 Approaching a stable 1.0 release
0.8.0
- May 15, 2012 Approaching a stable 1.0 release
disabled
use cases0.7.0
- May 10, 2012 Documentation
Added optgroup support to allow dropdown list options to be put in subgroups.
Bug fixes to the change
and focus
Event API handlers
0.6.0
- May 3, 2012 Documentation
Added jQueryUI and custom icon support to allow icons to be used for the dropdown list and also alongside individual dropdown options. You can specify the class names that you want to use to show the appropriate icon (set the background-image property inside of your CSS). There are two ways to do this (HTML5 data attributes or SelectBoxIt options)
Added support for three new HTML5 data attributes to be used with the original select box element. Use cases for each are described below.
Added support for two new options. Use cases for each are described below.
data-icon
HTML5 data attributedata-downarrow
HTML5 data attribute0.5.0
- April 29, 2012 MAJOR REWRITE
SelectBoxIt
has been rewritten using the jQueryUI Widget Factory
! This means that SelectBoxIt
depends on both jQuery and the jQueryUI Widget Factory. This also means that there are a few API changes that are not backwards compatible...
getOption()
, getOptions()
, and create()
were all removed from the Method API$(":selectBox-selectBoxIt")
Grunt
Integration. SelectBoxIt
now uses grunt to run jsHint for code quality checking, Jasmine for unit testing, and UglifyJS for minification.
Removed AMD
Support
0.4.0
- April 28, 2012
AMD Support
. If AMD
support is found, SelectBoxIt is wrapped in a define module
.
UMD Patternsdisabled
HTML property for individual select box options0.3.0
- April 25, 2012
A new option, defaultText
, was added to allow users to specify the default text of the dropdown list that is not linked to a specific select box option
The disabled
HTML property is now supported for individual select box options
When a user presses the esc
keyboard key, the dropdown options list will now close (become hidden)
0.2.0
- April 24, 2012
This release requires you to use jQuery 1.6.1+.
You are no longer required to have select box option values be the same as the select box option text.
IE bug fix to prevent default dropdown text from being selectable
0.1.0
- April 14, 2012
Contributors
Greg Franko - @gfranko
Thomas von Deyen - @tvdeyen
Ron 'coyote' Lussier - @lenscraft
Copyright (c) 2013 Greg Franko Licensed under the MIT license.
FAQs
A jQuery plugin that progressively enhances an HTML Select Box into a single option dropdown list. The dropdown list can be optionally styled with jQuery ThemeRoller and optionally animated with jQueryUI show/hide effects.
The npm package selectboxit receives a total of 310 weekly downloads. As such, selectboxit popularity was classified as not popular.
We found that selectboxit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.