如何在 Tizen 网络应用程序的旋转选择器中切换到另一个页面

问题描述

我对 JavaScript 和 Tizen Web 开发非常陌生。所以我正在尝试实现旋转选择器。选择一个元素后，我想切换到它的特定页面。现在我可以选择元素但不能切换到另一个页面。

index.html

<div class="ui-page" data-enable-page-scroll="false" id="selector-page">
    <div class="ui-selector" id="selector">
        <div class="ui-item human-icon" data-title="Human"></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>
        <script src="selector.js"></script>
    </div>
</div>

selector.js

/* global tau */
(function () {
    var page = document.getElementById("selector-page"),selector = document.getElementById("selector"),selectorComponent,clickBound;

    function onClick(event) {
        var target = event.target;

        if (target.classList.contains("ui-selector-indicator")) {
            return;
        }
    }

    page.addEventListener("pagebeforeshow",function () {
        clickBound = onClick.bind(null);
        selectorComponent = tau.widget.Selector(selector);
        selector.addEventListener("click",clickBound,false);
    });

    page.addEventListener("pagebeforehide",function () {
        selector.removeEventListener("click",false);
        selectorComponent.destroy();
    });
}());

更新

我已经添加了这段代码并且它对我有用，但我不确定它是否是正确的方法。

index.html

<div class="ui-page" data-enable-page-scroll="false" id="selector-page">
    <div class="ui-selector" id="selector">
        <div class="ui-item human-icon" data-title="Human">
            <a href="page2.html" class="next-page"></a>
        </div>
...

selector.js

function onClick(event) {
    var target = event.target;

    if (target.classList.contains("ui-selector-indicator")) {
        tau.changePage(document.getElementsByClassName(target.className)[0].getElementsByClassName("next-page")[0].getAttribute("href"));
        return;
    }
}

解决方法

如果您想使用 a 链接，只需将 div 替换为 a 即可：

<div class="ui-page" data-enable-page-scroll="false" id="selector-page">
    <div class="ui-selector" id="selector">
        <a class="ui-item human-icon" data-title="Human" href="next-page.html"></a>
        <div class="ui-item show-icon" data-title="Show"></div>
    </div>
</div>

但是你可以通过其他方式来做到这一点，例如：

<div class="ui-page" data-enable-page-scroll="false" id="selector-page">
    <div class="ui-selector" id="selector">
        <div class="ui-item human-icon" data-title="Human" data-href="next-page.html"></div>
        <div class="ui-item show-icon" data-title="Show"></div>
    </div>
</div>

并修改selector.js：

    function onClick(event) {
        var target = event.target,activeItem,url;

        if (target.classList.contains("ui-selector-indicator")) {
            activeItem = selector.querySelector(".ui-item-active");
            if (activeItem) {
                url = activeItem.getAttribute("data-href");
                if (url) {
                    tau.changePage(url);
                }
            }
        }
    }