jQueryUI之autocomplete，datepicker，tabs演练 _Web前端

jQueryUI之autocomplete，datepicker，tabs演示
<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>jQuery UI-Test</title>
	<link href="jqueryui/css/jquery-ui-1.10.1.custom.css" rel="stylesheet">
	<script src="jqueryui/jquery-1.9.1.js"></script>
	<script src="jqueryui/jquery-ui-1.10.1.custom.js"></script>
	
	<script>
		$(function(){
			var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++",
			"Clojure",
			"COBOL",
			"ColdFusion",
			"Erlang",
			"Fortran",
			"Groovy",
			"Haskell",
			"Java",
			"JavaScript",
			"Lisp",
			"Perl",
			"PHP",
			"Python",
			"Ruby",
			"Scala",
			"Scheme"
		];

		$( "#autocomplete" ).autocomplete({
			source: availableTags
		});
		
		 $( "#datepicker" ).datepicker({
			altField: "#actualDate",
			
			dateFormat: "yy-mm-dd"
		 });

		  $( "#tabs" ).tabs({
			event:"mouseover"
			
		  });
		})
		
	</script>
</head>

<body>

	
	<input type="text" id="autocomplete" name="tt" /><br/>

	<p>Date: <input type="text" id="datepicker" /></p>
	
	<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo elementum quam ullamco Mauris </p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id eratt</p>
   
  </div>
</div>
</body>
</html>