Tizen应用创建弹出按钮

流星悟语

您可以创建底部和侧用弹出弹出按钮组件的API。

这个功能只支持在可穿戴的应用程序。

以下数据显示弹出式组件的布局在一个矩形和圆形的UI。

图:底部弹出组件在矩形和圆形设备

图:侧弹出组件在矩形和圆形设备

实现弹出按钮组件:

实现一个底部弹出按钮组件:
编辑HTML代码将底部弹出按钮组件添加到您的应用程序屏幕。 底部的按钮添加到圆形的UI,您必须添加 用户ui - - - - - - 底bottom - - - - - - 按钮button 类弹出页脚。 弹出只能有1底部按钮。

1. <div id="bottomBtnPopup" class="ui-popup">
   
2.    <div class="ui-popup-content">
   
3.       Turning on Power
   
4.       saving mode will
   
5.       limit the maximum
   
6.       power
   
7.    </div>
   
8.    <div class="ui-popup-footer ui-bottom-button">
   
9.       <button id="bottomBtn" class="ui-btn">Check</button>
   
10.    </div>
    
11. </div>

复制代码

实现一个弹出按钮组件:
编辑HTML代码一边弹出按钮组件添加到您的应用程序屏幕。 为圆形的UI添加侧按钮,您必须添加 用户界面 - - - - - - 一边 - - - - - - 按钮 类弹出页脚。 弹出只能有2侧按钮。

1. <style>
   
2.    .btn-icon-cancel::before {-webkit-mask-image: url(./cancel.png)}
   
3.    .btn-icon-ok::before {-webkit-mask-image: url(./ok.png)}
   
4. </style>
   
5. <div id="sideBtnPopup" class="ui-popup">
   
6.    <div class="ui-popup-content">
   
7.       Turning on Power
   
8.       saving mode will
   
9.       limit the maximum
   
10.       power
    
11.    </div>
    
12.    <div class="ui-popup-footer ui-grid-col-2 ui-side-button">
    
13.       <button id="sideBtn-1" class="ui-btn btn-icon-cancel">Cancel</button>
    
14.       <button id="sideBtn-2" class="ui-btn btn-icon-ok">OK</button>
    
15.    </div>
    
16. </div>

复制代码