Tizen开发创建索引滚动条

灯笼芯

您可以创建一个圆或rectangle-shaped指数滚动条组件与CircularIndexScrollBar IndexScrollBar api。

这个功能只支持在可穿戴的应用程序。

下图显示了指数滚动条的布局矩形和圆形的UI组件。

图:指数在矩形和圆形滚动条组件设备

实现指数滚动条组件:

1.编辑HTML代码将组件添加到您的应用程序屏幕:

1. <div class="ui-page ui-page-active" id="pageIndexScrollbar" >
   
2.    <header class="ui-header ui-header-small">
   
3.       <h2 class="ui-title ui-title-text-fadeout">Index Scroll Bar</h2>
   
4.    </header>
   
5.    <div id="indexscrollbar"></div>
   
6.    <section class="ui-content">
   
7.       <ul class="ui-listview ui-snap-listview" id="list1">
   
8.          <li class="ui-listview-divider">A</li>
   
9.          <li>Anton</li>
   
10.          <li class="ui-listview-divider">B</li>
    
11.          <li>Barry</li>
    
12.          <li>Bob</li>
    
13.          <li class="ui-listview-divider">C</li>
    
14.          <li>Carry</li>
    
15.          <li class="ui-listview-divider">D</li>
    
16.          <li>Daisy</li>
    
17.          <li class="ui-listview-divider">E</li>
    
18.          <li>Eric</li>
    
19.          <li class="ui-listview-divider">F</li>
    
20.          <li>Fay</li>
    
21.          <li class="ui-listview-divider">G</li>
    
22.          <li>Garry</li>
    
23.        </ul>
    
24.    </section>
    
25. </div>

复制代码

2.编辑JavaScript代码来管理指数滚动条事件和其他功能:
创建一个组件有选择性地:

1. var indexScrollbarElement = document.getElementById("indexscrollbar");
   
2. 
   
3. if (!tau.support.shape.circle)
   
4. {
   
5.    /* Create IndexScrollbar */
   
6.    indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
   
7. }
   
8. else
   
9. {
   
10.    /* Create CircularIndexScrollbar */
    
11.    indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
    
12. }

复制代码

使用回调:

1. indexScrollbarElement.addEventListener("select", function(event)
   
2. {
   
3.    var index = event.detail.index;
   
4.    /* Do something using the index */
   
5.    console.log(index);
   
6. });

复制代码

在接下来的例子中,滚动列表定义列表项的位置使用 用户界面 - - - - - - 列表视图 - - - - - - 分频器 类,选择指数滚动条。

注意,在一个矩形的UI,触摸索引生成选择,但在一个圆的UI,选择使用扶轮时发生。

1. (function()
   
2. {
   
3.    var page = document.getElementById("pageIndexScrollbar"),
   
4.        listviewElement = document.getElementById("list1"),
   
5.        isCircle = tau.support.shape.circle,
   
6.        scroller,
   
7.        indexScrollbar;
   
8. 
   
9.    page.addEventListener("pageshow", function(ev)
   
10.    {
    
11.       var indexScrollbarElement = document.getElementById("indexscrollbar"),
    
12.           listDividers = listviewElement.getElementsByClassName("ui-listview-divider"), /* List dividers */
    
13.           dividers = {}, /* Collection of list dividers */
    
14.           indices = [],        /* Index list */
    
15.           divider,
    
16.           i, idx;
    
17. 
    
18.       /* For all list dividers */
    
19.       for (i = 0; i < listDividers.length; i++)
    
20.       {
    
21.          /* Add the list divider elements to the collection */
    
22.          divider = listDividers[i];
    
23.          idx = divider.innerText;
    
24.          dividers[idx] = divider;
    
25. 
    
26.          /* Add the index to the index list */
    
27.          indices.push(idx);
    
28.       }
    
29. 
    
30.       scroller = tau.util.selectors.getScrollableParent(listviewElement);
    
31. 
    
32.       if (!isCircle)
    
33.       {
    
34.          indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement, {index: indices, container: scroller});
    
35.       }
    
36.       else
    
37.       {
    
38.          /* Create IndexScrollbar */
    
39.          indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement, {index: indices});
    
40. 
    
41.          /* Add SnapListview item "selected" event handler */
    
42.          listviewElement.addEventListener("selected", function (ev)
    
43.          {
    
44.             var indexValue = ev.target.textContent[0];
    
45.             indexScrollbar.value(indexValue);
    
46.          });
    
47.       }
    
48. 
    
49.       /* Add IndexScrollbar index "select" event handler */
    
50.       indexScrollbarElement.addEventListener("select", function (ev)
    
51.       {
    
52.          var divider,
    
53.              idx = ev.detail.index;
    
54. 
    
55.          divider = dividers[idx];
    
56.          if (divider && scroller)
    
57.          {
    
58.             /* Scroll to the ui-listview-divider element */
    
59.             scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
    
60.          }
    
61.       });
    
62.    });
    
63. 
    
64.    page.addEventListener("pagehide", function(ev)
    
65.    {
    
66.       indexScrollbar.destroy();
    
67.    });
    
68. } ());

复制代码