jQuery Hover Drop Down Box Examples

Example - Inline

Example - Hover with button

Follow

METHODS

$('#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.

'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.
 Also, you can use the following methods with 'item' object:

item.checked ( [value] )

Get / Set state of the checkbox to an item. ('value' : true / false)
[Note] This method is usable when 'inputType' with 'checkbox' in this item.

item.getInputObject ( [value] )

Get the input element from an item.

item.value ( [value] )

Get / Set value of the input element to an item.

'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.)