掌握jQuery UI，告别页面设计烦恼：50个实用案例详解

引言

jQuery UI 是一个基于 jQuery 的用户界面库，它提供了丰富的交互组件和视觉效果，帮助开发者轻松实现复杂的页面设计。通过学习 jQuery UI，开发者可以快速构建出具有专业水平的网页界面。本文将详细介绍 50 个实用案例，帮助您更好地掌握 jQuery UI，告别页面设计烦恼。

案例一：基本布局

1.1 案例描述

使用 jQuery UI 的布局功能实现一个响应式网页布局。

1.2 代码示例

<!DOCTYPE html> <html> <head> <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="layout"> <div id="west" class="ui-layout-west"> <h2>侧边栏</h2> </div> <div id="center" class="ui-layout-center"> <h2>内容区域</h2> </div> <div id="east" class="ui-layout-east"> <h2>工具栏</h2> </div> </div> <script> $(function() { $("#layout").layout(); }); </script> </body> </html>

1.3 代码说明

本例中，我们使用了 jQuery UI 的布局功能，将网页分为三个区域：侧边栏、内容区域和工具栏。通过设置 CSS 类，可以自定义每个区域的样式。

案例二：对话框

2.1 案例描述

使用 jQuery UI 的对话框组件实现一个模态窗口。

2.2 代码示例

<!DOCTYPE html> <html> <head> <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> <button id="dialogOpener">打开对话框</button> <div id="dialog" title="这是一个对话框"> <p>对话框内容...</p> </div> <script> $(function() { $("#dialog").dialog(); $("#dialogOpener").click(function() { $("#dialog").dialog("open"); }); }); </script> </body> </html>

2.3 代码说明

本例中，我们使用了 jQuery UI 的对话框组件，创建了一个模态窗口。点击按钮后，对话框将打开，并显示指定内容。

案例三：折叠面板

3.1 案例描述

使用 jQuery UI 的折叠面板组件实现一个可折叠的内容区域。

3.2 代码示例

<!DOCTYPE html> <html> <head> <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>面板一</h3> <div> <p>面板一内容...</p> </div> <h3>面板二</h3> <div> <p>面板二内容...</p> </div> </div> <script> $(function() { $("#accordion").accordion(); }); </script> </body> </html>

3.3 代码说明

本例中，我们使用了 jQuery UI 的折叠面板组件，创建了一个可折叠的内容区域。用户可以点击标题来展开或折叠内容。

案例四：日期选择器

4.1 案例描述

使用 jQuery UI 的日期选择器组件实现一个日期输入框。

4.2 代码示例

<!DOCTYPE html> <html> <head> <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 type="text" id="datePicker"> <script> $(function() { $("#datePicker").datepicker(); }); </script> </body> </html>

4.3 代码说明

本例中，我们使用了 jQuery UI 的日期选择器组件，创建了一个日期输入框。用户可以在输入框中选择日期。

案例五：滑块

5.1 案例描述

使用 jQuery UI 的滑块组件实现一个数值输入范围。

5.2 代码示例

<!DOCTYPE html> <html> <head> <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 type="range" id="slider"> <div id="sliderValue">0</div> <script> $(function() { $("#slider").slider({ range: true, min: 0, max: 100, value: [0, 50] }); $("#slider").on("slidechange", function(event, ui) { $("#sliderValue").text(ui.values[0] + " - " + ui.values[1]); }); }); </script> </body> </html>

5.3 代码说明

本例中，我们使用了 jQuery UI 的滑块组件，创建了一个数值输入范围。用户可以通过拖动滑块来选择数值范围。

案例六：进度条

6.1 案例描述

使用 jQuery UI 的进度条组件实现一个进度显示。

6.2 代码示例

<!DOCTYPE html> <html> <head> <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="progressBar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all"> <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 0%;"></div> </div> <script> $(function() { $("#progressBar").progressbar({ value: 0 }); var interval = setInterval(function() { var value = $("#progressBar").progressbar("value"); value += 10; if (value >= 100) { clearInterval(interval); } $("#progressBar").progressbar("value", value); }, 100); }); </script> </body> </html>

6.3 代码说明

本例中，我们使用了 jQuery UI 的进度条组件，创建了一个进度显示。进度条将逐渐从 0% 增加到 100%。

案例七：下拉菜单

7.1 案例描述

使用 jQuery UI 的下拉菜单组件实现一个交互式下拉列表。

7.2 代码示例

<!DOCTYPE html> <html> <head> <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> <select id="dropdown"> <option value="">请选择</option> <option value="option1">选项 1</option> <option value="option2">选项 2</option> <option value="option3">选项 3</option> </select> <script> $(function() { $("#dropdown").selectmenu(); }); </script> </body> </html>

