<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Creating an Animated Panel</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Creating an Animated Panel</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><div class="intro">
<p>
This example demonstrates how to instantiate a panel and use it in conjunction with the <code>"transition"</code> module to create an animated panel.
</p>
</div>
<div class="example newwindow">
<a href="panel-animate-example.html" target="_blank" class="button">
View Example in New Window
</a>
</div>
<h2>Creating an animated panel</h2>
<h3>Setting Up The YUI Instance</h3>
<p>
To create an instance of a Panel on your page, the only module you need to request is the <code>panel</code> module. The <code>panel</code> module will pull in the <code>widget</code>, <code>widget-stack</code>, <code>widget-position</code>, <code>widget-position-align</code>, <code>widget-position-constrain</code>, <code>widget-stdmod</code>, <code>widget-buttons</code>, <code>widget-modality</code> and <code>widget-autohide</code> extensions it uses.
</p>
<p>
For this example, we also need to use the <code>transition</code> module. This module allows us to easily create animations using CSS3 transitions, with a JavaScript timer fallback.
</p>
<pre class="code prettyprint lang-javascript">YUI().use('panel', 'transition', function (Y) {
// We'll write example code here
});</pre>
<p>
Note, using the <code>panel</code> module, will also pull down the default CSS required for panel. The CSS that styles the Panel requires you to have the class <code>yui3-skin-sam</code> on a parent element, commonly the <code><body></code> tag.
</p>
<p>
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
page's <code><body></code> element or to a parent element of the widget in order to apply
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
</p>
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre>
<h3>Instantiating the Panel</h3>
<p>
For this example, we'll instantiate a modal panel, set its visibility to false, and set some CSS properties. The following HTML will be used as the markup for the panel.
</p>
<pre class="code prettyprint lang-html"><div id="panelContent">
<div class="yui3-widget-hd">
Showing an animated panel
</div>
<div class="yui3-widget-bd">
<p>Making panels animate is easy with the "transition" module!</p>
</div>
</div></pre>
<p>The JavaScript to instantiate the panel is as follows:</p>
<pre class="code prettyprint lang-javascript">var panel = new Y.Panel({
srcNode: '#panelContent',
width : 330,
xy : [300, -300],
zIndex : 5,
modal : true,
visible: false,
render : true,
buttons: [
{
value : 'Close the panel',
section: 'footer',
action : function (e) {
e.preventDefault();
hidePanel();
}
}
]
});</pre>
<h3>Adding Animation</h3>
<p>
To create the animations, we need to set up transition properties on the panel's <code>boundingBox</code>. These properties consist of key/value pairs of CSS properties that we want to alter.
</p>
<p>
We define two methods <code>showPanel()</code> and <code>hidePanel()</code> that define transitions. We could also use the <code>visibleChange</code> event to toggle the animation based on the state. However, the benefit of this method is that it allows us to use callback functions after the <code>transition</code> has ended.
</p>
<pre class="code prettyprint lang-javascript">function showPanel() {
panel.show();
bb.transition({
duration: 0.5,
top : '80px'
});
}
function hidePanel() {
bb.transition({
duration: 0.5,
top : '-300px'
}, function () {
panel.hide();
});
}</pre>
<h3>Adding Buttons to toggle visibility</h3>
<p>
Finally, we create two buttons, one to show the panel and one to hide it.
</p>
<p>
The button to close the panel was specified in the instantiation of the panel. The button to open the panel can be defined as:
</p>
<pre class="code prettyprint lang-javascript">// Add Panel show button.
openBtn.on('click', function (e) {
showPanel();
});</pre>
<h3>Complete Example Source</h3>
<pre class="code prettyprint"><style type="text/css">
.yui3-panel {
outline: none;
}
.yui3-panel #panelContent {
-webkit-box-shadow: 0px 0px 2px black;
-moz-box-shadow: 0px 0px 2px black;
box-shadow: 0px 0px 2px black;
}
.yui3-panel #panelContent .yui3-widget-hd {
font-weight: bold;
padding: 5px;
}
#panelContent .yui3-widget-bd {
padding: 15px;
background: white;
text-align: center;
}
#panelContent.yui3-widget-loading {
display: none;
}
.yui3-skin-sam .yui3-widget-mask {
background-color: #223460;
opacity: 0.9;
}
</style>
<h2>Creating an animated panel using transitions</h2>
<p>
This example shows an animated modal form.
<button id="openButton">Open Panel</button>
</p>
<p>
Now let's fill this space with some text so that the modality kicks in.
</p>
<p>
Vestibulum quis purus metus. Quisque in adipiscing erat. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In vitae
lacus tellus, non iaculis arcu. Donec nec risus diam. Vivamus sed mauris eros,
nec ultrices nibh. Phasellus scelerisque aliquet mauris, faucibus aliquam ipsum
tempor quis. Integer quis risus sed tellus ornare venenatis quis ut magna.
Integer erat mauris, hendrerit faucibus iaculis eu, feugiat vitae massa. Aliquam
mi augue, tincidunt id porttitor ut, lacinia sed eros. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum
fringilla urna vel cursus. Etiam et suscipit eros. In ornare lacinia est, sed
bibendum ligula blandit nec. Vestibulum tristique pulvinar nunc, quis lacinia
eros facilisis vel. Duis tristique porttitor risus, vel laoreet ligula mollis
vitae. Nam ornare justo a turpis mattis cursus.
</p>
<div id="panelContent" class="yui3-widget-loading">
<div class="yui3-widget-hd">
Showing an animated panel
</div>
<div class="yui3-widget-bd">
<p>Making panels animate is easy with the "transition" module!</p>
</div>
</div>
<script type="text/javascript">
YUI().use('transition', 'panel', function (Y) {
var openBtn = Y.one('#openButton'),
panel, bb;
function showPanel() {
panel.show();
bb.transition({
duration: 0.5,
top : '80px'
});
}
function hidePanel() {
bb.transition({
duration: 0.5,
top : '-300px'
}, function () {
panel.hide();
});
}
panel = new Y.Panel({
srcNode: '#panelContent',
width : 330,
xy : [300, -300],
zIndex : 5,
modal : true,
visible: false,
render : true,
buttons: [
{
value : 'Close the panel',
section: 'footer',
action : function (e) {
e.preventDefault();
hidePanel();
}
}
]
});
bb = panel.get('boundingBox');
openBtn.on('click', function (e) {
showPanel();
});
});
</script></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
<a href="panel-form.html">Creating a Modal Form</a>
</li>
<li data-description="Shows how to create a panel that animates as it is shown and hidden">
<a href="panel-animate.html">Creating an Animated Panel</a>
</li>
<li data-description="Shows how to create a dialog instance that can be reused for multiple messages and confirmations.">
<a href="dialog.html">Creating a Reusable Dialog</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/panel',
name: 'panel-animate',
title: 'Creating an Animated Panel',
newWindow: 'true',
auto: false
};
YUI.Env.Tests.examples.push('panel-form');
YUI.Env.Tests.examples.push('panel-animate');
YUI.Env.Tests.examples.push('dialog');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>