Search and Top Navigation
Ticket #4432: slider_animate.html
File slider_animate.html, 1.3 KB (added by yourcelf, May 07, 2009 01:57PM UTC)
Visual test for slider animation
<!doctype html>
<html lang="en">
<head>
<title>Slider Visual Test : Default</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$("#slider").slider({
animate: true
});
});
//]]></script>
</head>
<body>
<div id='slider'></div>
<h2>Programatic changes</h2>
<p>No animation. Slider should move immediately to position.
<a href='#' onclick='$("#slider").slider("value", 0);'>0</a>
<a href='#' onclick='$("#slider").slider("value", 50, false);'>50</a>
<a href='#' onclick='$("#slider").slider("value", 100);'>100</a>
</p>
<p>Animation. Slider should move with animated slide.
<a href='#' onclick='$("#slider").slider("value", 0, true);'>0</a>
<a href='#' onclick='$("#slider").slider("value", 50, true);'>50</a>
<a href='#' onclick='$("#slider").slider("value", 100, true);'>100</a>
</p>
</body>
</html>
Download in other formats:
Original Format
File slider_animate.html, 1.3 KB (added by yourcelf, May 07, 2009 01:57PM UTC)
Visual test for slider animation
<!doctype html>
<html lang="en">
<head>
<title>Slider Visual Test : Default</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$("#slider").slider({
animate: true
});
});
//]]></script>
</head>
<body>
<div id='slider'></div>
<h2>Programatic changes</h2>
<p>No animation. Slider should move immediately to position.
<a href='#' onclick='$("#slider").slider("value", 0);'>0</a>
<a href='#' onclick='$("#slider").slider("value", 50, false);'>50</a>
<a href='#' onclick='$("#slider").slider("value", 100);'>100</a>
</p>
<p>Animation. Slider should move with animated slide.
<a href='#' onclick='$("#slider").slider("value", 0, true);'>0</a>
<a href='#' onclick='$("#slider").slider("value", 50, true);'>50</a>
<a href='#' onclick='$("#slider").slider("value", 100, true);'>100</a>
</p>
</body>
</html>