Jquery ui是一套不错的前端UI框架。
官网地址：https://jqueryui.com/ 下载jquery ui，下载地址https://jqueryui.com/resources/download/jquery-ui-1.12.1.zip
下载下来的是一个压缩包，解压后的目录结构大致如下：
入门示例：（查看index.html代码也是一个不错的学习）
hbk.html代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Jquery ui 入门</title> <link rel="stylesheet" type="text/css" href="jquery-ui.css"> <script type="text/javascript" src="external/jquery/jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> </head> <body> <input type="text" name="date" id="date"/> <script type="text/javascript"> $("#date").datepicker(); </script> </body> </html>在浏览器中的效果如下：
jquery ui 按钮
<body> <button id="button">按钮</button> <button id="button-icon">只有图标的按钮</button> <script type="text/javascript"> $( "#button" ).button(); $( "#button-icon" ).button({ icon: "ui-icon-gear", showLabel: true }); </script> </body>显示效果如下：其中showLabel为是否显示按钮文字。
按钮的选中和未选中有一套样式，比普通的button样式更好看。
手风琴效果
<div id="accordion"> <h3>First</h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> <h3>Second</h3> <div>Phasellus mattis tincidunt nibh.</div> <h3>Third</h3> <div>Nam dui erat, auctor a, dignissim quis.</div> </div> <script type="text/javascript"> $("#accordion").accordion(); </script>效果如下：
