TmDropdown is a JavaScript plugin that allows easy styling of select elements by mimicking their functionality, but providing more freedom
This Project is still in the early stages of development, so bugs may happen.
Download here or view the source on Github
Also available on npm: npm install tmdropdown
Or bower: bower install tmdropdown
TmDropdownConfig.width = "100%"TmDropdownConfig.emptyText = "No Options available."document.querySelectorAll(".tmDropdown").forEach(function(element){
new TmDropdown(element);
});
$("select.tmDropdown").TmDropdown();
TmDropdown can be initialized with options
var options = {
width: "200px",
wrapperClass: "green-border",
emptyText: "No options here",
onRendered: ()=> {console.log("TmDropdown rendered");},
onOpen: ()=> console.log("TmDropdown opened"),
onRefresh: function(tmd){console.log(tmd);console.log(this);}
};
$("select.tmDropdown").TmDropdown(options);
//or
new TmDropdown(domElement,options);
Result:
A list of methods and options and the corresponding usage with jQuery. The jQuery plugin is lightweight and will always call the corresponding method in the attached TmDropdown object
Properties |
||
| Property name | Type | Description |
|---|---|---|
| isOpen | boolean | Tells if the Dropdown is currently opened. (Implemented for internal use, but also available externally because why not) |
| isEmpty | boolean | Tells if the Dropdown contains any options. This accesses the original select and may be inaccurate if options have changed, but the TmDropdown hasn't been refreshed. (Implemented for internal use, but also available externally because why not) |
| isMultiple | boolean | Tells if the Dropdown is multiple. This accesses the original select and may be inaccurate if the multiple attribute has been changed, but the TmDropdown hasn't been refreshed. (Implemented for internal use, but also available externally because why not) |
| observer | MutationObserver | A MutationObserver
listening on the original select If for what ever reason you do not want the dropdown to update on dom changes anymore, you can use observer.disconnect() (not recommended) |
Methods |
||
| Method name | jQuery usage | Description |
| refresh(); | $(e).TmDropdown("refresh") | Refresh the Dropdown. Use this if you changed something in the select element, like added options or changed the value. |
| focus(); | $(e)[0].TmDropdown.focus() | Focus the dropdown. This is mainly intended for internal use and may act weird if used with jQuery |
| open(); | $(e).TmDropdown("open") | Open the dropdown. Mostly for internal use. |
| close(); | $(e).TmDropdown("close") | Close the dropdown. Mostly for internal use. |
| destroy(); | $(e).TmDropdown("destroy") | Remove the generated dropdown from the DOM and show the actual select element |
| select(value); | $(e).TmDropdown("select",value) | Select a specific value in the dropdown. Fires a change event |
| toggle(); | $(e).TmDropdown("open") | Open or close the dropdown, depending on state. Mostly for internal use. |
| repositionOptionsUL() | $(e).TmDropdown("reposition") | Reposition the Dropdown in case the DOM layout has changed while the dropdown is open. |
| getOption(name); | $(e).TmDropdown("option",name) | Get the value of an option |
| setOption(name,value); | $(e).TmDropdown("option",name,value) | Set the value of an option. If you use this, call refresh() after. |
Options |
||
| Option name | type | Default value | Description |
| closeOnScroll | boolean | true | Indicates if the Dropdown should get closed when the document gets scrolled. If false, the dropdown will move with the document, but can cause performance issues |
| emptyText | string | "No options available" | A text to display if the select is empty / doesnt have any options |
| observe | boolean | true | Register a MutationObserver, to automatically update the dropdown, if the content of the select is changed |
| width | string | undefined | A fixed width for the wrapper. You can use any valid CSS-Value here, such as 100%, 130px or auto (auto is not recommended).
If no width is specified, TmDropdown will try to calculate the width of the original select, which works quite ok most of the times. |
| wrapperClass | string | " " (empty string) | Additional class for the wrapper element (still contains ".tmDropdown-wrapper") |
| Callback Options | No defaults | |
| onClose | Callback for when the TmDropdown close() method is called.
This gets called at the start of the method. If the callback returns
false, the method will abort and nothing happens. The callback gets passed a parameter with the instance of TmDropdown. This corresponds to the select element. |
|
| onDestroy | Callback for when the TmDropdown destroy() method is called.
This gets called at the start of the method. If the callback returns
false, the method will abort and the dropdown will not get destroyed. The callback gets passed a parameter with the instance of TmDropdown. The this variable in the function scope corresponds to the select element |
|
| onOpen | Callback for when the TmDropdown open() method is called.
This gets called at the start of the method. If the callback returns
false, the method will abort and nothing happens. The callback gets passed a parameter with the instance of TmDropdown. The this variable in the function scope corresponds to the select element |
|
| onOptionSelected | Callback for when the TmDropdown select() method is called.
This gets called at the start of the method. If the callback returns
false, the method will abort and nothing happens. (Value doesnt get changed) The callback gets passed two parameters: first: instance of TmDropdown second: Selected value The this variable in the function scope corresponds to the select element |
|
| onRefresh | Callback method to call AFTER the TmDropdown refresh() method has finished
building the dropdown. Anything returned by the callback will be ignored. The callback gets passed a parameter with the instance of TmDropdown. The this variable in the function scope corresponds to the select element |
|
| onRendered | Callback to call after the TmDropdown has initially finished building. This callback will only be called once at the end of the constructor method. The this variable in the function scope corresponds to the select element |
|