Wie können Sie den Seitenindikator und weitere Optionen in einer Wearable Web TIZEN App aktivieren?

Wenn Sie "Daten aktivieren" auf "Blättern" auf "Wahr" oder "Falsch" setzen, wird entweder die eine oder die andere Funktion aktiviert, zusätzlich werden die Positionen der Sektion verfälscht. 'false' aktiviert 'page indicator' und die Seite sieht perfekt aus, die 'moreoptions' funktioniert jedoch nicht. Nun, wenn ich es anwende, ist es "wahr", "mehr Optionen" funktionieren, aber nicht der Seitenindikator, außerdem scheint sich die ganze Seite auf der Uhr ziemlich nach unten zu bewegen.Wie können Sie den Seitenindikator und weitere Optionen in einer Wearable Web TIZEN App aktivieren?

Von "Seitenanzeiger" funktioniert nicht, ich meine, es wird nicht auf der Oberseite der Seite (überhaupt) angezeigt. Mit 'moreoptions' funktioniert nicht, ich meine, dass es die 3 Punkte auf der rechten Seite zeigt (es ist auch richtig eingerückt), aber es zeigt 'moreoptionsPopupCircle' auf dem Bildschirm nicht. Darüber hinaus gibt es keine Animation, wenn ich den Knopf berühre, als ob es nur ein statisches Element auf dem Bildschirm wäre.

Device: s3 Frontier

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

Quelle

2017-03-12 Zananok

Bitte beachten Sie auch Ihre JS Code für beide Indikator und Moreoption mein Problem –

benötigen Sie JavaScript-Code es funktionsfähig zu machen.

<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); 
      } 
     } 
    }); 
}());

Quelle

2017-03-13 12:14:38

halb aufgelöste hinzufügen, es funktioniert nun sowohl mit mehr Optionen als auch mit Seitenanzeigern, verzerrt jedoch immer noch stark s die Seite. Wenn das oben genannte div vor #hsectionchanger ist, erscheint die gesamte Seite barey am unteren Ende des Bildschirms der Uhr, während wenn es unten ist, zeigt es die Seite normal .. außer, dass buchstäblich die Hälfte davon ist weg. Mit "weg" meine ich den Schnitt, da das "moreoptions" div es überlappt. – Zananok

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

Haben Sie eine Auffüllung hinzugefügt? –

Wie können Sie den Seitenindikator und weitere Optionen in einer Wearable Web TIZEN App aktivieren?

Antwort

Verwandte Themen