115 lines
No EOL
4.9 KiB
HTML
115 lines
No EOL
4.9 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|
<title>YUI Container - Tutorials (YUI Library)</title>
|
|
|
|
<link type="text/css" rel="stylesheet" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../examples/assets/dpSyntaxHighlighter.css">
|
|
<link type="text/css" rel="stylesheet" href="assets/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="doc3" class="yui-t5">
|
|
<div id="hd">
|
|
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
|
|
<h1>YUI Container: Tutorials</h1>
|
|
</div>
|
|
|
|
<div id="bd">
|
|
|
|
<div id="toc" class="yui-b">
|
|
<ul>
|
|
<li class="sect"><a href="#">YUI Container: Tutorials</a></li>
|
|
|
|
<li class="item"><a href="module/1.html">Module: Quickstart</a></li>
|
|
<li class="item"><a href="overlay/1.html">Overlay: Quickstart</a></li>
|
|
<li class="item"><a href="tooltip/1.html">Tooltip: Quickstart</a></li>
|
|
<li class="item"><a href="tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
|
|
<li class="item"><a href="panel/1.html">Panel: Quickstart</a></li>
|
|
<li class="item"><a href="skin/1.html">Panel: Skinning</a></li>
|
|
<li class="item"><a href="panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
|
|
<li class="item"><a href="panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
|
|
<li class="item"><a href="panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
|
|
<li class="item"><a href="panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
|
|
<li class="item"><a href="dialog/1.html">Dialog Quickstart</a></li>
|
|
<li class="item"><a href="simpledialog/1.html">SimpleDialog Quickstart</a></li>
|
|
<li class="item"><a href="effect/1.html">Using ContainerEffect</a></li>
|
|
<li class="item"><a href="overlaymanager/1.html">Using OverlayManager</a></li>
|
|
<li class="item"><a href="keylistener/1.html">Using KeyListener</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="yui-main">
|
|
<div class="yui-b">
|
|
<h1 class="first">YUI Container Interactive Tutorials</h1>
|
|
|
|
|
|
<p>The YUI Calendar Tutorials will provide you with working examples of several common uses of the Calendar component. Each tutorial contains a working functional example, plus documentation describing how it works.</p>
|
|
|
|
|
|
<div id="landing">
|
|
<h3><a href="module/1.html">Module: Quickstart</a></h3>
|
|
<p>Quickly get up and running with the most basic Modules.</p>
|
|
|
|
<h3><a href="overlay/1.html">Overlay: Quickstart</a></h3>
|
|
<p>Create an position a simple Overlay.</p>
|
|
|
|
<h3><a href="tooltip/1.html">Tooltip: Quickstart</a></h3>
|
|
<p>Create several Tooltips associated with different types of elements.</p>
|
|
|
|
<h3><a href="tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></h3>
|
|
<p>Get a significant performance boost by reusing one Tooltip for a large number of context elements.</p>
|
|
|
|
<h3><a href="panel/1.html">Panel: Quickstart</a></h3>
|
|
<p>Create and display a simple draggable content Panel.</p>
|
|
|
|
<h3><a href="skin/1.html">Panel: Skinning</a></h3>
|
|
<p>Learn how to use Panel's CSS hooks to customize its look and feel.</p>
|
|
|
|
<h3><a href="panelskin/1.html">Panel: Advanced Skinning using CSS</a></h3>
|
|
<p>Modify the classic Panel using only CSS to give it a more OS-like look and feel.</p>
|
|
|
|
<h3><a href="panelwait/1.html">Panel: Creating a 'Loading' Popup</a></h3>
|
|
<p>Use Panel to temporarily display a message while a large block of content is loading asynchronously.</p>
|
|
|
|
<h3><a href="panelphotobox/1.html">PhotoBox: Subclassing Panel</a></h3>
|
|
<p>Build a subclass of Panel that acts as a simple photo slideshow with basic navigational features.</p>
|
|
|
|
<h3><a href="panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></h3>
|
|
<p>Build a subclass of Panel that adds a special resize handle to the footer for dynamically resizing the Panel using drag and drop.</p>
|
|
|
|
<h3><a href="dialog/1.html">Dialog Quickstart</a></h3>
|
|
<p>Create a basic Dialog and submit its form contents asynchronously.</p>
|
|
|
|
<h3><a href="simpledialog/1.html">SimpleDialog Quickstart</a></h3>
|
|
<p>Dynamically build a simple OK/Cancel dialog and react to the user's response.</p>
|
|
|
|
<h3><a href="effect/1.html">Using ContainerEffect</a></h3>
|
|
<p>Learn to use the 'effect' property in conjunction with the ContainerEffect class to animate your containers when they are shown and hidden.</p>
|
|
|
|
<h3><a href="overlaymanager/1.html">Using OverlayManager</a></h3>
|
|
<p>Use the OverlayManager to register a set of containers for focus tracking.</p>
|
|
|
|
<h3><a href="keylistener/1.html">Using KeyListener</a></h3>
|
|
<p>Configure the 'keylistener' property to allow containers to dynamically react to key press events.</p>
|
|
|
|
</div>
|
|
<div id="stepnav">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="ft"> </div>
|
|
</div>
|
|
|
|
<script src="../../examples/assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
</body>
|
|
</html> |