如何在可穿戴網頁TIZEN應用程序中啓用頁面指示符和更多選項？

通過將'data-enable-page-scroll'更改爲true或false，它可以啓用一個功能或另一個功能，以及調整該部分的位置。 'false'啓用'pageindicator'，頁面看起來很完美，但'moreoptions'不起作用。現在如果我把它變成'真的'，'更多的選擇'的工作，而不是頁面指標，而且整個頁面似乎在手錶上向下移動很多。如何在可穿戴網頁TIZEN應用程序中啓用頁面指示符和更多選項？

'pageindicator'不工作，我的意思是它不會顯示在頁面的頂部（完全）。 'moreoptions'不起作用，我的意思是它確實在右側顯示了3個點（它也適當縮進），但是它並沒有在屏幕上顯示'moreoptionsPopupCircle'。此外，當我觸摸按鈕時沒有動畫，就好像它只是屏幕中的一些靜態元素。

設備：齒輪S3前沿

的index.html：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, user-scalable=no"/> 
    <title>Wearable UI</title> 
    <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="/lib/tau/wearable/theme/default/tau.min.css"> 
    <link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)" href="/lib/tau/wearable/theme/default/tau.circle.min.css"> 
    <link rel="stylesheet" href="/css/style.css"> 
    <link rel="stylesheet" type="text/css" href="css/style-main.css"/> 
</head> 
<body> 
<div id="application"> 
    <div id="pageIndicatorPage" class="ui-page" data-enable-page-scroll="true"> 
     <button type="button" class="ui-more">More Options</button> 
     <div id="pageIndicator" class="ui-page-indicator"></div> 
     <div id="hsectionchanger" class="ui-content"> 
      <div> 
       <section class="ui-section-active section" style="text-align:center"> 
        <header id="main">Main</header> 
        <div id="a" class="positive-left circle-button"></div> 
       </section> 
       <section class="section" style="text-align:center"> 
        <header id="main2">b</header> 
        <div id="b" class="positive-left circle-button"></div>circle-button"></div> 
       </section> 
      </div> 
     </div> 

     <!-- Circle Profile --> 
     <div id="moreoptionsPopupCircle" class="ui-popup"> 
      <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 x-icon" data-title="X Icon"></div> 
       <div class="ui-item fail-icon" data-title="Fail"></div> 
      </div> 
     </div> 
     <script type="text/javascript" src="moreoptions.js"></script> 
    </div> 
</div> 
<script type="text/javascript" src="/lib/tau/wearable/js/tau.min.js"></script> 
<script type="text/javascript" src="js/circle-helper.js"></script> 
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 
<script src="js/pageindicator.js"></script> 
</body>

moreoptions.js：http://pastebin.com/Ykx1E49v

pageindicator.js：http://pastebin.com/C28V9Jfa

style.css中：http://pastebin.com/7pwGqnMz

style-main.css：http://pastebin.com/J1MW8Zyx

來源

2017-03-12 Zananok

也與大家分享您的JS代碼兩個指示燈和Moreoption –

您需要JavaScript代碼才能使其正常工作。

<body> 
    <div id="hsectionchangerPage" class="ui-page" data-enable-page-scroll="false"> 
     <div id="pageIndicator" class="ui-page-indicator"></div> 
     <link rel="stylesheet" href="css/sectionchanger.css"> 
     <div class="ui-content content-padding"> 
       <button type="button" class="ui-more">More Options</button> 
     </div> 
     <div id="hsectionchanger" class="ui-content"> 
      <!-- section changer has only one child. --> 
      <div> 
       <section style="text-align:center" > 
        <h3> LEFT2 PAGE </h3> 
       </section> 
       <section style="text-align:center"> 
        <h3> LEFT1 PAGE </h3> 
       </section> 
       <section class="ui-section-active" style="text-align:center"> 
        <h3> MAIN PAGE </h3> 
       </section> 
       <section style="text-align:center"> 
        <h3> RIGHT1 PAGE </h3> 
       </section> 
       <section style="text-align:center"> 
        <h3> RIGHT2 PAGE </h3> 
       </section> 
      </div> 
     </div> 

     <!-- Square 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> 

    <!-- Circle Profile --> 
    <div id="moreoptionsPopupCircle" class="ui-popup"> 
     <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 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 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 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> 
    </div> 
    <script src="hsection.js"></script> 
    <script type="text/javascript" src="moreoptions.js"></script> 
    </div> 
