掌握jQuery UI，提升网页交互体验，从这些实例学起

jQuery UI 是一个基于 jQuery 的用户界面库，它包含了丰富的交互组件和主题，可以帮助开发者轻松地创建出富有交互性的网页应用。以下是一些jQuery UI的实例，通过学习这些实例，你可以提升网页交互体验。

一、jQuery UI 自动完成（Autocomplete）

自动完成是一个常见的用户界面元素，可以帮助用户快速地找到他们想要的选项。以下是一个简单的自动完成组件的示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery UI 自动完成示例</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> </head> <body> <input id="autocomplete"> <script> $(function() { $("#autocomplete").autocomplete({ source: ["Apple", "Banana", "Orange", "Grapes", "Mango"] }); }); </script> </body> </html>

在这个例子中，我们创建了一个简单的输入框，当用户在输入框中开始输入时，它会显示一个下拉列表，其中包含了苹果、香蕉、橙子等水果。

二、jQuery UI 抽屉（Accordion）

抽屉是一种常用的页面布局组件，可以让用户通过点击标题来展开或收起内容。以下是一个抽屉组件的示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery UI 抽屉示例</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> </head> <body> <div id="accordion"> <h3>Section 1</h3> <div> <p>This is the content of section 1.</p> </div> <h3>Section 2</h3> <div> <p>This is the content of section 2.</p> </div> </div> <script> $(function() { $("#accordion").accordion(); }); </script> </body> </html>

在这个例子中，我们创建了一个包含两个部分的抽屉组件，用户可以通过点击标题来展开或收起内容。

三、jQuery UI 拖放（Draggable）

拖放是一种强大的交互方式，可以让用户通过拖动元素来改变它们的顺序或位置。以下是一个拖放组件的示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery UI 拖放示例</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> </head> <body> <div id="draggable" style="width: 150px; height: 150px; background: #333; color: #fff; text-align: center; line-height: 150px;"> Drag me </div> <script> $(function() { $("#draggable").draggable(); }); </script> </body> </html>

在这个例子中，我们创建了一个可以拖动的矩形，用户可以通过鼠标拖动它。

四、jQuery UI 滚动条（Resizable）

滚动条可以让用户通过拖动来查看内容的不同部分。以下是一个滚动条组件的示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery UI 滚动条示例</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> </head> <body> <div id="resizable" style="width: 200px; height: 200px; background: #333; color: #fff; text-align: center; line-height: 200px;"> Resize me </div> <script> $(function() { $("#resizable").resizable(); }); </script> </body> </html>

在这个例子中，我们创建了一个可以调整大小的矩形，用户可以通过拖动边框来改变其大小。

五、jQuery UI 日期选择器（Datepicker）

日期选择器可以帮助用户选择日期。以下是一个日期选择器的示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery UI 日期选择器示例</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> </head> <body> <input id="datepicker"> <script> $(function() { $("#datepicker").datepicker(); }); </script> </body> </html>

在这个例子中，我们创建了一个输入框，用户可以通过点击输入框来选择日期。