Mercurial Mercurial > eulalie / annotate
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
web/static/css/jq-css/demos/effect/default.html
author veltr
Wed, 27 Jun 2012 13:15:28 +0200
changeset 71 fa03eb8a3fe5
parent 30 81d408373dde
permissions -rw-r--r--
Added "Add" functionality
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
30
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     1
 
<!DOCTYPE html>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     2
 
<html lang="en">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     3
 
<head>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     4
 
	<meta charset="UTF-8" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     5
 
	<title>jQuery UI Effects - Effect Demo</title>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     6
 
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     7
 
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     8
 
	<script type="text/javascript" src="../../ui/jquery.effects.core.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     9
 
	<script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    10
 
	<script type="text/javascript" src="../../ui/jquery.effects.bounce.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    11
 
	<script type="text/javascript" src="../../ui/jquery.effects.clip.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    12
 
	<script type="text/javascript" src="../../ui/jquery.effects.drop.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    13
 
	<script type="text/javascript" src="../../ui/jquery.effects.explode.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    14
 
	<script type="text/javascript" src="../../ui/jquery.effects.fade.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    15
 
	<script type="text/javascript" src="../../ui/jquery.effects.fold.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    16
 
	<script type="text/javascript" src="../../ui/jquery.effects.highlight.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    17
 
	<script type="text/javascript" src="../../ui/jquery.effects.pulsate.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    18
 
	<script type="text/javascript" src="../../ui/jquery.effects.scale.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    19
 
	<script type="text/javascript" src="../../ui/jquery.effects.shake.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    20
 
	<script type="text/javascript" src="../../ui/jquery.effects.slide.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    21
 
	<script type="text/javascript" src="../../ui/jquery.effects.transfer.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    22
 
	<link type="text/css" href="../demos.css" rel="stylesheet" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    23
 
	<style type="text/css">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    24
 
		.toggler { width: 500px; height: 200px; position: relative;}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    25
 
		#button { padding: .5em 1em; text-decoration: none; }
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    26
 
		#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    27
 
		#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    28
 
		.ui-effects-transfer { border: 2px dotted gray; }
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    29
 
	</style>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    30
 
	<script type="text/javascript">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    31
 
	$(function() {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    32
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    33
 
		//run the currently selected effect
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    34
 
		function runEffect(){
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    35
 
			//get effect type from
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    36
 
			var selectedEffect = $('#effectTypes').val();
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    37
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    38
 
			//most effect types need no options passed by default
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    39
 
			var options = {};
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    40
 
			//check if it's scale, transfer, or size - they need options explicitly set
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    41
 
			if(selectedEffect == 'scale'){ options = {percent: 0}; }
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    42
 
			else if(selectedEffect == 'transfer'){ options = { to: "#button", className: 'ui-effects-transfer' }; }
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    43
 
			else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    44
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    45
 
			//run the effect
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    46
 
			$("#effect").effect(selectedEffect,options,500,callback);
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    47
 
		};
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    48
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    49
 
		//callback function to bring a hidden box back
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    50
 
		function callback(){
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    51
 
			setTimeout(function(){
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    52
 
				$("#effect:hidden").removeAttr('style').hide().fadeIn();
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    53
 
			}, 1000);
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    54
 
		};
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    55
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    56
 
		//set effect from select menu value
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    57
 
		$("#button").click(function() {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    58
 
			runEffect();
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    59
 
			return false;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    60
 
		});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    61
 
	});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    62
 
	</script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    63
 
</head>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    64
 
<body>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    65
 












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    66


<div class="demo">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    67














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    68


<div class="toggler">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    69


	<div id="effect" class="ui-widget-content ui-corner-all">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    70


		<h3 class="ui-widget-header ui-corner-all">Effect</h3>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    71


		<p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    72


			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    73


		</p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    74


	</div>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    75


</div>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    76














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    77


<select name="effects" id="effectTypes">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    78


	<option value="blind">Blind</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    79


	<option value="bounce">Bounce</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    80


	<option value="clip">Clip</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    81


	<option value="drop">Drop</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    82


	<option value="explode">Explode</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    83


	<option value="fade">Fade</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    84


	<option value="fold">Fold</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    85


	<option value="highlight">Highlight</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    86


	<option value="puff">Puff</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    87


	<option value="pulsate">Pulsate</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    88


	<option value="scale">Scale</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    89


	<option value="shake">Shake</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    90


	<option value="size">Size</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    91


	<option value="slide">Slide</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    92


	<option value="transfer">Transfer</option>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    93


</select>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    94














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    95


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












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    96














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    97














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    98


</div><!-- End demo -->












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    99














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




   100


<div class="demo-description">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




   101














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




   102


<p>Click the button above to show the effect.</p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




   103














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




   104


</div><!-- End demo-description -->












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




   105














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




   106


</body>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




   107


</html>














eulalie