DIR : /home/kozerus/public_html/pn/uize/site-source/examples/slideshow-of-data.html
/home/kozerus/public_html/pn/uize/site-source/examples
<!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>Slideshow of Data | JavaScript Examples | UIZE JavaScript Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="featured animation slideshow Uize.Widget.Bar Uize.Widget.Swap.Image Uize.Widget.SlideShow"/>
<meta name="description" content="Who says that a slideshow can only be used to display an image? See this demo - it uses a slideshow to display nutritional data for various fruits."/>
<link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
<link rel="stylesheet" href="../css/page.css"/>
<link rel="stylesheet" href="../css/page.example.css"/>
<link rel="stylesheet" href="../css/widget.slideshow.css"/>
<link rel="stylesheet" href="../css/widget.databar.css"/>
<style type="text/css">
/*** layout ***/
tr.headings td {
font-size:9px;
padding:3px;
border:none;
}
</style>
</head>
<body>
<script type="text/javascript" src="../js/Uize.js"></script>
<h1 class="header">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
<a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>
<div class="main">
<h1 class="document-title">
<a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Slideshow of Data
<div class="pageActionsShell">
<div id="page-actions" class="pageActions"><a href="source-code/slideshow-of-data.html" class="buttonLink">SOURCE</a></div>
</div>
</h1>
<!-- explanation copy -->
<div class="explanation">
<p>One can be forgiven for thinking of a slideshow as being just about a series of photos. However, the <a href="../reference/Uize.Widget.SlideShow.html"><code>Uize.Widget.SlideShow</code></a> class is implemented to be generic, versatile, and agnostic as to the contents of the slides in the slide set. This allows us to have a slideshow focused on presenting data, where the data from each slide is represented by a series of widgets that are added as child widgets of the slideshow widget. In this example, a slideshow is presented of nutritional data for various fruits. Instances of <a href="../reference/Uize.Widget.Bar.html"><code>Uize.Widget.Bar</code></a> are used to represent the values of various nutritional properties. An instance of <a href="../reference/Uize.Widget.Swap.Image.html"><code>Uize.Widget.Swap.Image</code></a> is used to create a backdrop to the data bars that dissolves across transitions using a JavaScript animation effect.</p>
</div>
<!-- the slide set is defined in an external library so it can be shared by several pages -->
<!-- slideshow HTML layout with UI to be wired up -->
<table class="slideshow" cellspacing="0" cellpadding="0" style="margin:auto;">
<tr class="slideshowHeader" valign="top">
<td align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><a id="page_slideShow_first" class="navButton" href="javascript://"><div class="arrow towardsFirst gotoFirst"></div></a></td>
<td><a id="page_slideShow_previous" class="navButton" href="javascript://"><div class="arrow towardsFirst gotoPrevious"></div></a></td>
</tr>
</table>
</td>
<td align="center">
<div id="page_slideShow-slide_name" style="font-family:Verdana; font-size:14px; text-transform:uppercase; letter-spacing:7px; margin-top:6px;"> </div>
</td>
<td align="right">
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><a id="page_slideShow_next" class="navButton" href="javascript://"><div class="arrow towardsLast gotoNext"></div></a></td>
<td><a id="page_slideShow_last" class="navButton" href="javascript://"><div class="arrow towardsLast gotoLast"></div></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" align="center" valign="top" style="background:#000;">
<div style="position:relative; width:695px; height:327px;">
<!-- markup for the image swap widget -->
<div id="page_slideShow_slideImage" style="position:absolute; left:0px; top:0px; width:695px; height:327px; background:#000; z-index:1; text-align:left;">
</div>
<!-- markup for the bars widgets -->
<table cellspacing="2" cellpadding="0" style="position:absolute; left:0; top:0; z-index:2;">
<tr class="headings">
<td>Calories</td>
<td>Total Fat</td>
<td>Sat. Fat</td>
<td>Cholesterol</td>
<td>Sodium</td>
<td>Total Carbs</td>
<td>Dietary Fiber</td>
<td>Sugars</td>
<td>Protein</td>
<td>Calcium</td>
<td>Potassium</td>
</tr>
<tr>
<td id="page_slideShow_slideCalories"></td>
<td id="page_slideShow_slideTotalFat"></td>
<td id="page_slideShow_slideSaturatedFat"></td>
<td id="page_slideShow_slideCholesterol"></td>
<td id="page_slideShow_slideSodium"></td>
<td id="page_slideShow_slideTotalCarbs"></td>
<td id="page_slideShow_slideDietaryFiber"></td>
<td id="page_slideShow_slideSugars"></td>
<td id="page_slideShow_slideProtein"></td>
<td id="page_slideShow_slideCalcium"></td>
<td id="page_slideShow_slidePotassium"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<!-- JavaScript code to make the static slideshow HTML "come alive" -->
<script type="text/javascript">
Uize.require (
[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'UizeSite.TestData.Fruits',
'UizeSite.Templates.DataBar',
'Uize.Widget.Bar',
'Uize.Widget.Swap.Image',
'Uize.Widget.SlideShow'
],
function () {
'use strict';
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** add the slide show child widget ***/
var slideShow = page.addChild ('slideShow',Uize.Widget.SlideShow,{slides:UizeSite.TestData.Fruits ()});
/*** add the image wipe widget as a child widget to the slide show widget ***/
slideShow.addChild ('slideImage',Uize.Widget.Swap.Image,{width:695,height:327,built:false});
/*** add bar child widgets to the slideshow widget for displaying the nutritional data ***/
var
nutritionProperties = UizeSite.TestData.Fruits.getNutritionProperties (),
nutritionPropertiesLength = nutritionProperties.length
;
for (var propertyNo = -1; ++propertyNo < nutritionPropertiesLength;) {
var propertyName = nutritionProperties [propertyNo];
slideShow.addChild (
'slide' + Uize.capFirstChar (propertyName),
Uize.Widget.Bar,
Uize.copyInto (
{
html:UizeSite.Templates.DataBar,
minValue:0,
maxValue:1,
increments:0,
built:false,
unit:UizeSite.TestData.Fruits.getPropertyUnit (propertyName)
},
UizeSite.TestData.Fruits.getValueBoundsForProperty (propertyName)
)
);
}
/*** wire up the page widget ***/
page.wireUi ();
}
);
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer