注意：提示框的触发效果不能用button的方式触发，会有问题。用a标签然后用jQuery-ui装饰成button然后触发。可能以后用用到jQuery-ui做出来的效果，出现问题的话，可以看看，是否是这个情况。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>窗口小部件</title>
<script src="resource/jquery-3.3.1.js"></script>
<script src="resource/jquery-ui.min.js"></script>
<script src="widget.js"></script>
<link rel="stylesheet" type="text/css" href="resource/jquery-ui.min.css">
</head>
<body>
<div id="according">
<h3>炉石传说真好玩</h3>
<div>
<p>
快进来，在外面累的够呛。在火炉旁歇歇脚，说说你的故事吧！
</p>
</div>
<h3>你说是不是</h3>
<div>
<p>
快进来，在外面累的够呛。在火炉旁歇歇脚，说说你的故事吧！
</p>
</div>
<h3>我最喜欢德鲁伊</h3>
<div>
<p>
快进来，在外面累的够呛。在火炉旁歇歇脚，说说你的故事吧！
</p>
</div>
<h3>你最喜欢什么职业</h3>
<div>
<p>
快进来，在外面累的够呛。在火炉旁歇歇脚，说说你的故事吧！
</p>
</div>
</div>
<!--手风琴效果内容-->
<P>
<label for="favorite">你最喜欢的套牌是？</label>
<!--for属性指定这个标签跟哪个标签绑定一起，这里没用作用，可去掉-->
<input id="favorite">
</P>
<!--自动补全文本内容-->
<P>
日期：<input type="text" id="datepicker">
</P>
<!--日期德选择提示-->
<div id="dialogDiv">
<p>是的,弹出了一个对话框</p>
</div>
<a id="btnId">老哥，点我</a>
</body>
</html>JS代码：
$(document).ready(function () {
$("#according").accordion();
//accordion:手风琴
var favoviteMajor = ["超生德","蓝龙德","青玉德","换家德"]
$("#favorite").autocomplete({
source:favoviteMajor
//指定上面调用的提示内容库
});
//autocomplete：自动填充内容
$("#datepicker").datepicker();
//datapicker:日期选择
$("#btnId").button().on("click",function () {
$("#dialogDiv").dialog();
});
//diaiog:弹出提示框，这里不能用button触发弹出对话框的事件，而是用标签修饰成button
});
效果：
