Pagelist Usage Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta  name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
		<link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8">		
		<script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script>
		<style>
		html,body{
            background-color:#ffffff;
        }
		.dhx_list_frame_item{
			background-color:#565656;
		}
		html,body{
			height:100%;
			width:100%;
		}
        </style>
	</head>
	<body>
 
            <div id="container" style='width:642px; height:100%;'></div>
 
 
		<script type="text/javascript" charset="utf-8">
			var sources = [
				{id:1,img:"../animation/imgs/image001.jpg"},
				{id:2,img:"../animation/imgs/image002.jpg"},
				{id:3,img:"../animation/imgs/image003.jpg"},
				{id:4,img:"../animation/imgs/image004.jpg"},
				{id:5,img:"../animation/imgs/image005.jpg"},
				{id:6,img:"../animation/imgs/image006.jpg"}
			]
			function img(obj){
				return '<img src="'+obj.img+'" width="300" height="222" ondragstart="return false"/>'
			}
 
            dhx.ready(function(){
                dhx.ui({
                    container:"container",
    				rows:[{	
					height:230,
					view:"pagelist", 
					layout:"x",
				        id:"carousel_list", 
					data:sources, 
					datatype:"json",
				        template:img,
					type:{
						css:"frame",
						height:230
					},
					panel:{
						align:"bottom"
					}
				 }]		
    		});	
            });
 
		</script>
	</body>
</html>