jquery-ui/demos/datepicker/animation.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Datepicker - Animations</title>
	<link rel="stylesheet" href="../../themes/base/all.css">
	<link rel="stylesheet" href="../demos.css">
	<script src="../../external/requirejs/require.js"></script>
	<script src="../bootstrap.js" data-modules="effect effect-bounce effect-blind effect-bounce effect-clip effect-drop effect-fold effect-slide">
		$( "#datepicker" ).datepicker();
		$( "#anim" ).on( "change", function() {
			var value = $( this ).val(),
				hideValue = $( this ).find( "option:selected" ).data( "hide" );
			$( "#datepicker" )
				.datepicker( "option", "show", value )
				.datepicker( "option", "hide", hideValue || value );
		});
	</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" size="30"/></p>

<p>Animations:<br />
	<select id="anim">
		<option value="show">Fade in/out (default)</option>
		<option value="slideDown" data-hide="slideUp">Slide down/up</option>
		<option value="blind">Blind (UI Effect)</option>
		<option value="bounce">Bounce (UI Effect)</option>
		<option value="clip">Clip (UI Effect)</option>
		<option value="drop">Drop (UI Effect)</option>
		<option value="fold">Fold (UI Effect)</option>
		<option value="slide">Slide (UI Effect)</option>
		<option value="false">None</option>
	</select>
</p>

<div class="demo-description">
<p>Use different animations when opening or closing the datepicker.  Choose an animation from the dropdown, then click on the input to see its effect.  You can use one of the three standard animations or any of the UI Effects.</p>
</div>
</body>
</html>
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`<!doctype html>`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`<html lang="en">`
			`<head>`
Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`<meta charset="utf-8">`
Demos: Add device-width viewport meta to all demos Ref 343c2651729af2fdf020dd538fce0855785f5a0d 2015-09-30 13:11:22 +00:00			`<meta name="viewport" content="width=device-width, initial-scale=1">`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`<title>jQuery UI Datepicker - Animations</title>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<link rel="stylesheet" href="../../themes/base/all.css">`
Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`<link rel="stylesheet" href="../demos.css">`
Datepicker: Use new demos infrastructure Ref #10119 2015-05-14 13:51:52 +00:00			`<script src="../../external/requirejs/require.js"></script>`
			`<script src="../bootstrap.js" data-modules="effect effect-bounce effect-blind effect-bounce effect-clip effect-drop effect-fold effect-slide">`
Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`$( "#datepicker" ).datepicker();`
Datepicker: Remove core event/alias and deprecated module dependencies 2015-05-14 01:54:56 +00:00			`$( "#anim" ).on( "change", function() {`
Datepicker: Update tests and demos for new structure 2013-08-30 12:27:19 +00:00			`var value = $( this ).val(),`
			`hideValue = $( this ).find( "option:selected" ).data( "hide" );`
			`$( "#datepicker" )`
			`.datepicker( "option", "show", value )`
			`.datepicker( "option", "hide", hideValue \|\| value );`
Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`});`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`</script>`
			`</head>`
			`<body>`

			`<p>Date: <input type="text" id="datepicker" size="30"/></p>`

			`<p>Animations:<br />`
			`<select id="anim">`
Datepicker: Update tests and demos for new structure 2013-08-30 12:27:19 +00:00			`<option value="show">Fade in/out (default)</option>`
			`<option value="slideDown" data-hide="slideUp">Slide down/up</option>`
Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`<option value="blind">Blind (UI Effect)</option>`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`<option value="bounce">Bounce (UI Effect)</option>`
			`<option value="clip">Clip (UI Effect)</option>`
			`<option value="drop">Drop (UI Effect)</option>`
			`<option value="fold">Fold (UI Effect)</option>`
Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`<option value="slide">Slide (UI Effect)</option>`
Datepicker: Update tests and demos for new structure 2013-08-30 12:27:19 +00:00			`<option value="false">None</option>`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`</select>`
			`</p>`

Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`<div class="demo-description">`
			`<p>Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.</p>`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`</div>`
eol-style and mime-type 2010-01-20 14:00:14 +00:00			`</body>`
			`</html>`