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:
The selector component creates layers automatically. The layer has items, and you can set the number of items on one layer.
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.
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.
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.
<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>
(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); }); })();
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. |
Name | Description |
---|---|
selectoritemchange | Triggered when the active item is changed. The target is the active item element. This event has the following detailed information:
|
selectorlayerchange | Triggered when the active layer is changed. The target is the active layer element. This event has the following detailed information:
|
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 valuedisable
Disable Selector component.
disable ( )
Return value:
No return valuechangeItem
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 valueaddItem
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 valueremoveItem
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