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

  1. How to Create Selector
  2. Options
  3. Events
  4. Methods
    1. changeItem
    2. addItem
    3. removeItem

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.
This event has detail information.
- layer: Layer element on active item
- layerIndex: Layer's index on active item
- index: Item index on layer.
- title: If Item has 'data-title' attribute, this value is that.

selectorlayerchange

Triggered when the active layer is changed. Target is active layer element.
This event has detail information.
- index: Layer index.

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