Selector
Selector is component for select specific item to use various methods that drag, click and rotary.
Selector component has been used in more options commonly but If you want to use other situation, you can use this component as standalone component in everywhere.
Selector component was consisted as selector element, indicator, indicator arrow and item elements.
Each items can have the specific degree, radius and class. Item must have a class for selector query the items. Default selector is '.ui-item' but If you want to change this selector, you can set the custom selector to use itemSelector option.
Selector component has made layers automatically. Layer has items and you can set items number on one layer.
Indicator is indicator that located center of Selector. TAU provide default indicator style and function. But, If you want to change indicator style and function, you can make the custom indicator and set your indicator for operate with Selector.
Indicator arrow is special indicator style that has the arrow. It is used for provide more correct indicate information to user. Also, you can make the custom indicator arrow and set your custom indicator arrow for operate with Selector. Selector component control arrow's rotate to indicate active item.
Table of Contents
How to Create 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
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" | Selector item selector that style is css selector. |
| data-item-degree | Number | 30 | The angle between each items. |
| data-item-radius | Number | -1 | The radius between item and center. Default value is determined by Selector layout. |
| data-indicator-selector | String | ".ui-selector-indicator" | Selector indicator selector that style is css selector. |
| data-indicator-arrow-selector | String | ".ui-selector-indicator-arrow" | Selector indicator arrow selector that style is css style.. |
| data-indicator-auto-control | Boolean | true | Indicator auto control switch. If you want to control your indicator manually, change this options to false. |
| data-max-item-number | Nubmer | 11 | Max item number on one layer. If you change the itemDegree, we recommend to consider to modify this value for fit your Selector layout. |
Events
| Name | Description |
|---|---|
| selectoritemchange | Triggered when the active item is changed. Target is active item element. |
| selectorlayerchange | Triggered when the active layer is changed. Target is active layer element. |
Methods
Summary
| Method | Description |
|---|---|
changeItem(Number index) |
Change active item on active layer |
addItem(HTMLElement item, Number index) |
Add new item |
removeItem(Number index) |
Remove item on specific layer |
changeItem-
Change active item on active layer
changeItem(Number index)
Parameters:
Parameter Type Required / optional Default value Description index Number required Return value:
No Return Value addItem-
Add 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-
Remove item on specific layer
removeItem(Number index)
Parameters:
Parameter Type Required / optional Default value Description index Number required Return value:
No Return Value