找回密码
 立即注册
查看: 3194|回复: 0

Tizen开发创建索引滚动条

[复制链接]
发表于 2015-12-22 15:50:16 | 显示全部楼层 |阅读模式
您可以创建一个圆或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. if (!tau.support.shape.circle)
  3. {
  4.    /* Create IndexScrollbar */
  5.    indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
  6. }
  7. else
  8. {
  9.    /* Create CircularIndexScrollbar */
  10.    indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
  11. }
复制代码
使用回调:
  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.    page.addEventListener("pageshow", function(ev)
  9.    {
  10.       var indexScrollbarElement = document.getElementById("indexscrollbar"),
  11.           listDividers = listviewElement.getElementsByClassName("ui-listview-divider"), /* List dividers */
  12.           dividers = {}, /* Collection of list dividers */
  13.           indices = [],        /* Index list */
  14.           divider,
  15.           i, idx;

  16.       /* For all list dividers */
  17.       for (i = 0; i < listDividers.length; i++)
  18.       {
  19.          /* Add the list divider elements to the collection */
  20.          divider = listDividers[i];
  21.          idx = divider.innerText;
  22.          dividers[idx] = divider;

  23.          /* Add the index to the index list */
  24.          indices.push(idx);
  25.       }

  26.       scroller = tau.util.selectors.getScrollableParent(listviewElement);

  27.       if (!isCircle)
  28.       {
  29.          indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement, {index: indices, container: scroller});
  30.       }
  31.       else
  32.       {
  33.          /* Create IndexScrollbar */
  34.          indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement, {index: indices});

  35.          /* Add SnapListview item "selected" event handler */
  36.          listviewElement.addEventListener("selected", function (ev)
  37.          {
  38.             var indexValue = ev.target.textContent[0];
  39.             indexScrollbar.value(indexValue);
  40.          });
  41.       }

  42.       /* Add IndexScrollbar index "select" event handler */
  43.       indexScrollbarElement.addEventListener("select", function (ev)
  44.       {
  45.          var divider,
  46.              idx = ev.detail.index;

  47.          divider = dividers[idx];
  48.          if (divider && scroller)
  49.          {
  50.             /* Scroll to the ui-listview-divider element */
  51.             scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
  52.          }
  53.       });
  54.    });

  55.    page.addEventListener("pagehide", function(ev)
  56.    {
  57.       indexScrollbar.destroy();
  58.    });
  59. } ());
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
欢迎来到泰泽网:http://www.tizennet.com/ 泰泽论坛:http://bbs.tizennet.com/ 好没有内涵哦,快到设置中更改这个无聊的签名吧!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|泰泽应用|泰泽论坛|泰泽网|小黑屋|Archiver|手机版|泰泽邮箱|泰泽网 ( 蜀ICP备13024062号-1 )

GMT+8, 2024-11-1 10:25 , Processed in 0.056689 second(s), 22 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表