找回密码
 立即注册
查看: 3200|回复: 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,选择使用扶轮时发生。
复制代码


本帖子中包含更多资源

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

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

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-24 03:04 , Processed in 0.047167 second(s), 22 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

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