Selector

The selector component is used to select specific items using various methods, such as drag, click, and rotate. The selector component is commonly used in more options, but you can also use it elsewhere as a standalone component.

The selector component consists of:

  • Selector

    The selector component creates layers automatically. The layer has items, and you can set the number of items on one layer.

  • Indicator

    The indicator is located in the center of the selector.

    TAU provides a default indicator style and function. To change the indicator style and functionality, make a custom indicator to operate with the selector.

  • Indicator arrow

    The indicator arrow is a special indicator style with an arrow, used to provide more detailed information to the user.

    You can make a custom indicator arrow to operate with the selector. The selector component controls the arrow's rotation to indicate an active item.

  • Item elements

    Each item can have a specific degree, radius, and class.

    The item must have a class for the selector to query it. The default selector class is .ui-item, but you can set a custom selector to use the itemSelector option.

Table of Contents

  1. How to Create a Selector
  2. Options
  3. Events
  4. Methods
    1. enable
    2. disable
    3. changeItem
    4. addItem
    5. removeItem

How to Create a Selector

HTML Example

<div class="ui-page ui-page-active" id="main">
	<div id="selector" class="ui-selector">
		<div class="ui-item ui-show-icon" data-title="Show"></div>
		<div class="ui-item ui-human-icon" data-title="Human"></div>
		<div class="ui-item ui-delete-icon" data-title="Delete"></div>
		<div class="ui-item ui-show-icon" data-title="Show"></div>
		<div class="ui-item ui-human-icon" data-title="Human"></div>
		<div class="ui-item ui-delete-icon" data-title="Delete"></div>
		<div class="ui-item ui-x-icon" data-title="X Icon"></div>
		<div class="ui-item ui-fail-icon" data-title="Fail"></div>
		<div class="ui-item ui-show-icon" data-title="Show"></div>
		<div class="ui-item ui-human-icon" data-title="Human"></div>
		<div class="ui-item ui-delete-icon" data-title="Delete"></div>
	</div>
</div>

Manual Constructor

(function()
{
	var page = document.getElementById("selectorPage"),
		selector = document.getElementById("selector"),
		clickBound;

	function onClick(event)
	{
		var activeItem = selector.querySelector(".ui-item-active");
		//console.log(activeItem.getAttribute("data-title"));
	}
	page.addEventListener("pagebeforeshow", function()
	{
		clickBound = onClick.bind(null);
		tau.widget.Selector(selector);
		selector.addEventListener("click", clickBound, false);
	});
	page.addEventListener("pagebeforehide", function()
	{
		selector.removeEventListener("click", clickBound, false);
	});
})();

Options

Option Input type Default value Description
data-item-selector String .ui-item Item selector with a CSS style.
data-item-degree Number 30 Angle between items.
data-item-radius Number -1 Radius between the item and center. Default value is determined by the selector layout.
data-indicator-selector String .ui-selector-indicator Indicator selector with a CSS style.
data-indicator-arrow-selector String .ui-selector-indicator-arrow Indicator arrow selector with a CSS style.
data-indicator-auto-control Boolean true Indicator auto control switch. If you want to control your indicator manually, change this option to false.
data-max-item-number Number 11 Maximum number of items on one layer. If you change the itemDegree, consider modifying this value to fit your selector layout.

Events

Name Description
selectoritemchange

Triggered when the active item is changed. The target is the active item element.

This event has the following detailed information:

  • layer: Layer element on the active item.
  • layerIndex: Layer index on the active item.
  • index: Item index on the layer.
  • title: If the item has a data-title attribute, this is the value.
selectorlayerchange

Triggered when the active layer is changed. The target is the active layer element.

This event has the following detailed information:

  • index: Layer index.

Methods

Summary

Method Description 
enable (  )

Enable Selector component.

 
disable (  )

Disable Selector component.

 
changeItem ( Number index )

Changes an active item on an active layer.

 
addItem ( HTMLElement item, Number index )

Adds a new item.

 
removeItem ( Number index )

Removes an item on a specific layer.
enable

Enable Selector component.

enable ( )

Return value:

No return value
disable

Disable Selector component.

disable ( )

Return value:

No return value
changeItem

Changes an active item on an active layer.

changeItem ( Number index)

Parameters:

Parameter Type Required / optional Default value Description
index Number required

Return value:

No return value
addItem

Adds a new item.

addItem ( HTMLElement item, Number index)

Parameters:

Parameter Type Required / optional Default value Description
item HTMLElement required
index Number optional Last index

Return value:

No return value
removeItem

Removes an item on a specific layer.

removeItem ( Number index)

Parameters:

Parameter Type Required / optional Default value Description
index Number required

Return value:

No return value

Where to Go Next