掌握jQuery UI，从这些实用在线实例开始

引言

jQuery UI 是一个基于 jQuery 的用户界面库，它提供了一系列可重用的 UI 组件和交互式效果，帮助开发者快速构建丰富的网页应用。为了帮助你更好地掌握 jQuery UI，本文将介绍一些实用的在线实例，通过这些实例，你可以学习到如何使用 jQuery UI 的各种组件和功能。

实例一：拖放（Draggable）

介绍

拖放是 jQuery UI 中非常实用的一个功能，它允许用户通过鼠标拖动元素。以下是一个简单的拖放实例，展示了如何创建一个可拖动的 div 元素。

代码示例

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>拖放实例</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { $("#draggable").draggable(); }); </script> </head> <body> <div id="draggable" style="width: 100px; height: 100px; background: red;"> 拖动我 </div> </body> </html>

说明

引入 jQuery 和 jQuery UI 的 CSS 和 JavaScript 文件。
使用 #draggable 选择器选择要拖动的元素。
调用 draggable() 方法使元素可拖动。

实例二：可折叠面板（Accordion）

介绍

可折叠面板允许用户通过点击来展开或折叠内容区域。以下是一个简单的可折叠面板实例。

代码示例

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>可折叠面板实例</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { $("#accordion").accordion(); }); </script> </head> <body> <div id="accordion"> <h3>面板 1</h3> <div> 面板 1 的内容 </div> <h3>面板 2</h3> <div> 面板 2 的内容 </div> </div> </body> </html>

说明

引入 jQuery 和 jQuery UI 的 CSS 和 JavaScript 文件。
使用 #accordion 选择器选择可折叠面板的容器。
调用 accordion() 方法使面板可折叠。

实例三：日期选择器（Datepicker）

介绍

日期选择器允许用户通过点击输入框选择日期。以下是一个简单的日期选择器实例。

代码示例

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>日期选择器实例</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { $("#datepicker").datepicker(); }); </script> </head> <body> <input type="text" id="datepicker"> </body> </html>