Ticket #5555: correct_effects.htm

File correct_effects.htm, 3.3 KB (added by alxmsl, 12 years ago)

Correct working example

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<!-- saved from url=(0079)mhtml:file://C:\Workspace\LAMP\videodom\www\jQuery UI Effects - Toggle Demo.mht -->
3<HTML lang=en><HEAD><TITLE>jQuery UI Effects - Toggle Demo</TITLE>
4<STYLE type=text/css>.toggler {
5        WIDTH: 500px; HEIGHT: 200px
6}
7#button {
8        PADDING-BOTTOM: 0.5em; PADDING-LEFT: 1em; PADDING-RIGHT: 1em; TEXT-DECORATION: none; PADDING-TOP: 0.5em
9}
10#effect {
11        POSITION: relative; PADDING-BOTTOM: 0.4em; PADDING-LEFT: 0.4em; WIDTH: 240px; PADDING-RIGHT: 0.4em; HEIGHT: 135px; PADDING-TOP: 0.4em
12}
13#effect H3 {
14        TEXT-ALIGN: center; PADDING-BOTTOM: 0.4em; MARGIN: 0px; PADDING-LEFT: 0.4em; PADDING-RIGHT: 0.4em; PADDING-TOP: 0.4em
15}
16.ui-effects-transfer {
17        BORDER-BOTTOM: gray 2px dotted; BORDER-LEFT: gray 2px dotted; BORDER-TOP: gray 2px dotted; BORDER-RIGHT: gray 2px dotted
18}
19</STYLE>
20
21    <script type="text/javascript" src="scripts/jquery/jquery-1.4.2.js"></script>
22    <script type="text/javascript" src="scripts/jquery/jquery-ui-1.7.2.custom.min.js"></script>
23    <script type="text/javascript" src="scripts/jquery/jquery.corner.js"></script>
24    <script type="text/javascript" src="scripts/jquery/jquery.history.js"></script>
25    <script type="text/javascript" src="scripts/jquery/jquery.json.js"></script>
26
27<SCRIPT type="text/javascript">
28
29        $(function() {
30                //run the currently selected effect
31                function runEffect(){
32                        //get effect type from
33                        var selectedEffect = $('#effectTypes').val();
34                       
35                        //most effect types need no options passed by default
36                        var options = {};
37                        //check if it's scale, transfer, or size - they need options explicitly set
38                        if(selectedEffect == 'scale'){  options = {percent: 0}; }
39                        else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
40                       
41                        //run the effect
42                        $("#effect").toggle(selectedEffect,options,500);
43                };
44               
45                //set effect from select menu value
46                $("#button").click(function() {
47                        runEffect();
48                        return false;
49                });
50
51        });
52
53        </SCRIPT>
54
55<META name=GENERATOR content="MSHTML 8.00.6001.18904"></HEAD>
56<BODY>
57<DIV class=demo>
58<DIV class=toggler>
59<DIV id=effect class="ui-widget-content ui-corner-all" style="position: absolute; left: 110px">
60<H3 class="ui-widget-header ui-corner-all">Toggle</H3>
61<P>Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla
62lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
63</P></DIV></DIV><SELECT id=effectTypes name=effects> <OPTION selected 
64  value=blind>Blind</OPTION> <OPTION value=bounce>Bounce</OPTION> <OPTION 
65  value=clip>Clip</OPTION> <OPTION value=drop>Drop</OPTION> <OPTION 
66  value=explode>Explode</OPTION> <OPTION value=fold>Fold</OPTION> <OPTION 
67  value=highlight>Highlight</OPTION> <OPTION value=puff>Puff</OPTION> <OPTION 
68  value=pulsate>Pulsate</OPTION> <OPTION value=scale>Scale</OPTION> <OPTION 
69  value=shake>Shake</OPTION> <OPTION value=size>Size</OPTION> <OPTION 
70  value=slide>Slide</OPTION> <OPTION value=transfer>Transfer</OPTION></SELECT> <A 
71id=button class="ui-state-default ui-corner-all" 
72href="http://jqueryui.com/demos/toggle/default.html#">Run Effect</A> </DIV><!-- End demo -->
73<DIV class=demo-description>
74<P>Click the button above to preview the effect.</P></DIV><!-- End demo-description --></BODY></HTML>