I'm very new to JavaScript and Tizen Web development. So I'm trying to implement rotary selector. And after choosing one element I want to switch to it's specific page. Now I can select the element but can't switch to another page.
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", clickBound, false);
selectorComponent.destroy();
});
}());
UPDATED
I've added this code and it works for me, but I'm not sure that it is the right way to do this.
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;
}
}
If you want to use a
link you can do this just by replacing div
by 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>
But you can do this in other way, eg.:
<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>
And modify 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);
}
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.