Как включить индикатор страницы и дополнительные параметры в переносном веб-приложении TIZEN?

Изменяя data-enable-page-scroll на true или false, он либо включает ту или иную функцию, в дополнение к путанице в позициях раздела. "false" включает "pageindicator", и страница выглядит идеально, однако "moreoptions" не работает. Теперь, если я включу это "правда", "больше вариантов" работает, но не индикатор страницы, более того, вся страница, кажется, движется совсем немного вниз на часах.

Под "указателем страницы" не работает, я имею в виду, что он не отображается в верхней части страницы (вообще). Под "moreoptions" не работает, я имею в виду, что он показывает 3 точки на правой стороне (он также имеет правильные отступы), однако, он не показывает "moreoptionsPopupCircle" на экране. Кроме того, при касании кнопки анимация отсутствует, как будто это просто статический элемент на экране.

Устройство: Gear 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

Источник

1 ответ

Вам нужен код 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);
            }
        }
    });
}());
Источник
Другие вопросы по тегам