流星悟语 发表于 2015-10-26 14:59:21

Tizen应用创建弹出按钮

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

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

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

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



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



实现弹出按钮组件:

实现一个底部弹出按钮组件:
编辑HTML代码将底部弹出按钮组件添加到您的应用程序屏幕。 底部的按钮添加到圆形的UI,您必须添加 用户ui - - - - - - 底bottom - - - - - - 按钮button 类弹出页脚。 弹出只能有1底部按钮。
<div id="bottomBtnPopup" class="ui-popup">
   <div class="ui-popup-content">
      Turning on Power
      saving mode will
      limit the maximum
      power
   </div>
   <div class="ui-popup-footer ui-bottom-button">
      <button id="bottomBtn" class="ui-btn">Check</button>
   </div>
</div>
实现一个弹出按钮组件:
编辑HTML代码一边弹出按钮组件添加到您的应用程序屏幕。 为圆形的UI添加侧按钮,您必须添加 用户界面 - - - - - - 一边 - - - - - - 按钮 类弹出页脚。 弹出只能有2侧按钮。

<style>
   .btn-icon-cancel::before {-webkit-mask-image: url(./cancel.png)}
   .btn-icon-ok::before {-webkit-mask-image: url(./ok.png)}
</style>
<div id="sideBtnPopup" class="ui-popup">
   <div class="ui-popup-content">
      Turning on Power
      saving mode will
      limit the maximum
      power
   </div>
   <div class="ui-popup-footer ui-grid-col-2 ui-side-button">
      <button id="sideBtn-1" class="ui-btn btn-icon-cancel">Cancel</button>
      <button id="sideBtn-2" class="ui-btn btn-icon-ok">OK</button>
   </div>
</div>
页: [1]
查看完整版本: Tizen应用创建弹出按钮