<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css"/> <script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script> <script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script> <script> $(document).ready(function(){ var selectedEffect = $('#effectTypes').val("Drop"); $(function() { //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 = {}; //check if it's scale, transfer, or size - they need options explicitly set if(selectedEffect == 'scale'){ options = {percent: 0}; } 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:hidden").removeAttr('style').hide().fadeIn(); }, 1000); }; //set effect from select menu value $("#button").click(function() { runEffect(); return false; }); }); }); </script> </head> <body class="iframe"> <div class="demo"> <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="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><!-- End demo --> <div style="display: none;" class="demo-description"> <p>Click the button above to show the effect.</p> </div><!-- End demo-description --> </body> </html> <style> .toggler { width: 500px; height: 200px; position: relative;} #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } .ui-effects-transfer { border: 2px dotted gray; } </style>
Тип
По умолчанию
Описание
строка
По умолчанию
left
Описание
Направление эффекта. Может быть"left", "right", "up", "down".
Тип
По умолчанию
Описание
строка
По умолчанию
hide
Описание
Метод эффекта. Может быть "show" or "hide".