|
|
Line 1: |
Line 1: |
| <html> | | <html> |
- | <style type="text/css"> | + | <head> |
- | #button {
| + | <meta charset="utf-8" /> |
- | padding: .5em 1em;
| + | <title>Demo</title> |
- | text-decoration: none;
| + | </head> |
- | }
| + | <body> |
- | #effect {
| + | <a href="http://jquery.com/">jQuery</a> |
- | position: relative;
| + | <script src="jquery.js"></script> |
- | width: 240px;
| + | |
- | height: 135px;
| + | |
- | padding: 0.4em;
| + | |
- | }
| + | |
- | #effect h3 {
| + | |
- | margin: 0;
| + | |
- | padding: 0.4em;
| + | |
- | text-align: center;
| + | |
- | }
| + | |
- | </style> | + | |
- | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | + | |
- | <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
| + | |
| <script> | | <script> |
- | $(function() {
| + | // Your code goes here. |
- | // 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: 0 };
| + | |
- | } else if ( selectedEffect === "size" ) {
| + | |
- | options = { to: { width: 200, height: 60 } };
| + | |
- | }
| + | |
- | // run the effect
| + | |
- | $( "#effect" ).toggle( selectedEffect, options, 500 );
| + | |
- | };
| + | |
- | // set effect from select menu value
| + | |
- | $( "#button" ).click(function() {
| + | |
- | runEffect();
| + | |
- | return false;
| + | |
- | });
| + | |
- | });
| + | |
| </script> | | </script> |
- | | + | </body> |
- | <div class="toggler">
| + | |
- | <div id="effect" class="ui-widget-content ui-corner-all">
| + | |
- | <h3 class="ui-widget-header ui-corner-all">Toggle</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>
| + | |
- | | + | |
- | <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
| + | |
| </html> | | </html> |