jquery-ui/tests/visual/slider/slider_option_animate_true.html

<!doctype html>
<html lang="en">
<head>
	<title>Slider Visual Test : Slider option animate true</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/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../../ui/jquery.ui.slider.js"></script>

	<style type="text/css">
	fieldset { padding: 1em; margin: 1em; }
	legend { font-size: 1.3em; font-family: monospace; font-weight: bold; }
	#slider1 { margin: 1em; }
	#slider2 { margin: 1em; height: 400px; }
	</style>
	
	<script type="text/javascript">
	$(function() {
		$("#slider1").slider({
			animate: true,
			step: 10
		});
		$("#slider2").slider({
			animate: true,
			orientation: 'vertical',
			step: 5,
			values: [5, 15, 35, 75]
		});
	});
	</script>
</head>
<body>

<fieldset>
	<legend>$("#slider1").slider({
			animate: true,
			step: 10
		});</legend>
<div id="slider1"></div>
<button onclick="$('#slider1').slider('value', 15);">method value: 15</button>
<button onclick="$('#slider1').slider('value', 75);">method value: 75</button>
<button onclick="$('#slider1').slider('option', 'value', 25);">option value: 25</button>
<button onclick="$('#slider1').slider('option', 'value', 85);">option value: 85</button>
</fieldset>

<fieldset>
	<legend>$("#slider2").slider({
			animate: true,
			orientation: 'vertical',
			step: 5,
			values: [5, 15, 35, 75]
		});</legend>
<div id="slider2"></div>
<button onclick="$('#slider2').slider('values', [10, 20, 30, 40]);">method values: [10, 20, 30, 40]</button>
<button onclick="$('#slider2').slider('values', [80, 70, 60, 50]);">method values: [80, 70, 60, 50]</button>
<button onclick="$('#slider2').slider('option', 'values', [20, 30, 40, 50]);">option values: [20, 30, 40, 50]</button>
<button onclick="$('#slider2').slider('option', 'values', [90, 80, 70, 60]);">option values: [90, 80, 70, 60]</button>
</fieldset>

</body>
</html>
slider option visual tests 2009-08-08 12:18:02 +00:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`<title>Slider Visual Test : Slider option animate true</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>`
renamed all ui..js files to jquery.ui..js, all effects..js files to jquery.effects..js per announcement and discussion here http://groups.google.com/group/jquery-ui-dev/msg/d565a0c56e0cb935 2009-09-17 10:39:12 +00:00			`<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>`
extracting widget factory into jquery.ui.widget.js 2009-12-16 22:20:18 +00:00			`<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>`
renamed all ui..js files to jquery.ui..js, all effects..js files to jquery.effects..js per announcement and discussion here http://groups.google.com/group/jquery-ui-dev/msg/d565a0c56e0cb935 2009-09-17 10:39:12 +00:00			`<script type="text/javascript" src="../../../ui/jquery.ui.slider.js"></script>`
Slider: Fixed animation to respond to keypress as well as mouse click, animation still does not occur at init or during mouse drag slide, both by design. Animation now occurs, if animate is on, when using the value method, but not when using the value option. This allows for animated and non-animated programmatic setting of values without changing the animate option. Fixes #4432 - Allow animation when programmatically changing slider value Fixes #4659 - Allow slider to animate if slider value is set programatically 2009-10-12 10:50:38 +00:00
			`<style type="text/css">`
			`fieldset { padding: 1em; margin: 1em; }`
			`legend { font-size: 1.3em; font-family: monospace; font-weight: bold; }`
			`#slider1 { margin: 1em; }`
			`#slider2 { margin: 1em; height: 400px; }`
			`</style>`

slider option visual tests 2009-08-08 12:18:02 +00:00			`<script type="text/javascript">`
			`$(function() {`
Slider: Fixed animation to respond to keypress as well as mouse click, animation still does not occur at init or during mouse drag slide, both by design. Animation now occurs, if animate is on, when using the value method, but not when using the value option. This allows for animated and non-animated programmatic setting of values without changing the animate option. Fixes #4432 - Allow animation when programmatically changing slider value Fixes #4659 - Allow slider to animate if slider value is set programatically 2009-10-12 10:50:38 +00:00			`$("#slider1").slider({`
			`animate: true,`
			`step: 10`
			`});`
			`$("#slider2").slider({`
			`animate: true,`
			`orientation: 'vertical',`
			`step: 5,`
			`values: [5, 15, 35, 75]`
slider option visual tests 2009-08-08 12:18:02 +00:00			`});`
			`});`
			`</script>`
			`</head>`
			`<body>`

Slider: Fixed animation to respond to keypress as well as mouse click, animation still does not occur at init or during mouse drag slide, both by design. Animation now occurs, if animate is on, when using the value method, but not when using the value option. This allows for animated and non-animated programmatic setting of values without changing the animate option. Fixes #4432 - Allow animation when programmatically changing slider value Fixes #4659 - Allow slider to animate if slider value is set programatically 2009-10-12 10:50:38 +00:00			`<fieldset>`
			`<legend>$("#slider1").slider({`
			`animate: true,`
			`step: 10`
			`});</legend>`
			`<div id="slider1"></div>`
			`<button onclick="$('#slider1').slider('value', 15);">method value: 15</button>`
			`<button onclick="$('#slider1').slider('value', 75);">method value: 75</button>`
			`<button onclick="$('#slider1').slider('option', 'value', 25);">option value: 25</button>`
			`<button onclick="$('#slider1').slider('option', 'value', 85);">option value: 85</button>`
			`</fieldset>`

			`<fieldset>`
			`<legend>$("#slider2").slider({`
			`animate: true,`
			`orientation: 'vertical',`
			`step: 5,`
			`values: [5, 15, 35, 75]`
			`});</legend>`
			`<div id="slider2"></div>`
			`<button onclick="$('#slider2').slider('values', [10, 20, 30, 40]);">method values: [10, 20, 30, 40]</button>`
			`<button onclick="$('#slider2').slider('values', [80, 70, 60, 50]);">method values: [80, 70, 60, 50]</button>`
			`<button onclick="$('#slider2').slider('option', 'values', [20, 30, 40, 50]);">option values: [20, 30, 40, 50]</button>`
			`<button onclick="$('#slider2').slider('option', 'values', [90, 80, 70, 60]);">option values: [90, 80, 70, 60]</button>`
			`</fieldset>`
slider option visual tests 2009-08-08 12:18:02 +00:00
			`</body>`
			`</html>`