celesta
v0.3.1
Published
Custom selectbox with look and feel of native one
Downloads
9
Maintainers
Readme
Celesta
Custom selectbox with look and feel of native one. (Just see the demo.)
- Pure JavaScript library working on top of native browser selectbox
- Looks like
<select>
, feels like<select>
, and quacks like<select>
- Fully skinnable with CSS (including dropdown)
Browser support
- IE 10+ (or 9+ with
classList
polyfill) - Opera 11.6+
- Safari 5.1.4+
- Firefox 4+
- Chrome 8+
- (?) iOS Safari 6+
- (?) Android Browser 4+ (or 2+ with
classList
andbind
polyfills) - (?) Opera Mobile 12+
- (?) IE Mobile 10+
Basic usage
new Celesta(document.getElementById('my_select'));
Or, a little more advanced example:
var selectbox = document.querySelector('.some-select');
var celesta = new Celesta(selectbox, {
space_key_open: false,
options_nav_cycling: true,
closed_options_pagekey_jump_by: 5
});
celesta.selectOption(3);
celesta.addEventListener('open', myCallbackFunction);
celesta.open();
celesta.hoverOption(6);
celesta.close();
celesta.refresh();
celesta.destroy();
For more advanced usage, see Options, Methods and Events reference. Also, you can see the demo.
Features
- Support for optgroups, disabled state, disabled options/groups
- Classname inheritance for select and options
- Element and dropdown fully skinnable with CSS (no hardcoded CSS properties)
- Automatic dropdown reverse to fit browser window viewable area
- Dropdown scrolling:
- native browser way, or
- custom scrollbar libs such as perfect-scrollbar
- Seemless dropdown fallback on mobile devices
- Mouse support:
- Focus with associated label click
- Open with click
- Highlight option with mouse hover
- Select & close with option click
- Close with outer click or outer mousewheel
- Keyboard support:
- Navigatable with Tab
- Open with Space or Enter
- Navigate through options with arrow keys (↑ & ↓), PageUp or PageDown
- Find option by keyboard typing (quicksearch)
- Close with Esc, select & close with Enter
- Interaction:
- Source
<select>
remains in DOM - Option select interaction: Celesta ↔ native select
- Resets value on form reset
- JavaScript API to control Celesta instance
- Events handling with
addEventListener
- Source
- Falls back to native selectbox if cannot initialize
- Plenty of options to customize UX; see the demo to play with some of them
- No external library or framework dependencies
- Usage mode: AMD, CommonJS or direct
<script>
- Available in
npm
andbower
Beta warning
This library is still under construction. API methods, option names, event callback interface, CSS classnames etc. can be changed at any time.
Todo list & known issues
multiple
select support- jQuery plugin
- Make work better with jScrollPane
- UX testing on mobile devices
- (?) Methods call chaining
- (?) Link to source elements, not indexes (benchmarking needed)
- (?) Better feature detection on initialization
- Skin generator
Never to be implemented
- Significant UI/UX change compared to native selectbox (if you want something "fancier", try Chosen or things like that)
Version history
- 0.3.1 (2015-11-05): Minor fix for mobile detection
- 0.3.0 (2015-11-05):
- Seemless dropdown fallback on mobile devices
- Source select is moved inside Celesta container (no more kept next to the container)
- 0.2.0 (2015-11-04):
- Perfect PageUp/PageDown behavior
- Allow disabled option to be selected initially
- 0.1.0 (2015-10-12): Initial release