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>