在一个矩形的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;
- }
- }
- (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();
- }
- });
- })();
| 
