jQueryUI之autocomplete，datepicker，tabs演示

最新推荐文章于 2020-11-07 14:17:38 发布

原创最新推荐文章于 2020-11-07 14:17:38 发布 · 949 阅读

2 ·

CC 4.0 BY-SA版权

html 同时被 3 个专栏收录

20 篇文章

订阅专栏

javascript

18 篇文章

订阅专栏

jQuery

9 篇文章

订阅专栏

本文通过实例展示了如何使用 jQuery UI 库实现自动补全输入、日期选择器及选项卡组件等功能。介绍了具体代码配置和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>