Tizen应用中实现更多的选择
在一个矩形的UI中,您可以使用按钮,弹出组件实现更多的选择。 在一个圆形的UI,选择器组件提供了更多的选项按钮。 下面的例子显示了如何创建一个圆形UI更多选项按钮。这个功能只支持在可穿戴的应用程序。下面的图显示了更多的选择矩形和圆形的UI组件。图:更多的选择在矩形和圆形设备组件实现更多的选择组件:[*]编辑HTML代码将更多选择组件添加到您的应用程序屏幕:<div id="moreoptionsPage" class="ui-page">
<link rel="stylesheet"href="./moreoptions.css">
<header class="ui-header ui-has-more">
<h2 class="ui-title">More Options</h2>
<button type="button" class="ui-more ui-icon-overflow">More Options</button>
</header>
<div class="ui-content content-padding">
It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
</div>
<!-- Rectangular profile -->
<div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
<div class="ui-popup-header">Options</div>
<div class="ui-popup-content">
<ul class="ui-listview">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</div>
<!-- Circular profile -->
<div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
<div id="selector" class="ui-selector">
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item x-icon" data-title="X Icon"></div>
<div class="ui-item fail-icon" data-title="Fail"></div>
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
<div class="ui-item delete-icon" data-title="Delete"></div>
<div class="ui-item show-icon" data-title="Show"></div>
<div class="ui-item human-icon" data-title="Human"></div>
</div>
</div>
</div>
2.编辑CSS代码设置按钮的视觉风格: #moreoptionsDrawer
{
display: none;
}
@media all and (-tizen-geometric-shape: circle)
{
#moreoptionsDrawer
{
display: block;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 100%;
}
#moreoptionsPopup
{
display: none;
}
}3.编辑JavaScript代码来管理选项按钮事件和其他功能:
(function()
{
var page = document.querySelector("#moreoptionsPage"),
popup = page.querySelector("#moreoptionsPopup"),
handler = page.querySelector(".ui-more"),
drawer = page.querySelector("#moreoptionsDrawer"),
selector = page.querySelector("#selector"),
helper,
clickHandlerBound;
function clickHandler(event)
{
tau.openPopup(popup);
}
page.addEventListener("pagebeforeshow", function()
{
if (tau.support.shape.circle)
{
helper = tau.helper.DrawerMoreStyle.create(drawer,
{
handler: ".drawer-handler"
});
}
else
{
/* Shape is square */
clickHandlerBound = clickHandler.bind(null);
handler.addEventListener("click", clickHandlerBound);
}
});
page.addEventListener("pagebeforehide", function()
{
if (tau.support.shape.circle)
{
handler.removeEventListener("click", clickHandlerBound);
helper.destroy();
}
});
})();
页:
[1]