<script type="text/javascript" src="../../../lib/tau/wearable/js/tau.min.js"></script> 

</body>

hsection.js

(function() { 

    var page = document.getElementById("hsectionchangerPage"), 
     changer = document.getElementById("hsectionchanger"), 
     sectionLength = document.querySelectorAll("section").length, 
     elPageIndicator = document.getElementById("pageIndicator"), 
     sectionChanger, 
     pageIndicator, 
     pageIndicatorHandler; 

    /** 
    * pagebeforeshow event handler 
    * Do preparatory works and adds event listeners 
    */ 
    page.addEventListener("pagebeforeshow", function() { 
     // make PageIndicator 
     pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sectionLength }); 
     pageIndicator.setActive(2); 
     // make SectionChanger object 
     sectionChanger = tau.widget.SectionChanger(changer, { 
      circular: false, 
      orientation: "horizontal", 
      useBouncingEffect: true 
     }); 
    }); 

    /** 
    * pagehide event handler 
    * Destroys and removes event listeners 
    */ 
    page.addEventListener("pagehide", function() { 
     // release object 
     sectionChanger.destroy(); 
    }); 

    /** 
    * sectionchange event handler 
    */ 
    pageIndicatorHandler = function (e) { 
     pageIndicator.setActive(e.detail.active); 
    }; 

    changer.addEventListener("sectionchange", pageIndicatorHandler, false); 

}());

moreoptions.js

/*global tau */ 
/*jslint unparam: true */ 
(function(){ 
    /** 
    * page - More option page element 
    * popup - More option popup element for rectangular devices 
    * handler - Element for opening more option popup 
    * popupCircle - More option popup element for circular devices 
    * elSelector - Selector element in the circular popup 
    * selector - TAU selector instance 
    */ 
    var page = document.querySelector("#hsectionchangerPage"), 
     popup = page.querySelector("#moreoptionsPopup"), 
     handler = page.querySelector(".ui-more"), 
     popupCircle = page.querySelector("#moreoptionsPopupCircle"), 
     elSelector = page.querySelector("#selector"), 
     selector, 
     clickHandlerBound; 

    /** 
    * Click event handler for opening more option popup 
    */ 
    function clickHandler() { 
     if (tau.support.shape.circle) { 
      tau.openPopup(popupCircle); 
     } else { 
      tau.openPopup(popup); 
     } 
    } 

    /** 
    * pagebeforeshow event handler 
    * Do preparatory works and adds event listeners 
    */ 
    page.addEventListener("pagebeforeshow", function() { 
     var radius = window.innerHeight/2 * 0.8; 

     clickHandlerBound = clickHandler.bind(null); 
     handler.addEventListener("click", clickHandlerBound); 
     if (tau.support.shape.circle) { 
      selector = tau.widget.Selector(elSelector, {itemRadius: radius}); 
     } 
    }); 

    /** 
    * pagebeforehide event handler 
    * Destroys and removes event listeners 
    */ 
    page.addEventListener("pagebeforehide", function() { 
     handler.removeEventListener("click", clickHandlerBound); 
     if (tau.support.shape.circle) { 
      selector.destroy(); 
     } 
    }); 

    /** 
    * When user click the indicator of Selector, drawer will close. 
    */ 
    elSelector.addEventListener("click", function(event) { 
     var target = event.target; 

     if (tau.support.shape.circle) { 
      // 'ui-selector-indicator' is default indicator class name of Selector component 
      if (target.classList.contains("ui-selector-indicator")) { 
       tau.closePopup(popupCircle); 
      } 
     } 
    }); 
}());

來源

2017-03-13 12:14:38

半解決我的問題，現在可以同時使用moreoptions和pageindicator，但是，它仍然大大扭曲是頁面。如果前面提到的div在#hsectionchanger之前，那麼整個頁面就會出現在手錶屏幕的下端，而如果它的波紋管，它會正常顯示頁面，除非它的一半已經消失。走了之後，我的意思是它的切入，因爲'更多'選項與它重疊。 – Zananok

http://www.zananok.com/a.png – Zananok

是否添加了任何填充？ –

如何在可穿戴網頁TIZEN應用程序中啓用頁面指示符和更多選項？

回答

相關問題