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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Slider Visual Test : Slider option animate true</title>
	<link rel="stylesheet" href="../visual.css" type="text/css" />
	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
	<script type="text/javascript" src="../../../jquery-1.6.4.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.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>
html pages: added HTML5 meta charset UTF-8 tag, changed DOCTYPE to uppercase 2010-03-12 03:18:34 +00:00			`<!DOCTYPE html>`
slider option visual tests 2009-08-08 12:18:02 +00:00			`<html lang="en">`
			`<head>`
html pages: added HTML5 meta charset UTF-8 tag, changed DOCTYPE to uppercase 2010-03-12 03:18:34 +00:00			`<meta charset="UTF-8" />`
slider option visual tests 2009-08-08 12:18:02 +00:00			`<title>Slider Visual Test : Slider option animate true</title>`
			`<link rel="stylesheet" href="../visual.css" type="text/css" />`
fixed #5163 - themes: css files need to be renamed to be consistent with js file renames in 1.8a1 2010-02-16 01:38:23 +00:00			`<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">`
Upgraded jQuery to 1.6.4. 2011-10-18 14:00:03 +00:00			`<script type="text/javascript" src="../../../jquery-1.6.4.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>`
slider: fixed missing references to mouse plugin 2010-01-01 12:43:36 +00:00			`<script type="text/javascript" src="../../../ui/jquery.ui.mouse.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>`