Tizen应用中实现更多的选择

流星悟语

在一个矩形的UI中,您可以使用按钮,弹出组件实现更多的选择。 在一个圆形的UI,选择器组件提供了更多的选项按钮。 下面的例子显示了如何创建一个圆形UI更多选项按钮。

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

下面的图显示了更多的选择矩形和圆形的UI组件。

图:更多的选择在矩形和圆形设备组件

实现更多的选择组件:

• 编辑HTML代码将更多选择组件添加到您的应用程序屏幕:
  1. <div id="moreoptionsPage" class="ui-page">
     
  2.    <link rel="stylesheet"  href="./moreoptions.css">
     
  3.    <header class="ui-header ui-has-more">
     
  4.       <h2 class="ui-title">More Options</h2>
     
  5.       <button type="button" class="ui-more ui-icon-overflow">More Options</button>
     
  6.    </header>
     
  7.    <div class="ui-content content-padding">
     
  8.       It was a real pleasure for me to finally get to meet you. My colleagues join me in sending you our holiday greetings.
     
  9.    </div>
     
  10. 
      
  11.    <!-- Rectangular profile -->
      
  12.    <div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
      
  13.       <div class="ui-popup-header">Options</div>
      
  14.       <div class="ui-popup-content">
      
  15.          <ul class="ui-listview">
      
  16.             <li><a href="#">1</a></li>
      
  17.             <li><a href="#">2</a></li>
      
  18.             <li><a href="#">3</a></li>
      
  19.          </ul>
      
  20.       </div>
      
  21.    </div>
      
  22. 
      
  23.    <!-- Circular profile -->
      
  24.    <div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
      
  25.       <div id="selector" class="ui-selector">
      
  26.          <div class="ui-item show-icon" data-title="Show"></div>
      
  27.          <div class="ui-item human-icon" data-title="Human"></div>
      
  28.          <div class="ui-item delete-icon" data-title="Delete"></div>
      
  29.          <div class="ui-item show-icon" data-title="Show"></div>
      
  30.          <div class="ui-item human-icon" data-title="Human"></div>
      
  31.          <div class="ui-item delete-icon" data-title="Delete"></div>
      
  32.          <div class="ui-item x-icon" data-title="X Icon"></div>
      
  33.          <div class="ui-item fail-icon" data-title="Fail"></div>
      
  34.          <div class="ui-item show-icon" data-title="Show"></div>
      
  35.          <div class="ui-item human-icon" data-title="Human"></div>
      
  36.          <div class="ui-item delete-icon" data-title="Delete"></div>
      
  37.          <div class="ui-item show-icon" data-title="Show"></div>
      
  38.          <div class="ui-item human-icon" data-title="Human"></div>
      
  39.       </div>
      
  40.    </div>
      
  41. </div>

  复制代码
  
  

2.编辑CSS代码设置按钮的视觉风格:

1. #moreoptionsDrawer
   
2. {
   
3.    display: none;
   
4. }
   
5. 
   
6. @media all and (-tizen-geometric-shape: circle)
   
7. {
   
8.    #moreoptionsDrawer
   
9.    {
   
10.       display: block;
    
11.       background-color: rgba(255, 255, 255, 0.1);
    
12.       border-radius: 100%;
    
13.    }
    
14.    #moreoptionsPopup
    
15.    {
    
16.       display: none;
    
17.    }
    
18. }

复制代码

3.编辑JavaScript代码来管理选项按钮事件和其他功能:

1. (function()
   
2. {
   
3.    var page = document.querySelector("#moreoptionsPage"),
   
4.        popup = page.querySelector("#moreoptionsPopup"),
   
5.        handler = page.querySelector(".ui-more"),
   
6.        drawer = page.querySelector("#moreoptionsDrawer"),
   
7.        selector = page.querySelector("#selector"),
   
8.        helper,
   
9.        clickHandlerBound;
   
10. 
    
11.    function clickHandler(event)
    
12.    {
    
13.       tau.openPopup(popup);
    
14.    }
    
15. 
    
16.    page.addEventListener("pagebeforeshow", function()
    
17.    {
    
18.       if (tau.support.shape.circle)
    
19.       {
    
20.          helper = tau.helper.DrawerMoreStyle.create(drawer,
    
21.          {
    
22.             handler: ".drawer-handler"
    
23.          });
    
24.       }
    
25.       else
    
26.       {
    
27.          /* Shape is square */
    
28.          clickHandlerBound = clickHandler.bind(null);
    
29.          handler.addEventListener("click", clickHandlerBound);
    
30.       }
    
31.    });
    
32. 
    
33.    page.addEventListener("pagebeforehide", function()
    
34.    {
    
35.       if (tau.support.shape.circle)
    
36.       {
    
37.          handler.removeEventListener("click", clickHandlerBound);
    
38.          helper.destroy();
    
39.       }
    
40.    });
    
41. })();

复制代码