How to use swipelist in tizen for wearables

How to use swipelist in tizen for wearables

BY 11 Jul 2014 Web Application Development

I’m trying to use the swipe list widget of tizen, so I’ve created a new tizen wearable web project and pasted the code snippet from the help documents to index.html, but it seems that nothing happens- I still see the list with a vertical scroll bar.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
	<title>Wearable UI</title>
	<link rel="stylesheet"  href="lib/tau/themes/default/tau.min.css">
	<!-- load theme file for your application -->
	<link rel="stylesheet"  href="css/style.css">
</head>
<body>
	<div class="ui-page ui-page-active" id="main">
		<header class="ui-header">
			<h2 class="ui-title">Wearable UI</h2>
		</header>
	<div class="ui-content" id="swipelist">
   <!--List items that can be swiped-->
   <ul class="ui-listview ui-swipelist-list">
      <li>Andrew</li>
      <li>Bill</li>
      <li>Christina</li>
      <li>Daniel</li>
      <li>Edward</li>
      <li>Peter</li>
      <li>Sam</li>
      <li>Tom</li>
   </ul>
   <!--Swipe actions-->
   <div class="ui-swipelist">
      <div class="ui-swipelist-left">
         <div class="ui-swipelist-icon"></div>
         <div class="ui-swipelist-text">Calling</div>
      </div>
      <div class="ui-swipelist-right">
         <div class="ui-swipelist-icon"></div>
         <div class="ui-swipelist-text">Message</div>
      </div>
   </div>
</div>
	</div>
	

	
</body>

<script>
   (function()
   {
      var page = document.getElementById("swipelist"),
          listElement = page.getElementsByClassName("ui-swipelist-list", "ul")[0],
          swipeList;
      page.addEventListener("pageshow", function()	
      {
         /* Make swipe list object */
         var options = 
         {
            left: true,
            right: true
         }
         swipeList = new tau.SwipeList(listElement, options);
      });
      page.addEventListener("pagehide", function() 
      {
         /* Release object */
         swipeList.destroy();
      });
   })();
</script>

<script src="js/lowBatteryCheck.js"></script>
</html>

What am I doing wrong here?

 

Thanks,

Written by
Keep Reading All Posts
Announcing the Tizen Studio 6.1 Release

BY

16 Apr 2025

Tizen Studio

Read More
Announcing the Tizen Studio 6.0 Release

BY

04 Nov 2024

Tizen Studio

Read More
Announcing the Tizen Studio 5.6 Release

BY

02 Apr 2024

Tizen Studio

Read More