7.3 代码说明

本例中，我们使用了 jQuery UI 的下拉菜单组件，创建了一个交互式下拉列表。用户可以点击下拉菜单来选择选项。

案例八：工具提示

8.1 案例描述

使用 jQuery UI 的工具提示组件实现一个悬浮提示信息。

8.2 代码示例

<!DOCTYPE html> <html> <head> <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="tooltip"> <p>这是一个工具提示信息。</p> </div> <button id="tooltipOpener">打开工具提示</button> <script> $(function() { $("#tooltipOpener").tooltip({ content: $("#tooltip").html() }); }); </script> </body> </html>

8.3 代码说明

本例中，我们使用了 jQuery UI 的工具提示组件，创建了一个悬浮提示信息。点击按钮后，工具提示将显示指定内容。

案例九：拖放

9.1 案例描述

使用 jQuery UI 的拖放组件实现一个拖放交互。

9.2 代码示例

<!DOCTYPE html> <html> <head> <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" class="ui-widget-content"> <p>拖动我！</p> </div> <div id="droppable" class="ui-widget-header"> <p>放下我！</p> </div> <script> $(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function(event, ui) { $(this) .addClass("ui-state-highlight") .find("p") .html("放下了！"); } }); }); </script> </body> </html>

9.3 代码说明

本例中，我们使用了 jQuery UI 的拖放组件，实现了一个拖放交互。用户可以拖动左侧的元素到右侧的容器中。

案例十：日历

10.1 案例描述

使用 jQuery UI 的日历组件实现一个日期选择器。

10.2 代码示例

<!DOCTYPE html> <html> <head> <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 type="text" id="calendar"> <script> $(function() { $("#calendar").datepicker(); }); </script> </body> </html>

10.3 代码说明

本例中，我们使用了 jQuery UI 的日历组件，创建了一个日期选择器。用户可以在输入框中选择日期。

案例十一：时间选择器

11.1 案例描述

使用 jQuery UI 的时间选择器组件实现一个时间输入框。

11.2 代码示例

<!DOCTYPE html> <html> <head> <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 type="text" id="timePicker"> <script> $(function() { $("#timePicker").timepicker(); }); </script> </body> </html>

11.3 代码说明

本例中，我们使用了 jQuery UI 的时间选择器组件，创建了一个时间输入框。用户可以在输入框中选择时间。

案例十二：自动完成

12.1 案例描述

使用 jQuery UI 的自动完成组件实现一个智能输入框。

12.2 代码示例

<!DOCTYPE html> <html> <head> <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 type="text" id="autocomplete"> <script> $(function() { $("#autocomplete").autocomplete({ source: ["Apple", "Banana", "Cherry", "Date", "Fig", "Grape"] }); }); </script> </body> </html>

12.3 代码说明

本例中，我们使用了 jQuery UI 的自动完成组件，创建了一个智能输入框。用户在输入框中输入内容时，将自动显示匹配的选项。

案例十三：折叠面板

13.1 案例描述

使用 jQuery UI 的折叠面板组件实现一个可折叠的内容区域。

13.2 代码示例

<!DOCTYPE html> <html> <head> <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>面板一</h3> <div> <p>面板一内容...</p> </div> <h3>面板二</h3> <div> <p>面板二内容...</p> </div> </div> <script> $(function() { $("#accordion").accordion(); }); </script> </body> </html>

13.3 代码说明

本例中，我们使用了 jQuery UI 的折叠面板组件，创建了一个可折叠的内容区域。用户可以点击标题来展开或折叠内容。

案例十四：按钮

14.1 案例描述

使用 jQuery UI 的按钮组件实现一个具有视觉效果和功能的按钮。

14.2 代码示例

<!DOCTYPE html> <html> <head> <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> <button id="button">点击我</button> <script> $(function() { $("#button").button(); }); </script> </body> </html>

14.3 代码说明

本例中，我们使用了 jQuery UI 的按钮组件，创建了一个具有视觉效果和功能的按钮。点击按钮后，将执行指定操作。

案例十五：标签页

15.1 案例描述

使用 jQuery UI 的标签页组件实现一个标签式导航。

15.2 代码示例

<!DOCTYPE html> <html> <head> <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="tabs"> <ul> <li><a href="#tab1">标签页 1</a></li> <li><a href="#tab2">标签页 2</a></li> <li><a href="#tab3">标签页 3</a></li> </ul> <div id="tab1"> <p>标签页 1 内容...</p> </div> <div id="tab2"> <p>标签页 2 内容...</p> </div> <div id="tab3"> <p>标签页 3 内容...</p> </div> </div> <script> $(function() { $("#tabs").tabs(); }); </script> </body> </html>