Examples : jquery-hover-dropdown-box

Example - Inline

Example - Hover with button

METHODS

$('#foo_div').hoverDropdownBox ( [options] )

Append into such as div element, as inline box.

$('#foo_btn').appendHoverDropdownBox ( [options] )

Append into a element such as button, 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:

OPTIONS in each items

'color'

Color of an item. eg: '#ff0000' or 'red'.

'inputType'

Append a input-element to an item.

null (default)
'text' (text-input)
'checkbox'

'inputChecked'

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:

OPTIONS in footer

'label'

Label of footer.

Other methods

You can use a options as same as OPTIONS in each items (such as: 'color', 'inputType', etc...).

'onClick' - function ( key, item )

Event handler for when an item (with label and others (eg: checkbox)) has clicked.

Example of use:

	onClick: function( key, item ){
		window.alert("onClick: " + key );
	}

[Note] This 'item' parameter is an object.
Also, you can use the following methods with 'item' object:

METHODS in '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.value ( [value] )

Get / Set a value of the input-element (checkbox or text-input) to an item.

item.inputElement ( )

Get a input-element from an item.

item.dropdownBox ( )

Get the 'DropdownBox' object.
It's an object for manipulate the parent dropdown-box.

Also, you can use the following methods with got object :

METHODS in 'DropdownBox' object

item.dropdownBox().addItem( key, item )

Add a new item to box.
You can use a options as same as OPTIONS in each items (such as: 'color', 'inputType', etc...).

'onLabelClick' - function ( key, item )

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

'onChange' - function ( key, item, value )

Event handler for when the checkbox or text-input of an item has changed.

Example of use:

	onChange: function(key, item, value){
		window.alert("onChange: " + key + " - " + value );
	}

[Note] This 'item' parameter is an object. Also, you can use the methods with 'item' object.
(Please see 'onClick' section.)

'onInputText' - function ( key, item, value )

Event handler for when text-input of an item has input completed.

Example of use:

	onInputText: function(key, item, value){
		window.alert("onInputText: + key + " = " + value);
	}

[Note] This 'item' parameter is an object. Also, you can use the methods with 'item' object.
(Please see 'onClick' section.)