您可以创建一个圆或rectangle-shaped指数滚动条组件与CircularIndexScrollBar IndexScrollBar api。
这个功能只支持在可穿戴的应用程序。
下图显示了指数滚动条的布局矩形和圆形的UI组件。
图:指数在矩形和圆形滚动条组件设备
实现指数滚动条组件:
1.编辑HTML代码将组件添加到您的应用程序屏幕:- <div class="ui-page ui-page-active" id="pageIndexScrollbar" >
- <header class="ui-header ui-header-small">
- <h2 class="ui-title ui-title-text-fadeout">Index Scroll Bar</h2>
- </header>
- <div id="indexscrollbar"></div>
- <section class="ui-content">
- <ul class="ui-listview ui-snap-listview" id="list1">
- <li class="ui-listview-divider">A</li>
- <li>Anton</li>
- <li class="ui-listview-divider">B</li>
- <li>Barry</li>
- <li>Bob</li>
- <li class="ui-listview-divider">C</li>
- <li>Carry</li>
- <li class="ui-listview-divider">D</li>
- <li>Daisy</li>
- <li class="ui-listview-divider">E</li>
- <li>Eric</li>
- <li class="ui-listview-divider">F</li>
- <li>Fay</li>
- <li class="ui-listview-divider">G</li>
- <li>Garry</li>
- </ul>
- </section>
- </div>
复制代码 2.编辑JavaScript代码来管理指数滚动条事件和其他功能:
创建一个组件有选择性地:- var indexScrollbarElement = document.getElementById("indexscrollbar");
- if (!tau.support.shape.circle)
- {
- /* Create IndexScrollbar */
- indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
- }
- else
- {
- /* Create CircularIndexScrollbar */
- indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
- }
复制代码 使用回调:
- indexScrollbarElement.addEventListener("select", function(event)
- {
- var index = event.detail.index;
- /* Do something using the index */
- console.log(index);
- });
复制代码在接下来的例子中,滚动列表定义列表项的位置使用 用户界面 - - - - - - 列表视图 - - - - - - 分频器 类,选择指数滚动条。 注意,在一个矩形的UI,触摸索引生成选择,但在一个圆的UI,选择使用扶轮时发生。 - (function()
- {
- var page = document.getElementById("pageIndexScrollbar"),
- listviewElement = document.getElementById("list1"),
- isCircle = tau.support.shape.circle,
- scroller,
- indexScrollbar;
- page.addEventListener("pageshow", function(ev)
- {
- var indexScrollbarElement = document.getElementById("indexscrollbar"),
- listDividers = listviewElement.getElementsByClassName("ui-listview-divider"), /* List dividers */
- dividers = {}, /* Collection of list dividers */
- indices = [], /* Index list */
- divider,
- i, idx;
- /* For all list dividers */
- for (i = 0; i < listDividers.length; i++)
- {
- /* Add the list divider elements to the collection */
- divider = listDividers[i];
- idx = divider.innerText;
- dividers[idx] = divider;
- /* Add the index to the index list */
- indices.push(idx);
- }
- scroller = tau.util.selectors.getScrollableParent(listviewElement);
- if (!isCircle)
- {
- indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement, {index: indices, container: scroller});
- }
- else
- {
- /* Create IndexScrollbar */
- indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement, {index: indices});
- /* Add SnapListview item "selected" event handler */
- listviewElement.addEventListener("selected", function (ev)
- {
- var indexValue = ev.target.textContent[0];
- indexScrollbar.value(indexValue);
- });
- }
- /* Add IndexScrollbar index "select" event handler */
- indexScrollbarElement.addEventListener("select", function (ev)
- {
- var divider,
- idx = ev.detail.index;
- divider = dividers[idx];
- if (divider && scroller)
- {
- /* Scroll to the ui-listview-divider element */
- scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
- }
- });
- });
- page.addEventListener("pagehide", function(ev)
- {
- indexScrollbar.destroy();
- });
- } ());
复制代码
|