March 11, 2012 at 18:39ikSelect - the perfect plugin for styling selects
About a year ago, I already did a detailed review of jQuery plugins for styling selects . The result remained disappointing, each of them had its own shortcomings, and I could not find what I wanted. Quite a lot of developers unsubscribed in the comments, but we all agreed that there was no perfect plug-in, and that we had to work hard on any of them with a file.
Recently, Selectik slipped on the hub - a pretty good plugin, but not without flaws . Judging by GitHub , work on it is still ongoing, but so far it is not very convenient, and its main problems still have a place to be.
Recently a stranger wrote to me and asked to test his ikSelect plugin, which he tried to write as close as possible to the ideal. I liked the plugin so much that after extensive testing and bug fixing, I decided to write a review and put an end to this topic, as well as help the sensible developer get on the hub
In a nutshell: he can do almost everything that a standard select can do, while he perfectly stylizes and adapts to the particular implementation of selects from different browsers. The plugin completely copies the appearance of the native Mac OS X select, but it can be styled without any problems via css.
This is how it looks closed:
This is how it looks open:
Volume: 11KB
Pluses:
The plugin stylizes the field itself, but when clicked, it invokes the native behavior of the browser. Tested on iOS (Safari) and Android (2.3 native, Firefox):
In Opera mini, standard selections remain, to avoid reloading the page when opening the list. In Opera mobile it works the same as in the desktop version.
PS Thanks for the invite sent to the author of the i10k plugin .
Recently, Selectik slipped on the hub - a pretty good plugin, but not without flaws . Judging by GitHub , work on it is still ongoing, but so far it is not very convenient, and its main problems still have a place to be.
Recently a stranger wrote to me and asked to test his ikSelect plugin, which he tried to write as close as possible to the ideal. I liked the plugin so much that after extensive testing and bug fixing, I decided to write a review and put an end to this topic, as well as help the sensible developer get on the hub
In a nutshell: he can do almost everything that a standard select can do, while he perfectly stylizes and adapts to the particular implementation of selects from different browsers. The plugin completely copies the appearance of the native Mac OS X select, but it can be styled without any problems via css.
This is how it looks closed:
This is how it looks open:
Why is he better than the rest?
Volume: 11KB
Pluses:
- works in all browsers (IE6 +, FF, Opera, Chrome, Safari), including mobile
- automatically adjusts the width
- always opens on the visible part of the page (the so-called "smart positioning"), both in horizontal and vertical position
- allows you to specify the maximum height of the drop-down list
- allows to group options (optgroup)
- fully controlled from the keyboard (including responding to transition Tab'om, PgUp, PgDown, Home, End)
- has a selection of the first letters (not only one, but also subsequent)
- supports scrolling with mouse wheel
- inserted inline-block
- works great with huge lists (1000+ items)
- leaves standard select when javascript is disabled
- has a great API
- does not allow to select several items at once (multiselect)
- does not stylize the scrollbar of the drop-down list (since it affects the speed of work too much)
- not running for beer
Mobile Browsers
The plugin stylizes the field itself, but when clicked, it invokes the native behavior of the browser. Tested on iOS (Safari) and Android (2.3 native, Firefox):
In Opera mini, standard selections remain, to avoid reloading the page when opening the list. In Opera mobile it works the same as in the desktop version.
conclusions
- ikSelect only repeats the behavior of standard selects, and does not add new functions that some other plugins can do
- despite minor flaws, this plugin is the best I've seen so far
References
Found bugs can be left in the comments, or on GitHub .PS Thanks for the invite sent to the author of the i10k plugin .
