Tizen TAU - Попытка добавить «Дополнительные параметры», но дает TypeError - PullRequest
Новая
       31

Tizen TAU - Попытка добавить «Дополнительные параметры», но дает TypeError

1 голос
/ 27 апреля 2019

Я абсолютный новичок в Tizen. Я хочу сделать небольшое приложение. Для этого приложения я хочу добавить «Дополнительные параметры». Это не работает, и я действительно не знаю. Я следовал за каждым шагом в документации (я также следовал этому: https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/implementing-more-options), но это мне тоже не помогло. Вот мой код: 

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,user-scalable=no">
        <title>List</title>
        <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
        <link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.circle.min.css">
        <link rel="stylesheet" href="css/more_options.css">
    </head>
    <body>
        <div id="moreoptionsPage" class="ui-page">
           <header class="ui-header ui-has-more">
              <h2 class="ui-title">Einkaufsliste</h2>
              <button type="button" class="ui-more ui-icon-overflow">More Options</button>
           </header>
           <div class="ui-content">
               <ul class="shopping_list ul-listview">

               </ul>
           </div>

           <!--Rectangular 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="#">Hinzufügen</a></li>
                    <li><a href="#">Entfernen</a></li>
                 </ul>
              </div>
           </div>

           <!--Circular profile-->
           <div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
              <div id="selector" class="ui-selector">
                 <div class="ui-item add-icon" data-title="Hinzufügen"></div>
                 <div class="ui-item remove-icon" data-title="Entfernen"></div>
              </div>
           </div>
        </div>
    </body>
    <script src="lib/tau/wearable/js/tau.min.js"></script>
    <script src="js/circle-helper.js"></script>
    <script src="js/app.js"></script>
    <script src="js/lowBatteryCheck.js"></script>
    <script src="js/more_options.js"></script>
</html>

вот мой more_options.js: 

(function() {
    var page = document.querySelector('#moreoptionsPage'),
        popup = page.querySelector('#moreoptionsPopup'),
        handler = page.querySelector('.ui-more'),
        drawer = page.querySelector('#moreoptionsDrawer'),
        selector = page.querySelector('#selector'),
        helper,
        clickHandlerBound;

    function clickHandler(event) {
        alert("calling");
        if (tau.support.shape.circle) {
            tau.openPopup(popupCircle);
        } else {
            tau.openPopup(popup);
        }
    }

    page.addEventListener('pagebeforeshow', function() {
        if (tau.support.shape.circle) {
            helper = tau.helper.DrawerMoreStyle.create(drawer, {
                handler: '.drawer-handler'
            });
        } else {
            /* Shape is square */
            clickHandlerBound = clickHandler.bind(null);
            handler.addEventListener('click', clickHandlerBound);
        }
    });

    page.addEventListener('pagebeforehide', function() {
        if (tau.support.shape.circle) {
            handler.removeEventListener('click', clickHandlerBound);
            helper.destroy();
        }
    });
})();

и вот мой more_options.css: 

#moreoptionsDrawer {
   display: none;
}

@media all and (-tizen-geometric-shape: circle) {
   #moreoptionsDrawer {
      display: block;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 100%;
   }
   #moreoptionsPopup {
      display: none;
   }
}
...