Created
May 18, 2011 18:10
-
-
Save tomykaira/979147 to your computer and use it in GitHub Desktop.
the TestCase for #4228 margin:auto problem. pull request: https://github.com/jquery/jquery-ui/pull/285
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<title>jQuery UI Effects - Bounce Demo</title> | |
<script type="text/javascript" src="../jquery-1.5.1.js"></script> | |
<script type="text/javascript" src="../ui/jquery.ui.core.js"></script> | |
<script type="text/javascript" src="../ui/jquery.ui.widget.js"></script> | |
<script type="text/javascript" src="../ui/jquery.ui.mouse.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.core.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.scale.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.blind.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.bounce.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.clip.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.drop.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.explode.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.fade.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.fold.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.highlight.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.pulsate.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.shake.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.slide.js"></script> | |
<script type="text/javascript" src="../ui/jquery.effects.transfer.js"></script> | |
<style type="text/css"> | |
#test { width: 240px; height: 135px; padding: 0.4em; margin: 50px auto; border: 2px solid black; cursor: pointer;} | |
h3 { margin: 0; padding: 0.4em; text-align: center; } | |
#test2 { width: 240px; height: 135px; padding: 0.4em; margin: 50px auto; border: 2px solid black; cursor: pointer;} | |
#normal { width: 240px; height: 135px; padding: 0.4em; margin: 50px 0px; border: 2px solid black; cursor: pointer;} | |
#normal2 { width: 240px; height: 135px; padding: 0.4em; margin: 50px 500px; border: 2px solid black; cursor: pointer; | |
padding: 100px; border:10px solid black;} | |
#multiple{ width: 240px; height: 135px; padding: 0.4em; | |
border: 2px solid black; cursor: pointer;} | |
#multiple.left { float: left ;} | |
#multiple.right { float: right ;} | |
#multiple #inner { width: 20; height: 30; padding: 0.4em; | |
border: 2px solid black; cursor: pointer; | |
float: inherit} | |
#normal2 h3 { margin: 0; padding: 0.4em; text-align: center; } | |
#wrap { width: 400px; height:300px; position:relative; left: 100px, top:100px ;border: 1px solid black;} | |
</style> | |
<script type="text/javascript"> | |
$(function() { | |
var effects = ["slide", "clip", "scale", "blind", "bounce", "clip", "drop", "explode", "fade", "fold", "highlight", "pulsate", "puff", "size", "shake", "slide"], | |
effectSelector = $("#effect"); | |
$.each(effects, function( i, effect ) { | |
$("<option value='"+effect+"'>"+effect+"</option>").appendTo(effectSelector); | |
}); | |
var effect = effects[0]; | |
effectSelector.change(function() { | |
effect = effectSelector.val(); | |
}); | |
$("#toggle").click(function() { | |
$("#test").toggle(effect) }); | |
$(".field").click(function() { | |
$(this).hide(effect,{direction:"right"}, function() { | |
setTimeout(function() { | |
$(this).toggle(effect); | |
}, 500); | |
}); | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<select id="effect"> | |
</select> | |
<input type="button" value="toggle" id="toggle"> | |
<div id="test" class="field"> | |
<h3 class="ui-widget-header ui-corner-all">Bounce</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 id="wrap"> | |
<div id="test2" class="field"> | |
<h3 class="ui-widget-header ui-corner-all">Bounce</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> | |
<div id="normal" class="field"> | |
<h3 class="ui-widget-header ui-corner-all">Bounce</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 id="normal2" class="field"> | |
<h3 class="ui-widget-header ui-corner-all">Bounce</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 id="multiple" class="field left"> | |
<h3 class="ui-widget-header ui-corner-all">Bounce</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 id="multiple" class="field left"> | |
<h3 class="ui-widget-header ui-corner-all">Bounce</h3> | |
<div id="inner" class="field"> | |
<p>inner div</p> | |
</div> | |
<div id="inner" class="field"> | |
<p>inner div</p> | |
</div> | |
<p> | |
Etiam libero neque | |
</p> | |
</div> | |
<div id="multiple" class="field right"> | |
<h3 class="ui-widget-header ui-corner-all">Bounce</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 id="multiple" class="field right"> | |
<h3 class="ui-widget-header ui-corner-all">Bounce</h3> | |
<div id="inner" class="field"> | |
<p>inner div</p> | |
</div> | |
<div id="inner" class="field"> | |
<p>inner div</p> | |
</div> | |
<p> | |
Etiam libero neque | |
</p> | |
</div> | |
</div><!-- End demo --> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment