JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 4.7/5 ( 1 votes)
Your Rating:
Selectator is a jQuery-based replacement for select boxes. It supports searching, and affects the original select box directly, which is used as the data container.
Browser compatibility
- IE 8+
- Chrome 2+
- Firefox 3.5+
- Safari 4+
- Opera 11+
Source: github.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="fm.selectator.jquery.css"/> <script src="jquery-1.11.0.min.js"></script> <script src="fm.selectator.jquery.js"></script>
2. HTML
<select id="select1" name="select1"> <option value=""> </option> <option value="1" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option> <option value="2" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option> <option value="3" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option> <option value="4" data-left="<img src='images/noimage.png'>" data-right="4">Four</option> <option value="5" data-left="<img src='images/noimage.png'>" data-right="5">Five</option> <option value="6">Six</option> <option value="7">Seven</option> <option value="8">Eight</option> <option value="9">Nine</option> </select>
Extra attributes for option tags
By using data-left, data-right and data-subtitle attribute tags you can extend the information shown in the options. These can be styled through css, and are named prefix_title, prefix_left, prefix_right and prefix_subtitle. The data in the tags is pure html, so you can even put images there.
3. JAVASCRIPT
$('#select1').selectator({
useDimmer: false,
labels: {
search: 'Search...'
}
});
4. CSS classes
Here is a list of all the css classes
| Class | Description |
|---|---|
| selectator | This is the new select box. It has some extra classes called single andmultiple, which tell if it is a multiple selection or single selection select box. And also options-visible and options-hidden which tell if the options list is visible or not. |
| prefix_chosen_items | The holder for the chosen items. |
| prefix_chosen_item | The holder for the chosen item. |
| prefix_chosen_item_title | The title of the chosen item. |
| prefix_chosen_item_left | The left section of the chosen item. |
| prefix_chosen_item_right | The right section of the chosen item. |
| prefix_chosen_item_subtitle | The bottom section of the chosen item. |
| prefix_chosen_item_remove | The remove button for the chosen item. |
| prefix_input | This is the input box for the selectator. This is used together withoptions-visible or options-hidden to show and style it differently if it is a multiple selection box or a single selection box. |
| prefix_textlength | This is used to calculate the size of the input box for the multiple selection box. |
| prefix_options | The options list holder. This is used together with options-visible oroptions-hidden to show or hide the options. |
| prefix_group_header | This is the group title option. |
| prefix_group | This is the group options holder. |
| prefix_option | This is a result option. It has an extra class called active which tells if the option is the active one. |
| prefix_option_title | The title of the result option. |
| prefix_option_left | The left section of the result option. |
| prefix_option_right | The right section of the result option. |
| prefix_option_subtitle | The bottom section of the result option. |
| prefix_dimmer | This is the dimmer |
5. DOM Structure
- dimmer
-
selectator: containing the single|multiple class and the options-visible|options-hidden class
- textlength
-
chosen_items
-
chosen_item
- chosen_item_left
- chosen_item_right
- chosen_item_title
- chosen_item_subtitle
- chosen_item_remove
- chosen_item...
-
chosen_item
- input
-
options
- group_header
-
group
-
option: containing the active class
- option_left
- option_right
- option_title
- option_subtitle
- option...
-
option: containing the active class
-
option: containing the active class
- option_left
- option_right
- option_title
- option_subtitle
- option...
6. JQUERY METHODS
| Method | Description |
|---|---|
| refreshChosenItems | This method is used internally by the plugin, but you can also call it manually, it is used to refresh the plugin. A scenario where this would be useful is if the data in the original select box is changed by some other script. |
| destroy | This method is used to remove the instance of the plugin from the select box and restore it to its original state. |
$('#selectBox').selectator('refreshChosenItems');
or
$('#selectBox').selectator('destroy');
