JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 0/5 ( 0 votes)
Your Rating:
$.fn.dropdown creates dropdown lists. Separated by group. As with popup, only one dropdown of each group can be shown at one time.
Source: js.lovelotte.net
1. INCLUDE CSS AND JS FILES
<link href="code/0.1a/dropdown.css" rel="stylesheet" type="text/css"/> <script src='http://lovelotte.net/jquery-2.0.2.min.js'></script> <script src="../popup/code/0.2.2a/popupMgr.js"></script> <script src="code/0.1a/dropdown.js"></script>
2. HTML
<div class="dropdown"><span class='text'>Click to select</span> <span class="caret"></span></div>
3. JAVASCRIPT
$(".dropdown").dropdown([1,2,3...], {multiple: true});
4. OPTIONS
Simply invoke $.fn.dropdown on a DOM element. It requires two parameters: entries and options.
Possible options for the plugin are:
| Option | Description |
|---|---|
| dropText | selectorSelector for the element which holds the placeholder text. This text will be replaced by the selected values of the dropdown. If not found, the invoking element will have its html replaced with the selected values. |
| group | stringGroup name of dropdown. The popup group will be "Dropdown" + group. Default: 'main' |
| getValue | functionA function which returns the value of an element. |
| multiple | booleanWhether or not multiple selection is allowed. |
5. METHODS
Calling $.fn.dropdown on an object will result in an $.dropdown object being returned. It has the following methods:
| method | Parameters | Description |
|---|---|---|
| reset |
entriesarray Array of entries optionsobject |
Resets the dropdown. |
| select | $elDOM element | Considers the entry $el as selected. |
| unselect | $elDOM element | Considers the entry $el not selected. |
| val | returnKeyboolean | Returns the keys or values in an array. If returnKey is true, the keys are returned. Otherwise, the values are returned. |
6. EVENTS
| Event | Parameters | Triggered When |
|---|---|---|
| select.dropdown |
arrayvals: Array of selected values arraykeys: Array of selected keys |
Triggered when an entry is selected. |
7. EXAMPLES
With Details
$("dropdown").dropdown([{value:1, detail:{title:'one'}}, ... ]);
Multiple
$("dropdown").dropdown([1,2,3...], {multiple: true});
Get Values
$("dropdown").dropdown([1,2,3...], {multiple:true});
$(button).click(function(){
v = $("dropdown").dropdown().val();
$(input).val(v);
});
Get Keys
$("dropdown").dropdown([1,2,3...], {multiple:true});
$(button).click(function(){
v = $("dropdown").dropdown().val(true);
$(input).val(v);
});
Show Two
$("d1").dropdown([1,2...]);
$("d2").dropdown([1,2,...], {group: 'group2'});
