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

Question

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

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

选择器.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", clickBound, false);
        selectorComponent.destroy();
    });
}());

更新

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

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

选择器.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;
    }
}

Answer 1

如果要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);
                }
            }
        }
    }