I have a Navigation App and I want to cause the second page which is going to be loaded to the default.html to execute a function in ready section.
I have written in the home.js the following code:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
var articlesList;
articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("DNZ", publicMembers);
},
RSSFeedHandler: function getRssFeed() {
WinJS.xhr({ url: "http://feeds.feedburner.com/dotnetzone?format=xml" }).then(function (rss) {
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
article.link = items[n].querySelector("link").textContent;
article.description = items[n].querySelector("description").textContent;
article.pubDate = items[n].querySelector("pubDate").textContent;
articlesList.push(article);
}
});
}
});
})();
But this causes a problem when running it to the debugger; and the it stops.
My home.html page contains the following tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homePage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<div id="main">
<div id="DNZItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
<div class="listItemTemplate" style="width: 173px; height: 100px;">
<div class="listItemTitle" data-win-bind="innerText: title" style="width: 173px; height: 100px;"></div>
<div class="listItemImage" data-win-bind="innerText: pubDate" style="width: 173px; height: 100px;"></div>
<!--<div class="listItemTitle" data-win-bind="innerText: link">
</div>-->
</div>
</div>
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Καλως ήρθατε!</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<section id="content">
<div id="articlelist" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: DNZ.ItemList.dataSource, itemTemplate: DNZItemTemplate }"></div>
</section>
</section>
</div>
</div>
</body>
</html>
and I think the problem is when I try to put the item to the list view! Do you have any ideas for the way I have to write it to run the getRSSFeed function when the home.html is being loaded?
In order for the articlesList to be visible in the RSSFeedHndler method you need to make it a property of the page object as follows:
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
articlesList:null,
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
// var articlesList;
this.articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("DNZ", publicMembers);
},
RSSFeedHandler: function getRssFeed() {
var _this=this;
WinJS.xhr({ url: "http://feeds.feedburner.com/dotnetzone?format=xml" }).then(function (rss) {
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
article.link = items[n].querySelector("link").textContent;
article.description = items[n].querySelector("description").textContent;
article.pubDate = items[n].querySelector("pubDate").textContent;
_this.articlesList.push(article);
}
});
}
});
})();
Related
I have an array of jsons that have this structure:
[{
'playlist_name': 'abced',
'playlist_id': 123
}, {
'playlist_name': 'abcde',
'playlist_id': 123
}]
I want to insert this jsons in this div:
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
And i iterate over the todo in todos that i get in this scope
Todos.get(12175507942)
.success(function(data) {
$scope.todos = data;
});
I get the data fine, however i can't seem to get the value playlist_name.
I print the data and i get this.
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
with, each object being:
$$hashKey:"005"
playlist_id:"0DAlm2gb8DrtyRSXEKw07h"
playlist_name:"Rocola On The Go"
__proto__:Object
the code for the Todos.get
angular.module('todoService', [])
// super simple service
// each function returns a promise object
.factory('Todos', ['$http',function($http) {
return {
get : function(id) {
return $http.post('/api/getPlaylists',{"id":id});
},
create : function(todoData) {
return $http.post('/api/todos', todoData);
},
delete : function(id) {
return $http.delete('/api/todos/' + id);
}
}
}]);
I show the controllers code:
angular.module('todoController', [])
// inject the Todo service factory into our controller
.controller('mainController', ['$scope','$http','Todos', function($scope, $http, Todos) {
$scope.formData = {};
$scope.loading = true;
// GET =====================================================================
// when landing on the page, get all todos and show them
// use the service to get all the todos
Todos.get(12175507942)
.success(function(data) {
console.log(data);
$scope.todos = data;
$scope.loading = false;
});
// CREATE ==================================================================
// when submitting the add form, send the text to the node API
$scope.createTodo = function() {
// validate the formData to make sure that something is there
// if form is empty, nothing will happen
if ($scope.formData.text != undefined) {
$scope.loading = true;
// call the create function from our service (returns a promise object)
Todos.create($scope.formData)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.formData = {}; // clear the form so our user is ready to enter another
$scope.todos = data; // assign our new list of todos
});
}
};
// DELETE ==================================================================
// delete a todo after checking it
$scope.deleteTodo = function(id) {
$scope.loading = true;
Todos.delete(id)
// if successful creation, call our get function to get all the new todos
.success(function(data) {
$scope.loading = false;
$scope.todos = data; // assign our new list of todos
});
};
}]);
And i will show the view page:
<!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Optimize mobile viewport -->
<title>Node/Angular Todo App</title>
<!-- load bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400%7CRaleway:100,400,300,500,600,700%7COpen+Sans:400,500,600' rel='stylesheet' type='text/css'>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<!-- load angular -->
<script src="js/controllers/main.js"></script>
<!-- load up our controller -->
<script src="js/services/todos.js"></script>
<!-- load our todo service -->
<script src="js/core.js"></script>
<!-- load our main application -->
</head>
<!-- SET THE CONTROLLER -->
<body ng-controller="mainController">
<div class="main-container">
<section>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
<h4 class="uppercase mb16">Tus Playlists<br></h4>
<p class="lead mb80"><br></p>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-offset-2 col-md-8">
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
<p class="text-center" ng-show="loading">
<span class="fa fa-spinner fa-spin fa-3x"></span>
</p>
</div>
</div>
</div>
</section>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/parallax.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
and here is the core.js
angular.module('scotchTodo', ['todoController', 'todoService']);
Your code is working fine as per the code given in OP.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.todos = [{
'playlist_name': 'abced',
'playlist_id': 123
}, {
'playlist_name': 'abcde',
'playlist_id': 123
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="horizontal-tile" ng-repeat="todo in todos">
<div class="tile-left" style='min-height:100px;width:100px;'>
<div class="background-image-holder">
<img alt="image" class="background-image" src="img/project-single-1.jpg">
</div>
</div>
<div class="tile-right bg-secondary" style='min-height:100px;width: calc(100% - 100px);'>
<div class="description" style="padding:10px;">
<h4 class="mb8">{{ todo.playlist_name }}</h4>
</div>
</div>
</div>
</div>
I have Tried 2,3 solution but none worked for me ...
I have 3 Maps which I want to show in Tabs .Only 1st one appears .On Tab Change I Tried call the jQuery function first ..But the function is not even firing .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps API v3 : KML Layer</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
$(document).ready(function () {
//activaTab('overview'); --1.this is not working
});
//2.this is not working
//$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// alert('not ok');
//});
//3.not working
//$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// alert(target);
//var target = $(e.target).attr("href") // activated tab
//});
4.Not working
//function activaTab(tab) {
// alert(tab);
// $('.tab-pane a[href="#' + tab + '"]').tab('show');
//};
function display_kmlmap() {
var map_options = {};
//--Nation--
var mapNation = new google.maps.Map(document.getElementById("map_nation"), map_options);
var kmlUrlNation = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm0.kmz';
var kmlOptionsNation = { map: mapNation };
kmlLayerNation = new google.maps.KmlLayer(kmlUrlNation, kmlOptionsNation);
$("#map_nation").css("width", 400).css("height", 400);
//--District--
var mapDistrict = new google.maps.Map(document.getElementById("map_department"), map_options);
var kmlUrlDistrict = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm2.kmz';
var kmlOptionsDistrict = { map: mapDistrict };
kmlLayerDistrict = new google.maps.KmlLayer(kmlUrlDistrict, kmlOptionsDistrict);
$("#map_department").css("width", 400).css("height", 400);
//--Commune--
var mapCommune = new google.maps.Map(document.getElementById("map_Commune"), map_options);
var kmlUrlCommune = 'http://biogeo.ucdavis.edu/data/gadm2.7/kmz/HTI_adm3.kmz';
var kmlOptionsCommune = { map: mapCommune };
kmlLayerCommune = new google.maps.KmlLayer(kmlUrlCommune, kmlOptionsCommune);
$("#map_Commune").css("width", 400).css("height", 400);
}
</script>
</head>
<body onload="display_kmlmap()">
<div>
<ul class="nav nav-tabs" role="tablist">
<li class="active">Nation View
</li>
<li>Department View
</li>
<li>Commune View
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="overview">
<div id='map_nation'></div>
</div>
<div class="tab-pane" id="photos">
<div id='map_department'>
</div>
</div>
<div class="tab-pane" id="Commune">
<div id='map_Commune'>
</div>
</div>
</div>
</div>
<div id="map_canvas" style="width: 500px; height: 400px; float: left">
</div>
</body>
</html>
i tried 3 solution , I mentioned in Code .. but none of them are working ...i am not getting any clue
What Am I missing ??
I am using the WinJS.UI.AutoSuggestBox from the first example on this link: http://try.buildwinjs.com/#searchbox:simplelist1
I copied the exact same code to make sure I was not making any mistakes on my part, but it still doesn't render correctly. I have no idea what the problem might be.
PS: the Data.animeList is a namespace defined on the default.js, it works correctly and I've been using it on other pages. It is an array of strings, just like the one on the example mentioned above. Using the array provided on the example resulted on the same thing.
Here is the image showing what the problem is (well, it's not rendering, so you won't be able to see anything): http://i.imgur.com/e0VYWB5.png
And here is the code:
// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
WinJS.UI.processAll().then(function () {
// Renders the anime list view.
//var animeListView = document.getElementById("animeList");
//animeListView.winControl.header = Renderer._animeListHeaderTemplate;
//animeListView.winControl.itemDataSource = Data.animeListData.dataSource;
//animeListView.winControl.itemTemplate = Renderer._animeListTemplate;
//animeListView.winControl.layout = new WinJS.UI.GridLayout();
});
},
unload: function () {
// TODO: Respond to navigations away from this page.
},
updateLayout: function (element) {
/// <param name="element" domElement="true" />
// TODO: Respond to changes in layout.
},
});
var suggestionList = Data.animeList;
function suggestionsRequestedHandler(eventObject) {
var queryText = eventObject.detail.queryText,
query = queryText.toLowerCase(),
suggestionCollection = eventObject.detail.searchSuggestionCollection;
if (queryText.length > 0) {
for (var i = 0, len = suggestionList.length; i < len; i++) {
if (suggestionList[i].substr(0, query.length).toLowerCase() === query) {
suggestionCollection.appendQuerySuggestion(suggestionList[i]);
}
}
}
};
function querySubmittedHandler(eventObject) {
var queryText = eventObject.detail.queryText;
WinJS.log && WinJS.log(queryText, "sample", "status");
};
WinJS.Namespace.define("Sample", {
suggestionsRequestedHandler: WinJS.UI.eventHandler(suggestionsRequestedHandler),
querySubmittedHandler: WinJS.UI.eventHandler(querySubmittedHandler)
});
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>home</title>
<link href="home.css" rel="stylesheet" />
<script src="home.js"></script>
</head>
<body>
<!-- Home page. -->
<div class="fragment">
<!-- Header of the home page. -->
<header aria-label="Header content" role="banner">
<!-- Back button for navigation between pages. -->
<button data-win-control="WinJS.UI.BackButton"></button>
<!-- Page title. -->
<h1 class="titlearea win-type-ellipsis">Anime Manager</h1>
<!-- Navbar. -->
<div class="navbar">
<button type="button">Profile</button>
<button type="button">Settings</button>
<!-- The AutoSuggestBox -->
<div style="background: red; display: inline-block; margin: 15px 0;" data-win-control="WinJS.UI.AutoSuggestBox" data-win-options="{
placeholderText: 'Type a show',
onsuggestionsrequested: Sample.suggestionsRequestedHandler,
onquerysubmitted: Sample.querySubmittedHandler
}"></div>
<!--<input type="search" placeholder="Search a show..." />-->
</div>
</header>
<!-- Body of the home page. -->
<section class="page-section" aria-label="Main content" role="main">
<div id="testes"></div>
<!-- Anime list view. -->
<!--<div id="animeList" data-win-control="WinJS.UI.ListView" data-win-options="{header: select('.header')}"></div>-->
</section>
</div>
</body>
</html>
I found the problem. My WinJS was outdated - I am using the WinJS 3 and this feature is for WinJS 4.
I am practicing Windows Phone development using WinJS and I have the following code which parses JSON received from a particular URL. And using the images to be bound to a list view in an HTML page,
JavaScript code:
WinJS.xhr({ url: urlToBeUsed }).then(
function (sportsResponse) {
var sportsJSON = JSON.parse(sportsResponse.responseText);
var listItems = sportsJSON.Videos.Data;
for (var i = 0; i < listItems.length; i++) {
var imageList = listItems[i].Items;
var count = imageList.length;
if (count > 0) {
listItems[i].Items[0].Images.forEach(imageIteration);
function imageIteration(value, index, array) {
var picture = value.Url;
var name = value.title;
sportsImageList.push({
title: name,
picture: picture
});
}
}
}
imageList.itemDataSource = sportsImageList.dataSource;
})
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- WinJS references -->
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<script src="/js/navigator.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/sports/sports.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage" style="width:100%;height:100%;padding:10px">
<div class="myTemplate" data-win-control="WinJS.Binding.Template">
<div class="myItem">
<img data-win-bind="src:picture" style="width:100px;height:100px" />
</div>
</div>
<div id="imageList" data-win-control="WinJS.UI.ListView" data-win-bind="winControl.itemDataSource:sportsImageList.dataSource" data-win-options="{itemTemplate:select('.myTemplate')}"></div>
</div>
</body>
</html>
I have tried many ways to bind the URL to the Image, but on the screen I can only see the links but not the actual images.
Where am I wrong?
All help and suggestions appreciated.
Thank you!
I believe your error is in your assignment line, remember that itemDataSource is a property of the ListView control. As it is in your code you're assigning that property to the imageList element.
Change it to this:
imageList.winControl.itemDataSource = sportsImageList.dataSource;
I'm trying to make a simple page for the Gear 2 (running Tizen OS). In this page, the user can scroll up or down to see different meds, then can swipe left to see a screen asking to confirm the med as taken. I've taken some sample Tizen OS code and cobbled it together to try to achieve this, but it's not working as desired - it's just displaying all 4 text elements, one right after the other. I am very new to HTML and JavaScript so I'm sure I'm making some simple mistakes.
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>UITest</title>
<link rel="stylesheet" href="lib/tau/themes/default/tau.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">2 med(s) to take</h2>
</header>
<div id="barsectionchanger" class="ui-content">
<section class = "barcontainer">
<div class = "hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 1 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 1 </h3>
</section>
</div>
</div>
</section>
<section class = "barcontainer">
<div class = "hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 2 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 2 </h3>
</section>
</div>
</div>
</section>
</div>
</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.js"></script>
<script type="text/javascript" src="lib/tau/js/widget/virtuallist.js"></script>
<script src="app.js"></script>
</html>
app.js
( function () {
window.addEventListener( 'tizenhwkey', function( ev ) {
if( ev.keyName == "back" ) {
var page = document.getElementsByClassName( 'ui-page-active' )[0],
pageid = page ? page.id : "";
if( pageid === "main" ) {
tizen.application.getCurrentApplication().exit();
} else {
window.history.back();
}
}
} );
} () );
(function() {
var page = document.getElementById( "main" ),
changer = document.getElementById( "barsectionchanger" ),
sectionChanger, idx=1;
page.addEventListener( "pageshow", function() {
sectionChanger = new tau.SectionChanger(changer, {
circular: false,
orientation: "vertical",
scrollbar: "bar"
});
});
page.addEventListener( "pagehide", function() {
sectionChanger.destroy();
});
})();
(function() {
var underlayarray = document.getElementsByClassName( "barcontainer" ),
changerarray = document.getElementsByClassName( "hsectionchanger" ),
sectionChanger, idx=1;
for (i = 0; i < underlayarray.length; i++){
underlayarray[i].addEventListener( "pageshow", function() {
sectionChanger = new tau.SectionChanger(changerarray[i], {
circular: false,
orientation: "horizontal"
});
});
}
})();
Any insight into potential problems is appreciated. Thanks
Construction of SectionChanger widget not allow to put one widget instance inside another.
You should create another layout off aplliaction. For example you can use horizontal section changer on main level and vertical scrolled content in each section.
I fixed your code and now all section changers built correctly, but still are problems with working of widget.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title>UITest</title>
<link rel="stylesheet" href="lib/tau/themes/default/tau.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">2 med(s) to take</h2>
</header>
<div id="barsectionchanger" class="ui-content">
<div>
<section class="hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 1 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 1 </h3>
</section>
</div>
</section>
<section class="hsectionchanger">
<div>
<section class="section-active" style="text-align:center">
<h3> med 2 </h3>
</section>
<section style="text-align:center">
<h3> did you take med 2 </h3>
</section>
</div>
</section>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="lib/tau/js/tau.js"></script>
<script>( function () {
window.addEventListener('tizenhwkey', function (ev) {
if (ev.keyName == "back") {
var page = document.getElementsByClassName('ui-page-active')[0],
pageid = page ? page.id : "";
if (pageid === "main") {
tizen.application.getCurrentApplication().exit();
} else {
window.history.back();
}
}
});
}() );
(function () {
var page = document.getElementById("main"),
changer = document.getElementById("barsectionchanger"),
sectionChanger, idx = 1;
page.addEventListener("pageshow", function () {
var changerarray = document.getElementsByClassName("hsectionchanger"),
i;
tau.widget.SectionChanger(changer, {
circular: false,
orientation: "vertical",
scrollbar: "bar",
items: changer.firstElementChild.children
});
for (i = 0; i < changerarray.length; i++) {
tau.widget.SectionChanger(changerarray[i], {
circular: false,
orientation: "horizontal"
});
}
});
page.addEventListener("pagehide", function () {
sectionChanger.destroy();
});
})();
</script>
</html>