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:

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