jquery-ui/demos/effect/default.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Effects - Effect demo</title>
	<link rel="stylesheet" href="../../themes/base/all.css">
	<link rel="stylesheet" href="../demos.css">
	<style>
		.toggler { width: 500px; height: 200px; position: relative; }
		#button { padding: .5em 1em; text-decoration: none; }
		#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
		.ui-effects-transfer { border: 2px dotted gray; }
	</style>
	<script src="../../external/requirejs/require.js"></script>
	<script src="../bootstrap.js" data-modules="effects-all">
		// run the currently selected effect
		function runEffect() {
			// get effect type from
			var selectedEffect = $( "#effectTypes" ).val();

			// Most effect types need no options passed by default
			var options = {};
			// some effects have required parameters
			if ( selectedEffect === "scale" ) {
				options = { percent: 50 };
			} else if ( selectedEffect === "transfer" ) {
				options = { to: "#button", className: "ui-effects-transfer" };
			} else if ( selectedEffect === "size" ) {
				options = { to: { width: 200, height: 60 } };
			}

			// Run the effect
			$( "#effect" ).effect( selectedEffect, options, 500, callback );
		};

		// Callback function to bring a hidden box back
		function callback() {
			setTimeout(function() {
				$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
			}, 1000 );
		};

		// Set effect from select menu value
		$( "#button" ).on( "click", function() {
			runEffect();
			return false;
		});
	</script>
</head>
<body>

<div class="toggler">
	<div id="effect" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Effect</h3>
		<p>
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		</p>
	</div>
</div>

<select name="effects" id="effectTypes">
	<option value="blind">Blind</option>
	<option value="bounce">Bounce</option>
	<option value="clip">Clip</option>
	<option value="drop">Drop</option>
	<option value="explode">Explode</option>
	<option value="fade">Fade</option>
	<option value="fold">Fold</option>
	<option value="highlight">Highlight</option>
	<option value="puff">Puff</option>
	<option value="pulsate">Pulsate</option>
	<option value="scale">Scale</option>
	<option value="shake">Shake</option>
	<option value="size">Size</option>
	<option value="slide">Slide</option>
	<option value="transfer">Transfer</option>
</select>

<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>

<div class="demo-description">
<p>Click the button above to show the effect.</p>
</div>
</body>
</html>
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`<!doctype html>`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00			`<html lang="en">`
			`<head>`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`<meta charset="utf-8">`
Demos: Cleanup. 2010-09-10 02:33:09 +00:00			`<title>jQuery UI Effects - Effect demo</title>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<link rel="stylesheet" href="../../themes/base/all.css">`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`<link rel="stylesheet" href="../demos.css">`
			`<style>`
			`.toggler { width: 500px; height: 200px; position: relative; }`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00			`#button { padding: .5em 1em; text-decoration: none; }`
Effects: Rewrite 1. Introduces a set of helper methods to easily create and define new effects. 2. Uses clip animations and placeholders instead of wrappers for clip effects. 3. Ensures all animations are detectable as animated Fixes #10599 Fixes #9477 Fixes #9257 Fixes #9066 Fixes #8867 Fixes #8671 Fixes #8505 Fixes #7885 Fixes #7041 Closes gh-1017 2012-12-26 13:35:42 +00:00			`#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00			`#effect h3 { margin: 0; padding: 0.4em; text-align: center; }`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`.ui-effects-transfer { border: 2px dotted gray; }`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00			`</style>`
Effects: Update demos to use AMD Ref #10119 2015-06-30 22:57:51 +00:00			`<script src="../../external/requirejs/require.js"></script>`
			`<script src="../bootstrap.js" data-modules="effects-all">`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`// run the currently selected effect`
			`function runEffect() {`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`// get effect type from`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`var selectedEffect = $( "#effectTypes" ).val();`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00
Effects: Style updates Ref #14246 Ref gh-1588 2015-08-21 04:12:17 +00:00			`// Most effect types need no options passed by default`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00			`var options = {};`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`// some effects have required parameters`
			`if ( selectedEffect === "scale" ) {`
Effects: Rewrite 1. Introduces a set of helper methods to easily create and define new effects. 2. Uses clip animations and placeholders instead of wrappers for clip effects. 3. Ensures all animations are detectable as animated Fixes #10599 Fixes #9477 Fixes #9257 Fixes #9066 Fixes #8867 Fixes #8671 Fixes #8505 Fixes #7885 Fixes #7041 Closes gh-1017 2012-12-26 13:35:42 +00:00			`options = { percent: 50 };`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`} else if ( selectedEffect === "transfer" ) {`
			`options = { to: "#button", className: "ui-effects-transfer" };`
			`} else if ( selectedEffect === "size" ) {`
			`options = { to: { width: 200, height: 60 } };`
			`}`

Effects: Style updates Ref #14246 Ref gh-1588 2015-08-21 04:12:17 +00:00			`// Run the effect`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`$( "#effect" ).effect( selectedEffect, options, 500, callback );`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00			`};`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00
Effects: Style updates Ref #14246 Ref gh-1588 2015-08-21 04:12:17 +00:00			`// Callback function to bring a hidden box back`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`function callback() {`
			`setTimeout(function() {`
			`$( "#effect" ).removeAttr( "style" ).hide().fadeIn();`
			`}, 1000 );`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00			`};`
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00
Effects: Style updates Ref #14246 Ref gh-1588 2015-08-21 04:12:17 +00:00			`// Set effect from select menu value`
Effects: Remove core event/alias and deprecated module dependencies 2015-05-14 02:02:48 +00:00			`$( "#button" ).on( "click", function() {`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00			`runEffect();`
demos: effects - added return false; to button click handlers 2009-03-02 09:26:09 +00:00			`return false;`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00			`});`
			`</script>`
			`</head>`
			`<body>`

			`<div class="toggler">`
			`<div id="effect" class="ui-widget-content ui-corner-all">`
			`<h3 class="ui-widget-header ui-corner-all">Effect</h3>`
			`<p>`
			`Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.`
			`</p>`
			`</div>`
			`</div>`

			`<select name="effects" id="effectTypes">`
			`<option value="blind">Blind</option>`
			`<option value="bounce">Bounce</option>`
			`<option value="clip">Clip</option>`
			`<option value="drop">Drop</option>`
			`<option value="explode">Explode</option>`
Effects: Added fade effect. Needs documentation. Fixes #4416 - Add fade effect. 2009-11-13 04:35:47 +00:00			`<option value="fade">Fade</option>`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00			`<option value="fold">Fold</option>`
			`<option value="highlight">Highlight</option>`
			`<option value="puff">Puff</option>`
			`<option value="pulsate">Pulsate</option>`
			`<option value="scale">Scale</option>`
			`<option value="shake">Shake</option>`
			`<option value="size">Size</option>`
			`<option value="slide">Slide</option>`
			`<option value="transfer">Transfer</option>`
			`</select>`

Effect demo: Change anchor to button element 2014-04-24 08:44:09 +00:00			`<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00
Effects demos (partial): Coding standards. 2010-09-10 01:56:28 +00:00			`<div class="demo-description">`
			`<p>Click the button above to show the effect.</p>`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`</div>`
effect method demos page - possibly a good solution for this 2009-02-26 22:27:15 +00:00			`</body>`
			`</html>`