src/third_party/closure_library/closure/goog/demos/zippy.html - incubator-pagespeed-debian - Git at Google

 <!DOCTYPE html>
 <html>
 <!--
 Copyright 2010 The Closure Library Authors. All Rights Reserved.

 Use of this source code is governed by the Apache License, Version 2.0.
 See the COPYING file for details.
 -->
 <head>
   <title>goog.ui.Zippy</title>
   <meta charset="utf-8">
   <script src="../base.js"></script>
   <script>
     goog.require('goog.debug.DivConsole');
     goog.require('goog.debug.LogManager');
     goog.require('goog.events');
     goog.require('goog.log');
     goog.require('goog.ui.AnimatedZippy');
     goog.require('goog.ui.Zippy');
     goog.require('goog.ui.ZippyEvent');
   </script>
   <link rel="stylesheet" href="css/demo.css">
   <style>
     h2 {
       background: #C0C0FF;
       margin-top: 10px;
       margin-bottom: 0px;
       cursor: pointer;
       padding: 1px 3px;
     }
     div {
       margin: 0px;
       padding: 0px;
     }
     p {
       background: #DEDEFF;
       border: solid #C0C0FF;
       border-width: 0px 3px 3px 3px;
       margin-top: 0px;
       padding: 3px;
       text-align: justify;
       overflow: hidden;
     }
     img {
       width: 19px;
       height: 16px;
     }
     .goog-zippy-expanded img {
       background-image: url('../images/minus.png');
     }
     .goog-zippy-collapsed img {
       background-image: url('../images/plus.png');
     }
   </style>
 </head>
 <body>
   <h1>goog.ui.Zippy</h1>

   <h2 id="header1">Zippy 1</h2>
   <p id="content1">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et nisi id
     lorem tempor semper. Suspendisse ante. Integer ligula urna, venenatis quis,
     placerat vitae, commodo quis, sapien. Quisque nec lectus. Sed non dolor. Sed
     congue, nisi in pharetra consequat, odio diam pulvinar arcu, in laoreet elit
     risus id ipsum. Class aptent taciti sociosqu ad litora torquent per conubia
     nostra, per inceptos hymenaeos. Praesent tellus enim, imperdiet a, sagittis
     id, pulvinar vel, tortor. Integer nulla. Sed nulla augue, lacinia id,
     vulputate eu, rhoncus non, ante. Integer lobortis eros vitae quam. Phasellus
     sagittis, ipsum sollicitudin bibendum laoreet, arcu erat luctus lacus, vel
     pharetra felis metus tincidunt diam. Cras ac augue in enim ultricies aliquam.
   </p>

   <div style="width: 400px; float: left;">
     <h2 id="header2"><img src="../images/blank.gif" />Zippy 2</h2>
     <p id="content2">
       Nunc et eros. Aliquam felis lectus, sagittis ac, sagittis eu, accumsan
       vitae, leo. Maecenas suscipit, arcu eget elementum tincidunt, erat ligula
       porttitor dui, quis ornare nisi turpis at ipsum. Vivamus magna tortor,
       porttitor eu, cursus ut, vulputate in, nulla. Quisque nonummy feugiat
       turpis. Cras lobortis lobortis elit. Aliquam congue, pede suscipit
       condimentum convallis, diam purus dictum lacus, eu scelerisque mi est
       molestie libero. Duis luctus dapibus nibh. Sed condimentum iaculis metus.
       Pellentesque habitant morbi tristique senectus et netus et malesuada fames
       ac turpis egestas. In pharetra dolor porta eros facilisis pellentesque.
       Proin quam mi, sodales vel, tincidunt sit amet, convallis vel, eros.
       Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
       cubilia Curae; Phasellus velit augue, rutrum sit amet, posuere nec, euismod
       ac, elit. Etiam nisi.
     </p>
   </div>

   <div style="width: 400px; float: left; margin-left: 5px; ">
     <h2 id="header3"><img src="../images/blank.gif" />Zippy 3</h2>
     <p id="content3">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas commodo
       convallis nisi. Cras rhoncus elit non dolor. Vivamus gravida ultricies arcu.
       Praesent ipsum erat, vehicula et, ultrices at, dignissim at, ipsum. Aenean
       venenatis. Fusce blandit laoreet urna. Aliquam et pede condimentum lorem
       posuere molestie. Pellentesque habitant morbi tristique senectus et netus et
       malesuada fames ac turpis egestas. Fusce euismod, justo in feugiat feugiat,
       urna metus sagittis felis, in varius neque mauris vitae dui. Nunc vel sapien
       in diam laoreet euismod. Mauris quis felis ut ipsum auctor feugiat. Nulla
       facilisi. Proin vitae urna. Quisque dignissim commodo nisl. Curabitur
       bibendum.
     </p>
   </div>

   <div style="clear: both;">
     Zippy 2 sets the expanded state of zippy 3 to the inverted expanded state of
     itself. Hence expanding zippy 2 collapses zippy 3 and vice verse.
   </div>
   <div>
     Zippy 2 and 3 are animated, zippy 1 is not.
   </div>

   <hr>
   <div id="log"></div>
   <script>
     // Set up a logger.
     goog.debug.LogManager.getRoot().setLevel(goog.log.Level.ALL);
     var logger = goog.log.getLogger('zippy');
     var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
     logconsole.setCapturing(true);

     var EVENTS = goog.object.getValues(goog.ui.Zippy.Events);
     goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');

     function logEvent(e) {
       var caption = e.target.elHeader_.id;
       goog.log.info(logger, '"' + caption + '" dispatched: ' + e.type);
     }

     var z1 = new goog.ui.Zippy('header1', 'content1');
     goog.events.listen(z1, EVENTS, logEvent);
     var z2 = new goog.ui.AnimatedZippy('header2', 'content2', true);
     goog.events.listen(z2, EVENTS, logEvent);
     var z3 = new goog.ui.AnimatedZippy('header3', 'content3', false);
     goog.events.listen(z3, EVENTS, logEvent);

     z1.expand();

     function zippyToggle(event) {
       z3.setExpanded(!event.expanded);
     }

     goog.events.listen(z2, goog.ui.Zippy.Events.TOGGLE, zippyToggle);
   </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<!--
	Copyright 2010 The Closure Library Authors. All Rights Reserved.

	Use of this source code is governed by the Apache License, Version 2.0.
	See the COPYING file for details.
	-->
	<head>
	<title>goog.ui.Zippy</title>
	<meta charset="utf-8">
	<script src="../base.js"></script>
	<script>
	goog.require('goog.debug.DivConsole');
	goog.require('goog.debug.LogManager');
	goog.require('goog.events');
	goog.require('goog.log');
	goog.require('goog.ui.AnimatedZippy');
	goog.require('goog.ui.Zippy');
	goog.require('goog.ui.ZippyEvent');
	</script>
	<link rel="stylesheet" href="css/demo.css">
	<style>
	h2 {
	background: #C0C0FF;
	margin-top: 10px;
	margin-bottom: 0px;
	cursor: pointer;
	padding: 1px 3px;
	}
	div {
	margin: 0px;
	padding: 0px;
	}
	p {
	background: #DEDEFF;
	border: solid #C0C0FF;
	border-width: 0px 3px 3px 3px;
	margin-top: 0px;
	padding: 3px;
	text-align: justify;
	overflow: hidden;
	}
	img {
	width: 19px;
	height: 16px;
	}
	.goog-zippy-expanded img {
	background-image: url('../images/minus.png');
	}
	.goog-zippy-collapsed img {
	background-image: url('../images/plus.png');
	}
	</style>
	</head>
	<body>
	<h1>goog.ui.Zippy</h1>

	<h2 id="header1">Zippy 1</h2>
	<p id="content1">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et nisi id
	lorem tempor semper. Suspendisse ante. Integer ligula urna, venenatis quis,
	placerat vitae, commodo quis, sapien. Quisque nec lectus. Sed non dolor. Sed
	congue, nisi in pharetra consequat, odio diam pulvinar arcu, in laoreet elit
	risus id ipsum. Class aptent taciti sociosqu ad litora torquent per conubia
	nostra, per inceptos hymenaeos. Praesent tellus enim, imperdiet a, sagittis
	id, pulvinar vel, tortor. Integer nulla. Sed nulla augue, lacinia id,
	vulputate eu, rhoncus non, ante. Integer lobortis eros vitae quam. Phasellus
	sagittis, ipsum sollicitudin bibendum laoreet, arcu erat luctus lacus, vel
	pharetra felis metus tincidunt diam. Cras ac augue in enim ultricies aliquam.
	</p>

	<div style="width: 400px; float: left;">
	<h2 id="header2"><img src="../images/blank.gif" />Zippy 2</h2>
	<p id="content2">
	Nunc et eros. Aliquam felis lectus, sagittis ac, sagittis eu, accumsan
	vitae, leo. Maecenas suscipit, arcu eget elementum tincidunt, erat ligula
	porttitor dui, quis ornare nisi turpis at ipsum. Vivamus magna tortor,
	porttitor eu, cursus ut, vulputate in, nulla. Quisque nonummy feugiat
	turpis. Cras lobortis lobortis elit. Aliquam congue, pede suscipit
	condimentum convallis, diam purus dictum lacus, eu scelerisque mi est
	molestie libero. Duis luctus dapibus nibh. Sed condimentum iaculis metus.
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames
	ac turpis egestas. In pharetra dolor porta eros facilisis pellentesque.
	Proin quam mi, sodales vel, tincidunt sit amet, convallis vel, eros.
	Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
	cubilia Curae; Phasellus velit augue, rutrum sit amet, posuere nec, euismod
	ac, elit. Etiam nisi.
	</p>
	</div>

	<div style="width: 400px; float: left; margin-left: 5px; ">
	<h2 id="header3"><img src="../images/blank.gif" />Zippy 3</h2>
	<p id="content3">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas commodo
	convallis nisi. Cras rhoncus elit non dolor. Vivamus gravida ultricies arcu.
	Praesent ipsum erat, vehicula et, ultrices at, dignissim at, ipsum. Aenean
	venenatis. Fusce blandit laoreet urna. Aliquam et pede condimentum lorem
	posuere molestie. Pellentesque habitant morbi tristique senectus et netus et
	malesuada fames ac turpis egestas. Fusce euismod, justo in feugiat feugiat,
	urna metus sagittis felis, in varius neque mauris vitae dui. Nunc vel sapien
	in diam laoreet euismod. Mauris quis felis ut ipsum auctor feugiat. Nulla
	facilisi. Proin vitae urna. Quisque dignissim commodo nisl. Curabitur
	bibendum.
	</p>
	</div>

	<div style="clear: both;">
	Zippy 2 sets the expanded state of zippy 3 to the inverted expanded state of
	itself. Hence expanding zippy 2 collapses zippy 3 and vice verse.
	</div>
	<div>
	Zippy 2 and 3 are animated, zippy 1 is not.
	</div>

	<hr>
	<div id="log"></div>
	<script>
	// Set up a logger.
	goog.debug.LogManager.getRoot().setLevel(goog.log.Level.ALL);
	var logger = goog.log.getLogger('zippy');
	var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
	logconsole.setCapturing(true);

	var EVENTS = goog.object.getValues(goog.ui.Zippy.Events);
	goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');

	function logEvent(e) {
	var caption = e.target.elHeader_.id;
	goog.log.info(logger, '"' + caption + '" dispatched: ' + e.type);
	}

	var z1 = new goog.ui.Zippy('header1', 'content1');
	goog.events.listen(z1, EVENTS, logEvent);
	var z2 = new goog.ui.AnimatedZippy('header2', 'content2', true);
	goog.events.listen(z2, EVENTS, logEvent);
	var z3 = new goog.ui.AnimatedZippy('header3', 'content3', false);
	goog.events.listen(z3, EVENTS, logEvent);

	z1.expand();

	function zippyToggle(event) {
	z3.setExpanded(!event.expanded);
	}

	goog.events.listen(z2, goog.ui.Zippy.Events.TOGGLE, zippyToggle);
	</script>
	</body>
	</html>