Example - Inline
Example - Hover with button
FollowMETHODS
$('#foo_div').hoverDropdownBox ( [options] )
Append to such as div element, as inline.$('#foo_btn').appendHoverDropdownBox ( [options] )
Append to such as buttons, as hover.OPTIONS
You can also use these options with aforesaid methods.'title'
Title of header.'items'
An items of list, as Hash (Object).The key of hash, will use as the item name.
items : { "Item A": { ... }, "Item B": { ... } }For each item, you can use the following options:
'color'
Color of an item. eg: '#ff0000' or 'red'.'inputType'
Append a input element to an item.- null (default)
- text
- checkbox
'inputSelected'
This option is usable when using 'inputType' option with 'checkbox'. value: true / false.'inputPlaceholder'
This option is usable when using 'inputType' option with 'text'. eg: "Input a text".'footer'
Options for footer. In footer, you can use the following options:'label'
Label of footer.Other methods
You can use a options as same as Option > items > Options (such as: 'color', 'inputType', etc...).'onClick' - function ( key, item, dom )
Event handler for when an item (with label and others (eg: checkbox)) has clicked.
Example of use:
onClick: function( key, item, dom ){ window.alert("onClick: " + key ); }
[Note] This 'item' parameter is an object. Get / Set state of the checkbox to an item. ('value' : true / false) Get the input element from an item. Get / Set value of the input element to an item.
Also, you can use the following methods with 'item' object:
item.checked ( [value] )
[Note] This method is usable when 'inputType' with 'checkbox' in this item.item.getInputObject ( [value] )
item.value ( [value] )
'onLabelClick' - function ( key, item, dom )
Event handler for when the label of an item has clicked.
Example of use:
onLabelClick: function(key, item){ // When the label of item has clicked, switch checked state of a checkbox. item.checked( !item.checked() ); // You can use 'checked' method with an item object. window.alert("onLabelClick: " + key + " - " + item.checked() ); }
[Note] This 'item' parameter is an object. Also, you can use the methods with 'item' object.
(Please see 'onClick' section.)
'onTextInput' - function ( input_value, key, item, dom )
Event handler for when the text-input of an item has input completed.
Example of use:
onTextInput: function(input_value, key, item, dom){ window.alert("onTextInput: + key + " = " + input_value); }
[Note] This 'item' parameter is an object. Also, you can use the methods with 'item' object.
(Please see 'onClick' section.)