jQuery UI 学习笔记

1. 下载和安装

jQuery UI 可以从官网 https://jqueryui.com/ 下载，下载后解压缩得到以下文件：

jquery-ui.css
jquery-ui.js
images 文件夹

将 jquery-ui.css 和 jquery-ui.js 文件复制到自己的项目中，并将 images 文件夹放在与 jquery-ui.css 文件相同的目录下即可。

然后，在 HTML 页面中引入 jquery-ui.css 和 jquery-ui.js 文件即可使用 jQuery UI。

htmlCopy Code
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI 学习笔记</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
</head>
<body>
</body>
</html>

2. 实例

2.1 拖拽（Draggable）

HTML：

htmlCopy Code
<div id="draggable" class="ui-widget-content">
  <p>我可以被拖拽</p>
</div>

JS：

javascriptCopy Code
$( "#draggable" ).draggable();

2.2 缩放（Resizable）

HTML：

htmlCopy Code
<div id="resizable" class="ui-widget-content">
  <p>我可以被缩放</p>
</div>

JS：

javascriptCopy Code
$( "#resizable" ).resizable();

2.3 选项卡（Tabs）

HTML：

htmlCopy Code
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">选项卡一</a></li>
    <li><a href="#tabs-2">选项卡二</a></li>
    <li><a href="#tabs-3">选项卡三</a></li>
  </ul>
  <div id="tabs-1">
    <p>这是选项卡一的内容</p>
  </div>
  <div id="tabs-2">
    <p>这是选项卡二的内容</p>
  </div>
  <div id="tabs-3">
    <p>这是选项卡三的内容</p>
  </div>
</div>

JS：

javascriptCopy Code
$( "#tabs" ).tabs();

2.4 对话框（Dialog）

HTML：

htmlCopy Code
<button id="opener">打开对话框</button>

<div id="dialog" title="基本对话框">
  <p>这是一个基本的对话框。</p>
</div>

JS：

javascriptCopy Code
$( "#dialog" ).dialog({
  autoOpen: false,
  width: 400,
  buttons: {
    "Ok": function() {
      $( this ).dialog( "close" );
    },
    "Cancel": function() {
      $( this ).dialog( "close" );
    }
  }
});

$( "#opener" ).on( "click", function() {
  $( "#dialog" ).dialog( "open" );
});

3. 总结

以上是 jQuery UI 的一些常用组件和用法，更多内容请参考官方文档。使用 jQuery UI 可以快速构建交互效果丰富的网页，缩短开发时间，提高用户体验。