DIR : /home/kozerus/public_html/pn/uize/site-source/examples/marquee-modes.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>Different Marquee Modes | JavaScript Examples | UIZE JavaScript Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="touch ipad Uize.Widget.Resizer.Marquee"/>
<meta name="description" content="See how to configure the marquee widget. Learn how to contrain to area, have a fixed aspect ratio, minimum dimensions, non-resizable sides, and more."/>
<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"/>
<style type="text/css">
.marquees {
position:relative;
width:740px;
height:680px;
margin:auto;
}
.marquees .marqueeHeading,
.marquees .marquee
{
position:absolute;
width:365px;
}
.marquees .marqueeHeading {
margin:0;
font-size:11px;
padding-top:2px;
text-transform:none;
letter-spacing:0;
height:20px;
border:none;
}
.marquees .marquee {
height:200px;
}
.marquees .column1 {left:0;}
.marquees .column2 {left:375px;}
.marquees .row1Heading {top:0;}
.marquees .row1Marquee {top:20px;}
.marquees .row2Heading {top:230px;}
.marquees .row2Marquee {top:250px;}
.marquees .row3Heading {top:460px;}
.marquees .row3Marquee {top:480px;}
</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>
Different Marquee Modes
<div class="pageActionsShell">
<div id="page-actions" class="pageActions"><a href="source-code/marquee-modes.html" class="buttonLink">SOURCE</a></div>
</div>
</h1>
<!-- explanation copy -->
<div class="explanation">
<p>This example demonstrates some of the ways that the marquee widget can be configured to suit different needs. In the example, six instances of the <a href="../reference/Uize.Widget.Resizer.Marquee.html"><code>Uize.Widget.Resizer.Marquee</code></a> class are instantiated, each with a slightly different initial state. Above each marquee is a heading that summarizes how the marquee is configured. Play around with the marquees to see how each behaves. Then view the source code to see how they are configured.</p>
</div>
<!-- marquee UI wireframe -->
<div class="marquees">
<div class="exampleSectionHeading marqueeHeading column1 row1Heading">
2:1 fixed aspect ratio, constrained to area, 100 x 50 min size
</div>
<div id="page_marquee0" class="marquee column1 row1Marquee darkInsetBackgroundColor"></div>
<div class="exampleSectionHeading marqueeHeading column2 row1Heading">
1:1 fixed aspect ratio, constrained to area, 20 x 20 min size
</div>
<div id="page_marquee1" class="marquee column2 row1Marquee darkInsetBackgroundColor"></div>
<div class="exampleSectionHeading marqueeHeading column1 row2Heading">
free aspect ratio, constrained to area, 20 x 20 min size
</div>
<div id="page_marquee2" class="marquee column1 row2Marquee darkInsetBackgroundColor"></div>
<div class="exampleSectionHeading marqueeHeading column2 row2Heading">
free aspect ratio, not constrained to area, 20 x 20 min size
</div>
<div id="page_marquee3" class="marquee column2 row2Marquee darkInsetBackgroundColor"></div>
<div class="exampleSectionHeading marqueeHeading column1 row3Heading">
fixed width, constrained to area, 20 x 20 min size
</div>
<div id="page_marquee4" class="marquee column1 row3Marquee darkInsetBackgroundColor"></div>
<div class="exampleSectionHeading marqueeHeading column2 row3Heading">
fixed width and height, constrained to area, 20 x 20 min size
</div>
<div id="page_marquee5" class="marquee column2 row3Marquee darkInsetBackgroundColor"></div>
</div>
</div>
<!-- JavaScript code to make the static marquee HTML "come alive" -->
<script type="text/javascript">
Uize.require (
[
'UizeSite.Page.Example.library',
'UizeSite.Page.Example',
'Uize.Widget.Resizer.Marquee'
],
function () {
'use strict';
/*** create the example page widget ***/
var page = window.page = UizeSite.Page.Example ();
/*** create the marquee instances ***/
page.addChild (
'marquee0',
Uize.Widget.Resizer.Marquee,
{
aspectRatio:2,
constrain:true,
width:100,
height:50,
minWidth:100,
minHeight:50,
built:false
}
);
page.addChild (
'marquee1',
Uize.Widget.Resizer.Marquee,
{
aspectRatio:1,
constrain:true,
width:50,
height:50,
minWidth:20,
minHeight:20,
built:false
}
);
page.addChild (
'marquee2',
Uize.Widget.Resizer.Marquee,
{
constrain:true,
width:100,
height:50,
minWidth:20,
minHeight:20,
built:false
}
);
page.addChild (
'marquee3',
Uize.Widget.Resizer.Marquee,
{
constrain:false,
width:100,
height:50,
minWidth:20,
minHeight:20,
built:false
}
);
page.addChild (
'marquee4',
Uize.Widget.Resizer.Marquee,
{
constrain:true,
width:100,
height:50,
minWidth:20,
minHeight:20,
fixedX:true,
built:false
}
);
page.addChild (
'marquee5',
Uize.Widget.Resizer.Marquee,
{
constrain:true,
width:100,
height:50,
minWidth:20,
minHeight:20,
fixedX:true,
fixedY:true,
built:false
}
);
/*** 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