html - 如何在可穿戴网络 TIZEN 应用程序中启用页面指示器和更多选项？-6ren

html - 如何在可穿戴网络 TIZEN 应用程序中启用页面指示器和更多选项？

转载作者：行者123 更新时间：2023-11-28 04:10:29

通过将“data-enable-page-scroll”更改为 true 或 false，它要么启用一个功能，要么启用另一个功能，此外还会打乱该部分的位置。 “false”启用“pageindicator”并且页面看起来很完美，但是，“moreoptions”不起作用。现在，如果我将其设置为“true”，“moreoptions”会起作用，但页面指示器不起作用，此外，整个页面在 watch 上似乎向下移动了很多。

'pageindicator' 不工作，我的意思是它没有显示在页面顶部(根本)。“moreoptions”不起作用，我的意思是它确实在右侧显示了 3 个点(它也正确地缩进)，但是，它没有在屏幕上显示“moreoptionsPopupCircle”。此外，当我触摸按钮时没有动画，就好像它只是屏幕上的某个静态元素一样。

设备:Gear S3 Frontier

索引.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>

更多选项.js:http://pastebin.com/Ykx1E49v

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

样式.css:http://pastebin.com/7pwGqnMz

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

最佳答案

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

关于html - 如何在可穿戴网络 TIZEN 应用程序中启用页面指示器和更多选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42745180/

文章推荐： c++ - 如何在 SFML 中找到矩形的坐标？

文章推荐： javascript - 单击按钮禁用特定的表单字段

文章推荐： c++ - 传递模板供以后在其他结构/类上下文中使用

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在可穿戴网络 TIZEN 应用程序中启用页面指示器和更多选项？