mirror of
https://github.com/tuxis-ie/nsedit.git
synced 2025-06-08 00:57:01 +03:00
Merge commit 'd32092c1f0' as 'jquery-ui'
This commit is contained in:
Mark Schouten
commit
b23131fdc2
717 changed files with 518330 additions and 0 deletions
205
jquery-ui/tests/visual/effects/all.html
Normal file
205
jquery-ui/tests/visual/effects/all.html
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Test Suite</title>
|
||||
<link rel="stylesheet" href="effects.css">
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="effects-all" data-composite="true">
|
||||
require( ["./effects.js"] );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="effects">
|
||||
|
||||
<li>
|
||||
<div class="effect" id="blindUp">
|
||||
<p>Blind up</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="blindDown">
|
||||
<p>Blind down</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="blindLeft">
|
||||
<p>Blind left</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="blindRight">
|
||||
<p>Blind right</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="bounce3times">
|
||||
<p>Bounce 3 times</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="clipHorizontally">
|
||||
<p>Clip horizontally</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="clipVertically">
|
||||
<p>Clip vertically</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="dropDown">
|
||||
<p>Drop down</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="dropUp">
|
||||
<p>Drop up</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="dropLeft">
|
||||
<p>Drop left</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="dropRight">
|
||||
<p>Drop right</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="explode9">
|
||||
<p>Explode in 9 pieces</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="explode36">
|
||||
<p>Explode in 36 pieces</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="fade">
|
||||
<p>Fade</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="fold">
|
||||
<p>Fold</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="highlight">
|
||||
<p>Highlight</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="pulsate">
|
||||
<p>Pulsate 2 times</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="puff">
|
||||
<p>Puff</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="scale">
|
||||
<p>Scale</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="shake">
|
||||
<p>Shake</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="size">
|
||||
<p>Size Default Show/Hide</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="sizeToggle">
|
||||
<p>Size Toggle</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="slideDown">
|
||||
<p>Slide down</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="slideUp">
|
||||
<p>Slide up</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="slideLeft">
|
||||
<p>Slide left</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="slideRight">
|
||||
<p>Slide right</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="transfer">
|
||||
<p>Transfer to first element</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="addClass">
|
||||
<p>addClass</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="removeClass">
|
||||
<p>removeClass</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="toggleClass">
|
||||
<p>toggleClass</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="hide">
|
||||
<p>hide/show (jQuery)</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
90
jquery-ui/tests/visual/effects/clip.html
Normal file
90
jquery-ui/tests/visual/effects/clip.html
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Test Suite</title>
|
||||
<link rel="stylesheet" href="effects.css">
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="effect effect-clip"
|
||||
data-composite="true">
|
||||
var target = $( ".target" ),
|
||||
duration = 2000;
|
||||
|
||||
$( ".toggle" ).on( "click", function( event ) {
|
||||
event.preventDefault();
|
||||
target.toggle( "clip", {
|
||||
direction: "horizontal"
|
||||
}, duration );
|
||||
});
|
||||
|
||||
$( ".effect-toggle" ).on( "click", function( event ) {
|
||||
event.preventDefault();
|
||||
target.effect( "clip", {
|
||||
direction: "vertical",
|
||||
mode: "toggle"
|
||||
}, duration );
|
||||
});
|
||||
|
||||
$( ".effect-default" ).on( "click", function( event ) {
|
||||
event.preventDefault();
|
||||
target.effect( "clip", {
|
||||
direction: "vertical"
|
||||
}, duration );
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.clipped {
|
||||
clip: rect(10px, 300px, 100px, 20px);
|
||||
position: absolute;
|
||||
}
|
||||
.container {
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
background: lightblue;
|
||||
}
|
||||
.column {
|
||||
position: relative;
|
||||
top: 40px;
|
||||
float: left;
|
||||
width: 600px;
|
||||
}
|
||||
.margin {
|
||||
margin: 10px 20px 30px 40px;
|
||||
}
|
||||
.target {
|
||||
border: 5px solid red;
|
||||
}
|
||||
p.target {
|
||||
overflow: hidden;
|
||||
background: lightgreen;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>WHAT: A set of elements with various positions and clips, using the clip effect.</p>
|
||||
<p>EXPECTED: When clicking "Toggle" or "Effect Toggle", to observe the same behavior; All elements should not change position, aside from the expected clip animation. At the end of the animation, the animated elements should hide. Layout (i.e. the position of other elements) should not change until the animated elements are hidden.</p>
|
||||
<p>EXPECTED: Clicking "Toggle" or "Effect Toggle" a second time reverses the animation, first showing all elements at their original dimensions, and restoring them to their original state.</p>
|
||||
<p>EXPECTED: Clicking "Effect Default" should always perform a "hide" animation.</p>
|
||||
<p>EXPECTED: Clicking any of the buttons in quick succession should queue the relevant animations.</p>
|
||||
<p>EXPECTED CANTFIX: In IE8, the clip animation jumps due to a bug that causes .css('clip') to return undefined unless the clip property is an inline style.</p>
|
||||
|
||||
<div class="container">
|
||||
<button class="toggle">Toggle</button>
|
||||
<button class="effect-toggle">Effect Toggle</button>
|
||||
<button class="effect-default">Effect Default</button>
|
||||
<p>Bacon ipsum dolor sit amet chuck cow ground round, ham hock short loin tail jowl sausage flank. Venison andouille turducken sausage. Boudin filet mignon shoulder, prosciutto sirloin tail cow pastrami. Salami jerky flank rump, sirloin spare ribs pork belly. Biltong brisket boudin ground round, venison chicken shankle short ribs meatball corned beef. Swine short ribs shoulder, short loin turducken biltong prosciutto ball tip. Biltong beef bresaola sausage prosciutto spare ribs, short loin swine pork chop cow flank pork turkey shankle.</p>
|
||||
<img class="target clipped" src="../../images/jquery_521x191.png" alt="jQuery Logo">
|
||||
<p>Jerky corned beef short loin fatback jowl tail. Rump spare ribs shoulder pork belly. Sausage cow ground round bacon. Bresaola kielbasa pastrami brisket ham hock. Andouille kielbasa ham, pork beef tenderloin ground round beef ribs flank turkey pancetta tri-tip.</p>
|
||||
<div class="column">
|
||||
<p>Shankle filet mignon ribeye chicken, bacon jowl drumstick frankfurter swine short loin capicola leberkas tenderloin pig. Shankle bacon shank pork loin, shoulder ham drumstick biltong. Shankle ham pastrami ball tip turkey leberkas pork loin ground round. Chicken strip steak venison shoulder biltong ham. Bacon pork loin tenderloin kielbasa, prosciutto sausage leberkas jowl ribeye turducken. Flank short loin venison tenderloin spare ribs boudin, tongue pork chop shank sirloin. Ground round ham pork belly, corned beef jowl strip steak short ribs prosciutto pig bresaola spare ribs.</p>
|
||||
<img class="target margin" src="../../images/jquery_521x191.png" alt="jQuery Logo">
|
||||
<p>Pork loin biltong ball tip tail jerky beef ribs prosciutto short loin turducken. Turkey chicken jowl pork loin shank tri-tip swine brisket. Doner prosciutto leberkas venison ground round, short loin capicola hamburger pork bacon. Spare ribs beef pork tenderloin rump shoulder pork belly turducken cow beef ribs pastrami tail flank. Spare ribs tri-tip shank, pork beef ribs ribeye chicken bacon boudin shoulder venison. Sirloin beef ribs boudin, andouille doner tail ball tip biltong prosciutto chicken beef turkey tongue hamburger tri-tip.</p>
|
||||
</div>
|
||||
<p>Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
|
||||
<p class="target">Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
|
||||
<p>Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
jquery-ui/tests/visual/effects/effects.css
Normal file
49
jquery-ui/tests/visual/effects/effects.css
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
body {
|
||||
margin: 1em;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
ul.effects {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.effects li {
|
||||
padding: 0;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
div.effect {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
background: #ccc;
|
||||
border: 5px outset #aaa;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
div.current {
|
||||
border: 5px outset #FF9C08;
|
||||
background: #FF9C08;
|
||||
}
|
||||
|
||||
div.effect p {
|
||||
color: #191919;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ui-effects-transfer {
|
||||
border: 1px dotted #fff;
|
||||
background: #666;
|
||||
opacity: 0.5;
|
||||
}
|
||||
104
jquery-ui/tests/visual/effects/effects.js
vendored
Normal file
104
jquery-ui/tests/visual/effects/effects.js
vendored
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
var duration = 1000,
|
||||
wait = 500;
|
||||
|
||||
function effect( elem, name, options ) {
|
||||
$.extend( options, {
|
||||
easing: "easeOutQuint"
|
||||
} );
|
||||
|
||||
$( elem ).on( "click", function() {
|
||||
$( this )
|
||||
.addClass( "current" )
|
||||
|
||||
// delaying the initial animation makes sure that the queue stays in tact
|
||||
.delay( 10 )
|
||||
.hide( name, options, duration )
|
||||
.delay( wait )
|
||||
.show( name, options, duration, function() {
|
||||
$( this ).removeClass( "current" );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
$( "#hide" ).on( "click", function() {
|
||||
$( this )
|
||||
.addClass( "current" )
|
||||
.hide( duration )
|
||||
.delay( wait )
|
||||
.show( duration, function() {
|
||||
$( this ).removeClass( "current" );
|
||||
} );
|
||||
} );
|
||||
|
||||
effect( "#blindLeft", "blind", { direction: "left" } );
|
||||
effect( "#blindUp", "blind", { direction: "up" } );
|
||||
effect( "#blindRight", "blind", { direction: "right" } );
|
||||
effect( "#blindDown", "blind", { direction: "down" } );
|
||||
|
||||
effect( "#bounce3times", "bounce", { times: 3 } );
|
||||
|
||||
effect( "#clipHorizontally", "clip", { direction: "horizontal" } );
|
||||
effect( "#clipVertically", "clip", { direction: "vertical" } );
|
||||
|
||||
effect( "#dropDown", "drop", { direction: "down" } );
|
||||
effect( "#dropUp", "drop", { direction: "up" } );
|
||||
effect( "#dropLeft", "drop", { direction: "left" } );
|
||||
effect( "#dropRight", "drop", { direction: "right" } );
|
||||
|
||||
effect( "#explode9", "explode", {} );
|
||||
effect( "#explode36", "explode", { pieces: 36 } );
|
||||
|
||||
effect( "#fade", "fade", {} );
|
||||
|
||||
effect( "#fold", "fold", { size: 50 } );
|
||||
|
||||
effect( "#highlight", "highlight", {} );
|
||||
|
||||
effect( "#pulsate", "pulsate", { times: 2 } );
|
||||
|
||||
effect( "#puff", "puff", {} );
|
||||
effect( "#scale", "scale", {} );
|
||||
effect( "#size", "size", {} );
|
||||
$( "#sizeToggle" ).on( "click", function() {
|
||||
var options = { to: { width: 300, height: 300 } };
|
||||
$( this )
|
||||
.addClass( "current" )
|
||||
.toggle( "size", options, duration )
|
||||
.delay( wait )
|
||||
.toggle( "size", options, duration, function() {
|
||||
$( this ).removeClass( "current" );
|
||||
} );
|
||||
} );
|
||||
|
||||
$( "#shake" ).on( "click", function() {
|
||||
$( this )
|
||||
.addClass( "current" )
|
||||
.effect( "shake", {}, 100, function() {
|
||||
$( this ).removeClass( "current" );
|
||||
} );
|
||||
} );
|
||||
|
||||
effect( "#slideDown", "slide", { direction: "down" } );
|
||||
effect( "#slideUp", "slide", { direction: "up" } );
|
||||
effect( "#slideLeft", "slide", { direction: "left" } );
|
||||
effect( "#slideRight", "slide", { direction: "right" } );
|
||||
|
||||
$( "#transfer" ).on( "click", function() {
|
||||
$( this )
|
||||
.addClass( "current" )
|
||||
.effect( "transfer", { to: "div:eq(0)" }, 1000, function() {
|
||||
$( this ).removeClass( "current" );
|
||||
} );
|
||||
} );
|
||||
|
||||
$( "#addClass" ).on( "click", function() {
|
||||
$( this ).addClass( "current", duration, function() {
|
||||
$( this ).removeClass( "current" );
|
||||
} );
|
||||
} );
|
||||
$( "#removeClass" ).on( "click", function() {
|
||||
$( this ).addClass( "current" ).removeClass( "current", duration );
|
||||
} );
|
||||
$( "#toggleClass" ).on( "click", function() {
|
||||
$( this ).toggleClass( "current", duration );
|
||||
} );
|
||||
BIN
jquery-ui/tests/visual/effects/image.png
Normal file
BIN
jquery-ui/tests/visual/effects/image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
163
jquery-ui/tests/visual/effects/scale.html
Normal file
163
jquery-ui/tests/visual/effects/scale.html
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Test Suite</title>
|
||||
<link rel="stylesheet" href="effects.css">
|
||||
<style>
|
||||
#testArea {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
#testBox {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #bada55;
|
||||
color: black;
|
||||
border: 10px solid #fff;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
#controls {
|
||||
position: absolute;
|
||||
z-index: 300;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -200px;
|
||||
width: 400px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="effect-scale" data-composite="true">
|
||||
var test = $( "#testBox" ),
|
||||
opts = $( ".arg" ),
|
||||
optsRev = $( opts.get().reverse() ),
|
||||
doer = $( "#doAnim" ),
|
||||
current = $( "#current" ),
|
||||
total = 1;
|
||||
|
||||
opts.each(function() {
|
||||
total *= this.options.length;
|
||||
});
|
||||
|
||||
opts.on( "change", doAnim );
|
||||
doer.on( "click", doAnim );
|
||||
$( "#cyclePrev" ).on( "click", function() {
|
||||
cycle( -1 );
|
||||
});
|
||||
$( "#cycleNext" ).on( "click", function() {
|
||||
cycle( 1 );
|
||||
});
|
||||
|
||||
function cycle( direction ) {
|
||||
optsRev.each(function() {
|
||||
var cur = this.selectedIndex,
|
||||
next = cur + direction,
|
||||
len = this.options.length,
|
||||
newIndex = ( next + len ) % len;
|
||||
|
||||
this.selectedIndex = newIndex;
|
||||
|
||||
if ( newIndex === next ) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
doAnim();
|
||||
}
|
||||
|
||||
function doAnim() {
|
||||
var cur = 0;
|
||||
opts.each(function() {
|
||||
cur *= this.options.length;
|
||||
cur += this.selectedIndex;
|
||||
});
|
||||
cur++;
|
||||
current.text( "Configuration: " + cur + " of " + total );
|
||||
run.apply( test, opts.map(function() {
|
||||
return $( this ).val();
|
||||
}).get() );
|
||||
}
|
||||
|
||||
function run( position, v, h, vo, ho ) {
|
||||
var el = this,
|
||||
style = el[ 0 ].style,
|
||||
effect = {
|
||||
effect: "scale",
|
||||
mode: "effect",
|
||||
percent: 200,
|
||||
origin: [ vo, ho ],
|
||||
duration: 500
|
||||
};
|
||||
|
||||
el.stop( true, true );
|
||||
|
||||
if ( typeof style === "object" ) {
|
||||
style.cssText = "";
|
||||
} else {
|
||||
el[ 0 ].style = "";
|
||||
}
|
||||
|
||||
el.css( "position", position )
|
||||
.css( h, 5 )
|
||||
.css( v, 5 )
|
||||
.delay( 100 )
|
||||
.effect( effect );
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="testArea">
|
||||
<div id="testBox">
|
||||
</div>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<label for="pos">Positioning
|
||||
<select id="pos" class="arg">
|
||||
<option value="absolute">absolute</option>
|
||||
<option value="relative">relative</option>
|
||||
<option value="fixed">fixed</option>
|
||||
</select>
|
||||
</label>
|
||||
<label for="vertPos">Vertical Positioning
|
||||
<select id="vertPos" class="arg">
|
||||
<option value="top">top</option>
|
||||
<option value="bottom">bottom</option>
|
||||
</select>
|
||||
</label>
|
||||
<label for="horizPos">Horizontal Positioning
|
||||
<select id="horizPos" class="arg">
|
||||
<option value="left">left</option>
|
||||
<option value="right">right</option>
|
||||
</select>
|
||||
</label>
|
||||
<label for="vertOrigin">Vertical Origin
|
||||
<select id="vertOrigin" class="arg">
|
||||
<option value="top">top</option>
|
||||
<option value="middle">middle</option>
|
||||
<option value="bottom">bottom</option>
|
||||
</select>
|
||||
</label>
|
||||
<label for="horizOrigin">Horizontal Origin
|
||||
<select id="horizOrigin" class="arg">
|
||||
<option value="left">left</option>
|
||||
<option value="center">center</option>
|
||||
<option value="right">right</option>
|
||||
</select>
|
||||
</label><br />
|
||||
<label id="current">jQuery UI Scale Animation Test</label>
|
||||
<button id="cyclePrev">Back</button>
|
||||
<button id="doAnim">Run Animation</button>
|
||||
<button id="cycleNext">Forward</button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
94
jquery-ui/tests/visual/effects/shake.html
Normal file
94
jquery-ui/tests/visual/effects/shake.html
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Test Suite</title>
|
||||
<link rel="stylesheet" href="effects.css">
|
||||
<style>
|
||||
#inputbox {
|
||||
background: green;
|
||||
}
|
||||
#selectbox {
|
||||
background: red;
|
||||
}
|
||||
#divbox {
|
||||
background: yellow;
|
||||
}
|
||||
#inputbox_abs {
|
||||
background: orange;
|
||||
position: absolute;
|
||||
top: 500px;
|
||||
left: 300px;
|
||||
}
|
||||
#divbox_abs {
|
||||
background: purple;
|
||||
position: absolute;
|
||||
top: 500px;
|
||||
left: 500px;
|
||||
}
|
||||
div.shake {
|
||||
background: lightblue;
|
||||
}
|
||||
|
||||
.margin {
|
||||
margin: 3px;
|
||||
}
|
||||
.border {
|
||||
border: 1px solid black;
|
||||
}
|
||||
.padding {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../../demos/bootstrap.js" data-modules="effect-shake" data-composite="true">
|
||||
$( "#btn" ).on( "click", function() {
|
||||
$( ".shake" ).effect( "shake", {
|
||||
duration: +$( "#duration" ).val(),
|
||||
mode: "toggle"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>WHAT: A set of elements with various box-model properties, using the shake effect to toggle.</p>
|
||||
<p>EXPECTED: When clicking "Toggle", all elements should not change dimension nor position, aside from the expected shake animation, which should take the number of milliseconds specified to complete. At the end of the animation, all elements should hide.</p>
|
||||
<p>EXPECTED: Clicking "Toggle" a second time reverses the animation, first showing all elements at their original dimensions, and restoring them to their original state.</p>
|
||||
|
||||
<button id="btn">Toggle</button>
|
||||
<input id="duration" value="1000">
|
||||
<div id="divbox">
|
||||
<div class="shake margin">test</div>
|
||||
<div class="shake border">test</div>
|
||||
<div class="shake padding margin">test</div>
|
||||
</div>
|
||||
<div id="inputbox" class="margin">
|
||||
<div class="shake margin">test</div>
|
||||
<div class="shake margin border">test</div>
|
||||
<div class="shake padding">test</div>
|
||||
<input type="text" class="shake">
|
||||
</div>
|
||||
<div id="selectbox">
|
||||
<div class="shake">test</div>
|
||||
<div class="shake">test</div>
|
||||
<div class="shake">test</div>
|
||||
<select class="shake">
|
||||
<option value="a">a</option>
|
||||
<option value="abcdef">abcdef</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="inputbox_abs" class="margin">
|
||||
<div class="shake margin">test</div>
|
||||
<div class="shake margin border">test</div>
|
||||
<div class="shake padding">test</div>
|
||||
<input type="text" class="shake">
|
||||
</div>
|
||||
<div id="divbox_abs" class="margin">
|
||||
<div class="shake margin">test</div>
|
||||
<div class="shake margin border">test</div>
|
||||
<div class="shake padding">test</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue