jQuery.Selector
An alternative select field. Which works on mobile and desktop. By clicks or just native scrolling. Set active and selected and call functions on new checked or active.
Still a work in progress (help is welcome)
Installation
Install the script with bower or make your own files
Bower
bower install selector --save
Embed
Initialize Selector (example)
Initialize selector in javascript:
var CountrySelector = ; CountrySelector;
Create html code for selector
Armenia Belgium Curaçao Denmark Ecuador France Georgia Hungary Iceland Japan
Embed CSS from selector.css or selector.scss
Preset checked element
In order to default set an active element. Set the active class (defined in init, default: 'active'), to the element in the list. Create html code for selector
Curaçao
Go To
In order to scroll the slider from another function, use the goto function. You can use here any jQuery selector; ex: #idofelement, .classofelement div:nth-child(3)
$selectboxCountry;
onSelectorChange / onCheckedChange / onActiveChange
You can call function on change or checked by adding them to the init of the selector
{ ; }
Mobile specific
To use mobile specific functions or other behaviour, it is possible to overwrite certain values on mobile by using:
onMobile: arrows: false transitionTime: 600 {}
All options in onMobile will overrule the default or set settings. Standard max screen width is set to 750px, you can change this by setting the mobileScreen:
mobileScreen: 640
Make sure you dont use pixels, rem, em, pt or percentages.