Tizen开发创建索引滚动条
您可以创建一个圆或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;
idx = divider.innerText;
dividers = 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;
indexScrollbar.value(indexValue);
});
}
/* Add IndexScrollbar index "select" event handler */
indexScrollbarElement.addEventListener("select", function (ev)
{
var divider,
idx = ev.detail.index;
divider = dividers;
if (divider && scroller)
{
/* Scroll to the ui-listview-divider element */
scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
}
});
});
page.addEventListener("pagehide", function(ev)
{
indexScrollbar.destroy();
});
} ());
页:
[1]