jQuery UI侧边栏开发实战教程从入门到精通详细讲解如何创建美观实用的网站导航系统包含折叠展开响应式设计动画效果用户交互等全套技术助你成为前端高手

引言

在现代网页设计中，侧边栏导航系统已成为提供高效用户体验的关键组件。jQuery UI作为一个强大的JavaScript库，为开发者提供了丰富的交互组件和效果，使得创建美观实用的侧边栏变得简单而高效。本教程将带您从零开始，逐步掌握使用jQuery UI开发侧边栏的完整技能集，包括基础构建、折叠展开功能、响应式设计、动画效果以及高级用户交互等内容。

1. jQuery UI基础与准备工作

1.1 jQuery UI简介

jQuery UI是基于jQuery的用户界面库，提供了丰富的交互组件、效果和主题，可以帮助开发者快速构建具有专业外观和交互体验的网页应用。它包含了许多预制的UI组件，如对话框、日期选择器、滑块等，同时也提供了强大的动画效果和交互功能。

1.2 环境搭建

在开始开发jQuery UI侧边栏之前，我们需要正确设置开发环境。首先，确保引入jQuery和jQuery UI的库文件。可以通过CDN引入，也可以下载到本地使用。

<!-- 引入jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery UI --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

1.3 基本HTML结构

创建一个基本的侧边栏HTML结构，这是后续所有功能实现的基础。

<div class="sidebar-container"> <div class="sidebar-header"> <h3>导航菜单</h3> <button id="toggle-sidebar" class="ui-button">折叠</button> </div> <div class="sidebar-content"> <ul class="sidebar-menu"> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系方式</a></li> </ul> </div> </div> <div class="main-content"> <!-- 主要内容区域 --> <h1>欢迎访问我们的网站</h1> <p>这里是网站的主要内容区域。</p> </div>

1.4 基本CSS样式

为侧边栏添加一些基本样式，使其看起来更加美观。

.sidebar-container { width: 250px; height: 100vh; background-color: #f8f9fa; border-right: 1px solid #dee2e6; position: fixed; top: 0; left: 0; z-index: 1000; display: flex; flex-direction: column; } .sidebar-header { padding: 15px; background-color: #343a40; color: white; display: flex; justify-content: space-between; align-items: center; } .sidebar-content { flex-grow: 1; overflow-y: auto; padding: 10px 0; } .sidebar-menu { list-style: none; padding: 0; margin: 0; } .sidebar-menu li { padding: 0; } .sidebar-menu li a { display: block; padding: 10px 15px; text-decoration: none; color: #495057; transition: background-color 0.2s; } .sidebar-menu li a:hover { background-color: #e9ecef; } .main-content { margin-left: 250px; padding: 20px; transition: margin-left 0.3s; }

2. 基础侧边栏功能实现

2.1 折叠展开功能

折叠展开是侧边栏最基本也是最重要的功能之一。使用jQuery UI来实现这一功能非常简单。

$(document).ready(function() { // 初始状态 var sidebarCollapsed = false; // 折叠/展开按钮点击事件 $("#toggle-sidebar").click(function() { if (sidebarCollapsed) { // 展开侧边栏 $(".sidebar-container").animate({ width: "250px" }, 300, function() { // 动画完成后显示菜单文本 $(".sidebar-menu li a span").show(); }); $(".main-content").animate({ marginLeft: "250px" }, 300); $(this).text("折叠"); sidebarCollapsed = false; } else { // 折叠侧边栏 $(".sidebar-container").animate({ width: "50px" }, 300, function() { // 动画完成后隐藏菜单文本 $(".sidebar-menu li a span").hide(); }); $(".main-content").animate({ marginLeft: "50px" }, 300); $(this).text("展开"); sidebarCollapsed = true; } }); });

为了支持折叠状态下的图标显示，我们需要修改HTML结构，为每个菜单项添加图标和文本：

<div class="sidebar-content"> <ul class="sidebar-menu"> <li> <a href="#"> <i class="ui-icon ui-icon-home"></i> <span>首页</span> </a> </li> <li> <a href="#"> <i class="ui-icon ui-icon-note"></i> <span>产品</span> </a> </li> <li> <a href="#"> <i class="ui-icon ui-icon-gear"></i> <span>服务</span> </a> </li> <li> <a href="#"> <i class="ui-icon ui-icon-info"></i> <span>关于我们</span> </a> </li> <li> <a href="#"> <i class="ui-icon ui-icon-mail-closed"></i> <span>联系方式</span> </a> </li> </ul> </div>

2.2 多级菜单实现

在实际应用中，侧边栏通常包含多级菜单。下面我们来实现一个支持多级菜单的侧边栏。

首先，修改HTML结构以支持多级菜单：

<div class="sidebar-content"> <ul class="sidebar-menu"> <li> <a href="#"> <i class="ui-icon ui-icon-home"></i> <span>首页</span> </a> </li> <li> <a href="#" class="has-submenu"> <i class="ui-icon ui-icon-note"></i> <span>产品</span> <i class="ui-icon ui-icon-triangle-1-e submenu-arrow"></i> </a> <ul class="submenu"> <li><a href="#">产品分类1</a></li> <li><a href="#">产品分类2</a></li> <li><a href="#">产品分类3</a></li> </ul> </li> <li> <a href="#" class="has-submenu"> <i class="ui-icon ui-icon-gear"></i> <span>服务</span> <i class="ui-icon ui-icon-triangle-1-e submenu-arrow"></i> </a> <ul class="submenu"> <li><a href="#">咨询服务</a></li> <li><a href="#">技术支持</a></li> <li><a href="#">培训服务</a></li> </ul> </li> <li> <a href="#"> <i class="ui-icon ui-icon-info"></i> <span>关于我们</span> </a> </li> <li> <a href="#"> <i class="ui-icon ui-icon-mail-closed"></i> <span>联系方式</span> </a> </li> </ul> </div>

然后，添加相应的CSS样式：

.has-submenu { position: relative; } .submenu-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .submenu { list-style: none; padding: 0; margin: 0; display: none; background-color: #e9ecef; } .submenu li a { padding-left: 30px; } .submenu-open { display: block; } .submenu-arrow-open { transform: translateY(-50%) rotate(90deg); }

最后，实现多级菜单的展开折叠功能：

$(document).ready(function() { // 多级菜单展开折叠 $(".has-submenu").click(function(e) { e.preventDefault(); var submenu = $(this).next(".submenu"); var arrow = $(this).find(".submenu-arrow"); // 切换子菜单显示状态 submenu.slideToggle(300, function() { // 动画完成后更新箭头状态 if ($(this).hasClass("submenu-open")) { $(this).removeClass("submenu-open"); arrow.removeClass("submenu-arrow-open"); } else { $(this).addClass("submenu-open"); arrow.addClass("submenu-arrow-open"); } }); }); });

3. 响应式设计实现

3.1 媒体查询与自适应布局

响应式设计是现代网站不可或缺的一部分。我们需要确保侧边栏在不同设备上都能提供良好的用户体验。

/* 平板设备 */ @media (max-width: 992px) { .sidebar-container { width: 200px; } .main-content { margin-left: 200px; } .sidebar-container.collapsed { width: 50px; } .main-content.expanded { margin-left: 50px; } } /* 手机设备 */ @media (max-width: 768px) { .sidebar-container { width: 100%; height: auto; position: relative; transform: translateX(-100%); transition: transform 0.3s ease; } .sidebar-container.open { transform: translateX(0); } .main-content { margin-left: 0; } .sidebar-menu li a span { display: inline; } #toggle-sidebar { display: none; } .mobile-menu-toggle { display: block; position: fixed; top: 15px; left: 15px; z-index: 1001; background-color: #343a40; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer; } } /* 默认情况下隐藏移动菜单按钮 */ .mobile-menu-toggle { display: none; }

在HTML中添加移动菜单按钮：

<button class="mobile-menu-toggle">菜单</button>

3.2 JavaScript响应式处理

添加JavaScript代码来处理不同设备上的交互：

$(document).ready(function() { // 移动菜单切换 $(".mobile-menu-toggle").click(function() { $(".sidebar-container").toggleClass("open"); }); // 点击主要内容区域时，在移动设备上关闭侧边栏 $(".main-content").click(function() { if ($(window).width() <= 768) { $(".sidebar-container").removeClass("open"); } }); // 窗口大小改变时的处理 $(window).resize(function() { var width = $(window).width(); if (width > 768) { // 在大屏幕上确保侧边栏可见 $(".sidebar-container").removeClass("open"); // 重置侧边栏状态 if (sidebarCollapsed) { $(".sidebar-container").width("50px"); $(".main-content").css("margin-left", "50px"); } else { $(".sidebar-container").width(width > 992 ? "250px" : "200px"); $(".main-content").css("margin-left", width > 992 ? "250px" : "200px"); } } }); });

4. 动画效果增强

4.1 jQuery UI动画效果

jQuery UI提供了丰富的动画效果，我们可以利用这些效果来增强侧边栏的用户体验。

$(document).ready(function() { // 使用jQuery UI的效果增强折叠展开动画 $("#toggle-sidebar").click(function() { if (sidebarCollapsed) { // 使用jQuery UI的bounce效果展开侧边栏 $(".sidebar-container").toggle({ effect: "slide", direction: "left", duration: 500, easing: "easeOutBounce", complete: function() { $(".sidebar-menu li a span").show(); } }); $(".main-content").animate({ marginLeft: "250px" }, 500); $(this).text("折叠"); sidebarCollapsed = false; } else { // 使用jQuery UI的slide效果折叠侧边栏 $(".sidebar-container").toggle({ effect: "slide", direction: "left", duration: 300, complete: function() { $(".sidebar-menu li a span").hide(); } }); $(".main-content").animate({ marginLeft: "50px" }, 300); $(this).text("展开"); sidebarCollapsed = true; } }); // 为菜单项添加悬停效果 $(".sidebar-menu li a").hover( function() { $(this).addClass("ui-state-hover"); }, function() { $(this).removeClass("ui-state-hover"); } ); // 为子菜单添加jQuery UI效果 $(".has-submenu").click(function(e) { e.preventDefault(); var submenu = $(this).next(".submenu"); var arrow = $(this).find(".submenu-arrow"); if (submenu.is(":visible")) { submenu.hide({ effect: "slide", direction: "up", duration: 200 }); arrow.removeClass("submenu-arrow-open"); } else { submenu.show({ effect: "slide", direction: "down", duration: 200 }); arrow.addClass("submenu-arrow-open"); } }); });

4.2 自定义动画效果

除了jQuery UI提供的内置效果，我们还可以创建自定义动画效果，使侧边栏更加独特。

$(document).ready(function() { // 自定义折叠展开动画 $.fn.extend({ sidebarToggle: function(options) { var settings = $.extend({ duration: 300, collapsedWidth: 50, expandedWidth: 250, contentMarginCollapsed: 50, contentMarginExpanded: 250, onCollapse: function() {}, onExpand: function() {} }, options); return this.each(function() { var $sidebar = $(this); var $mainContent = $(".main-content"); var $toggleButton = $("#toggle-sidebar"); var isCollapsed = false; $toggleButton.click(function() { if (isCollapsed) { // 展开侧边栏 $sidebar.animate({ width: settings.expandedWidth }, settings.duration, function() { $(".sidebar-menu li a span").fadeIn(200); settings.onExpand(); }); $mainContent.animate({ marginLeft: settings.contentMarginExpanded }, settings.duration); $(this).text("折叠"); isCollapsed = false; } else { // 折叠侧边栏 $(".sidebar-menu li a span").fadeOut(100); $sidebar.animate({ width: settings.collapsedWidth }, settings.duration, function() { settings.onCollapse(); }); $mainContent.animate({ marginLeft: settings.contentMarginCollapsed }, settings.duration); $(this).text("展开"); isCollapsed = true; } }); }); } }); // 使用自定义插件 $(".sidebar-container").sidebarToggle({ duration: 400, onCollapse: function() { console.log("侧边栏已折叠"); }, onExpand: function() { console.log("侧边栏已展开"); } }); });

5. 高级用户交互

5.1 拖拽调整宽度

允许用户拖拽调整侧边栏宽度可以提供更好的用户体验。

<!-- 在侧边栏HTML中添加拖拽手柄 --> <div class="sidebar-container"> <div class="sidebar-header"> <h3>导航菜单</h3> <button id="toggle-sidebar" class="ui-button">折叠</button> </div> <div class="sidebar-content"> <!-- 菜单内容 --> </div> <div class="sidebar-resize-handle"></div> </div>

添加CSS样式：

.sidebar-resize-handle { width: 5px; height: 100%; position: absolute; top: 0; right: 0; cursor: col-resize; background-color: #dee2e6; z-index: 1001; } .sidebar-resize-handle:hover { background-color: #adb5bd; }

实现拖拽调整宽度的JavaScript代码：

$(document).ready(function() { var isResizing = false; var startX = 0; var startWidth = 0; $(".sidebar-resize-handle").mousedown(function(e) { isResizing = true; startX = e.clientX; startWidth = $(".sidebar-container").width(); $(document).mousemove(function(e) { if (!isResizing) return; var newWidth = startWidth + (e.clientX - startX); // 限制最小和最大宽度 if (newWidth < 150) newWidth = 150; if (newWidth > 400) newWidth = 400; $(".sidebar-container").width(newWidth); $(".main-content").css("margin-left", newWidth); }); $(document).mouseup(function() { isResizing = false; $(document).unbind("mousemove"); $(document).unbind("mouseup"); }); return false; // 防止文本选择 }); });

5.2 可固定/浮动侧边栏

实现一个可以固定在屏幕上或者随内容滚动的侧边栏。

<!-- 在侧边栏头部添加固定按钮 --> <div class="sidebar-header"> <h3>导航菜单</h3> <div> <button id="pin-sidebar" class="ui-button" title="固定/取消固定"> <i class="ui-icon ui-icon-pin-w"></i> </button> <button id="toggle-sidebar" class="ui-button">折叠</button> </div> </div>

添加CSS样式：

.sidebar-container.pinned { position: fixed; top: 0; height: 100vh; } .sidebar-container.unpinned { position: absolute; height: auto; }

实现固定/浮动功能的JavaScript代码：

$(document).ready(function() { var isPinned = true; $("#pin-sidebar").click(function() { var $sidebar = $(".sidebar-container"); var $icon = $(this).find("i"); if (isPinned) { // 取消固定 $sidebar.removeClass("pinned").addClass("unpinned"); $icon.removeClass("ui-icon-pin-w").addClass("ui-icon-pin-s"); isPinned = false; } else { // 固定侧边栏 $sidebar.removeClass("unpinned").addClass("pinned"); $icon.removeClass("ui-icon-pin-s").addClass("ui-icon-pin-w"); isPinned = true; } }); });

5.3 主题切换功能

允许用户切换不同的主题，提供个性化的体验。

<!-- 在侧边栏头部添加主题切换按钮 --> <div class="sidebar-header"> <h3>导航菜单</h3> <div> <select id="theme-selector"> <option value="base">默认主题</option> <option value="black-tie">黑色主题</option> <option value="blitzer">红色主题</option> <option value="cupertino">蓝色主题</option> <option value="dark-hive">暗色主题</option> </select> <button id="pin-sidebar" class="ui-button" title="固定/取消固定"> <i class="ui-icon ui-icon-pin-w"></i> </button> <button id="toggle-sidebar" class="ui-button">折叠</button> </div> </div>

实现主题切换功能的JavaScript代码：

$(document).ready(function() { // 主题切换 $("#theme-selector").change(function() { var theme = $(this).val(); var themeUrl = "https://code.jquery.com/ui/1.13.0/themes/" + theme + "/jquery-ui.css"; // 移除旧的jQuery UI主题CSS $("link[href*='jquery-ui.css']").remove(); // 添加新的jQuery UI主题CSS $("<link/>", { rel: "stylesheet", type: "text/css", href: themeUrl }).appendTo("head"); // 保存主题选择到localStorage localStorage.setItem("sidebarTheme", theme); }); // 页面加载时应用保存的主题 var savedTheme = localStorage.getItem("sidebarTheme"); if (savedTheme) { $("#theme-selector").val(savedTheme); $("#theme-selector").change(); } });

6. 实际应用案例

6.1 管理后台侧边栏

下面是一个完整的管理后台侧边栏实现示例，包含上述所有功能。

HTML结构：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery UI侧边栏示例</title> <!-- 引入jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery UI --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script> <style> /* 基本样式 */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .sidebar-container { width: 250px; height: 100vh; background-color: #f8f9fa; border-right: 1px solid #dee2e6; position: fixed; top: 0; left: 0; z-index: 1000; display: flex; flex-direction: column; transition: width 0.3s; } .sidebar-header { padding: 15px; background-color: #343a40; color: white; display: flex; justify-content: space-between; align-items: center; } .sidebar-content { flex-grow: 1; overflow-y: auto; padding: 10px 0; } .sidebar-menu { list-style: none; padding: 0; margin: 0; } .sidebar-menu li { padding: 0; } .sidebar-menu li a { display: flex; align-items: center; padding: 10px 15px; text-decoration: none; color: #495057; transition: background-color 0.2s; } .sidebar-menu li a:hover { background-color: #e9ecef; } .sidebar-menu li a i { margin-right: 10px; } .main-content { margin-left: 250px; padding: 20px; transition: margin-left 0.3s; } .mobile-menu-toggle { display: none; position: fixed; top: 15px; left: 15px; z-index: 1001; background-color: #343a40; color: white; border: none; border-radius: 4px; padding: 8px 12px; cursor: pointer; } .has-submenu { position: relative; } .submenu-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); transition: transform 0.3s; } .submenu { list-style: none; padding: 0; margin: 0; display: none; background-color: #e9ecef; } .submenu li a { padding-left: 30px; } .submenu-arrow-open { transform: translateY(-50%) rotate(90deg); } .sidebar-resize-handle { width: 5px; height: 100%; position: absolute; top: 0; right: 0; cursor: col-resize; background-color: #dee2e6; z-index: 1001; } .sidebar-resize-handle:hover { background-color: #adb5bd; } .sidebar-container.pinned { position: fixed; top: 0; height: 100vh; } .sidebar-container.unpinned { position: absolute; height: auto; } /* 响应式设计 */ @media (max-width: 992px) { .sidebar-container { width: 200px; } .main-content { margin-left: 200px; } } @media (max-width: 768px) { .sidebar-container { width: 100%; height: auto; position: relative; transform: translateX(-100%); transition: transform 0.3s ease; } .sidebar-container.open { transform: translateX(0); } .main-content { margin-left: 0; } .sidebar-menu li a span { display: inline; } #toggle-sidebar { display: none; } .mobile-menu-toggle { display: block; } .sidebar-resize-handle { display: none; } } </style> </head> <body> <button class="mobile-menu-toggle">菜单</button> <div class="sidebar-container pinned"> <div class="sidebar-header"> <h3>管理后台</h3> <div> <select id="theme-selector"> <option value="base">默认主题</option> <option value="black-tie">黑色主题</option> <option value="blitzer">红色主题</option> <option value="cupertino">蓝色主题</option> <option value="dark-hive">暗色主题</option> </select> <button id="pin-sidebar" class="ui-button" title="固定/取消固定"> <i class="ui-icon ui-icon-pin-w"></i> </button> <button id="toggle-sidebar" class="ui-button">折叠</button> </div> </div> <div class="sidebar-content"> <ul class="sidebar-menu"> <li> <a href="#"> <i class="ui-icon ui-icon-home"></i> <span>仪表盘</span> </a> </li> <li> <a href="#" class="has-submenu"> <i class="ui-icon ui-icon-note"></i> <span>内容管理</span> <i class="ui-icon ui-icon-triangle-1-e submenu-arrow"></i> </a> <ul class="submenu"> <li><a href="#">文章管理</a></li> <li><a href="#">分类管理</a></li> <li><a href="#">标签管理</a></li> <li><a href="#">评论管理</a></li> </ul> </li> <li> <a href="#" class="has-submenu"> <i class="ui-icon ui-icon-person"></i> <span>用户管理</span> <i class="ui-icon ui-icon-triangle-1-e submenu-arrow"></i> </a> <ul class="submenu"> <li><a href="#">用户列表</a></li> <li><a href="#">角色管理</a></li> <li><a href="#">权限管理</a></li> </ul> </li> <li> <a href="#" class="has-submenu"> <i class="ui-icon ui-icon-cart"></i> <span>商城管理</span> <i class="ui-icon ui-icon-triangle-1-e submenu-arrow"></i> </a> <ul class="submenu"> <li><a href="#">商品管理</a></li> <li><a href="#">订单管理</a></li> <li><a href="#">库存管理</a></li> <li><a href="#">物流管理</a></li> </ul> </li> <li> <a href="#"> <i class="ui-icon ui-icon-gear"></i> <span>系统设置</span> </a> </li> <li> <a href="#"> <i class="ui-icon ui-icon-info"></i> <span>关于系统</span> </a> </li> </ul> </div> <div class="sidebar-resize-handle"></div> </div> <div class="main-content"> <h1>欢迎使用管理后台</h1> <p>这是一个使用jQuery UI开发的响应式侧边栏导航示例。</p> <div class="ui-widget"> <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0.7em;"> <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: 0.3em;"></span> <strong>提示：</strong> 您可以点击上方的按钮来折叠/展开侧边栏，调整宽度，切换主题，或者固定/取消固定侧边栏。</p> </div> </div> <h2>功能特点</h2> <ul> <li>响应式设计，适配各种设备</li> <li>可折叠展开的侧边栏</li> <li>多级菜单支持</li> <li>可拖拽调整宽度</li> <li>可固定/浮动切换</li> <li>多主题切换</li> <li>平滑的动画效果</li> </ul> </div> <script> $(document).ready(function() { // 全局变量 var sidebarCollapsed = false; var isPinned = true; var isResizing = false; var startX = 0; var startWidth = 0; // 折叠/展开功能 $("#toggle-sidebar").click(function() { if (sidebarCollapsed) { // 展开侧边栏 $(".sidebar-container").animate({ width: "250px" }, 300, function() { // 动画完成后显示菜单文本 $(".sidebar-menu li a span").show(); }); $(".main-content").animate({ marginLeft: "250px" }, 300); $(this).text("折叠"); sidebarCollapsed = false; } else { // 折叠侧边栏 $(".sidebar-menu li a span").hide(); $(".sidebar-container").animate({ width: "50px" }, 300); $(".main-content").animate({ marginLeft: "50px" }, 300); $(this).text("展开"); sidebarCollapsed = true; } }); // 多级菜单展开折叠 $(".has-submenu").click(function(e) { e.preventDefault(); var submenu = $(this).next(".submenu"); var arrow = $(this).find(".submenu-arrow"); // 切换子菜单显示状态 submenu.slideToggle(300, function() { // 动画完成后更新箭头状态 if ($(this).is(":visible")) { arrow.addClass("submenu-arrow-open"); } else { arrow.removeClass("submenu-arrow-open"); } }); }); // 移动菜单切换 $(".mobile-menu-toggle").click(function() { $(".sidebar-container").toggleClass("open"); }); // 点击主要内容区域时，在移动设备上关闭侧边栏 $(".main-content").click(function() { if ($(window).width() <= 768) { $(".sidebar-container").removeClass("open"); } }); // 窗口大小改变时的处理 $(window).resize(function() { var width = $(window).width(); if (width > 768) { // 在大屏幕上确保侧边栏可见 $(".sidebar-container").removeClass("open"); // 重置侧边栏状态 if (sidebarCollapsed) { $(".sidebar-container").width("50px"); $(".main-content").css("margin-left", "50px"); } else { $(".sidebar-container").width(width > 992 ? "250px" : "200px"); $(".main-content").css("margin-left", width > 992 ? "250px" : "200px"); } } }); // 拖拽调整宽度 $(".sidebar-resize-handle").mousedown(function(e) { isResizing = true; startX = e.clientX; startWidth = $(".sidebar-container").width(); $(document).mousemove(function(e) { if (!isResizing) return; var newWidth = startWidth + (e.clientX - startX); // 限制最小和最大宽度 if (newWidth < 150) newWidth = 150; if (newWidth > 400) newWidth = 400; $(".sidebar-container").width(newWidth); $(".main-content").css("margin-left", newWidth); }); $(document).mouseup(function() { isResizing = false; $(document).unbind("mousemove"); $(document).unbind("mouseup"); }); return false; // 防止文本选择 }); // 固定/浮动切换 $("#pin-sidebar").click(function() { var $sidebar = $(".sidebar-container"); var $icon = $(this).find("i"); if (isPinned) { // 取消固定 $sidebar.removeClass("pinned").addClass("unpinned"); $icon.removeClass("ui-icon-pin-w").addClass("ui-icon-pin-s"); isPinned = false; } else { // 固定侧边栏 $sidebar.removeClass("unpinned").addClass("pinned"); $icon.removeClass("ui-icon-pin-s").addClass("ui-icon-pin-w"); isPinned = true; } }); // 主题切换 $("#theme-selector").change(function() { var theme = $(this).val(); var themeUrl = "https://code.jquery.com/ui/1.13.0/themes/" + theme + "/jquery-ui.css"; // 移除旧的jQuery UI主题CSS $("link[href*='jquery-ui.css']").remove(); // 添加新的jQuery UI主题CSS $("<link/>", { rel: "stylesheet", type: "text/css", href: themeUrl }).appendTo("head"); // 保存主题选择到localStorage localStorage.setItem("sidebarTheme", theme); }); // 页面加载时应用保存的主题 var savedTheme = localStorage.getItem("sidebarTheme"); if (savedTheme) { $("#theme-selector").val(savedTheme); $("#theme-selector").change(); } // 为菜单项添加悬停效果 $(".sidebar-menu li a").hover( function() { $(this).addClass("ui-state-hover"); }, function() { $(this).removeClass("ui-state-hover"); } ); }); </script> </body> </html>

6.2 电商网站侧边栏

下面是一个适用于电商网站的侧边栏实现，包含商品分类、价格筛选、品牌筛选等功能。

HTML结构：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>电商网站侧边栏示例</title> <!-- 引入jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery UI --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script> <style> /* 基本样式 */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f8f9fa; } .header { background-color: #343a40; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; } .header h1 { margin: 0; font-size: 24px; } .container { display: flex; max-width: 1400px; margin: 0 auto; } .sidebar-container { width: 280px; background-color: white; border-right: 1px solid #dee2e6; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.05); } .sidebar-section { margin-bottom: 25px; } .sidebar-section h3 { margin-top: 0; margin-bottom: 15px; font-size: 18px; color: #343a40; border-bottom: 1px solid #dee2e6; padding-bottom: 10px; } .filter-group { margin-bottom: 15px; } .filter-group label { display: block; margin-bottom: 5px; font-weight: normal; } .price-range { display: flex; align-items: center; gap: 10px; } .price-range input { width: 80px; padding: 5px; border: 1px solid #ced4da; border-radius: 4px; } .checkbox-list { list-style: none; padding: 0; margin: 0; } .checkbox-list li { margin-bottom: 8px; } .checkbox-list label { display: flex; align-items: center; cursor: pointer; } .checkbox-list input { margin-right: 8px; } .color-options { display: flex; flex-wrap: wrap; gap: 10px; } .color-option { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; } .color-option.selected { border-color: #343a40; } .rating-filter { display: flex; flex-direction: column; gap: 8px; } .rating-option { display: flex; align-items: center; cursor: pointer; } .rating-option input { margin-right: 8px; } .apply-filters { width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.2s; } .apply-filters:hover { background-color: #0069d9; } .main-content { flex: 1; padding: 20px; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .product-card { background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .product-image { width: 100%; height: 200px; object-fit: cover; } .product-info { padding: 15px; } .product-title { margin: 0 0 10px; font-size: 16px; color: #343a40; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-price { font-size: 18px; font-weight: bold; color: #dc3545; margin-bottom: 10px; } .product-rating { display: flex; align-items: center; margin-bottom: 10px; } .mobile-filter-toggle { display: none; width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-bottom: 20px; } /* 响应式设计 */ @media (max-width: 992px) { .sidebar-container { width: 240px; } } @media (max-width: 768px) { .container { flex-direction: column; } .sidebar-container { width: 100%; position: fixed; top: 0; left: 0; height: 100vh; z-index: 1000; transform: translateX(-100%); transition: transform 0.3s ease; overflow-y: auto; } .sidebar-container.open { transform: translateX(0); } .mobile-filter-toggle { display: block; } .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } </style> </head> <body> <div class="header"> <h1>电商网站</h1> <div> <input type="text" placeholder="搜索商品..." style="padding: 8px; border-radius: 4px; border: none; width: 300px;"> <button class="ui-button" style="margin-left: 10px;">搜索</button> </div> </div> <div class="container"> <button class="mobile-filter-toggle">筛选商品</button> <div class="sidebar-container"> <div class="sidebar-section"> <h3>商品分类</h3> <ul class="checkbox-list"> <li> <label> <input type="checkbox" name="category" value="electronics"> 电子产品 (128) </label> </li> <li> <label> <input type="checkbox" name="category" value="clothing"> 服装 (256) </label> </li> <li> <label> <input type="checkbox" name="category" value="home"> 家居用品 (87) </label> </li> <li> <label> <input type="checkbox" name="category" value="beauty"> 美妆护肤 (64) </label> </li> <li> <label> <input type="checkbox" name="category" value="sports"> 运动户外 (42) </label> </li> </ul> </div> <div class="sidebar-section"> <h3>价格区间</h3> <div class="filter-group"> <div class="price-range"> <input type="number" id="min-price" placeholder="最低价"> <span>-</span> <input type="number" id="max-price" placeholder="最高价"> </div> <div id="price-slider" style="margin-top: 15px;"></div> </div> </div> <div class="sidebar-section"> <h3>品牌</h3> <ul class="checkbox-list"> <li> <label> <input type="checkbox" name="brand" value="apple"> Apple (32) </label> </li> <li> <label> <input type="checkbox" name="brand" value="samsung"> Samsung (28) </label> </li> <li> <label> <input type="checkbox" name="brand" value="nike"> Nike (45) </label> </li> <li> <label> <input type="checkbox" name="brand" value="adidas"> Adidas (38) </label> </li> <li> <label> <input type="checkbox" name="brand" value="sony"> Sony (21) </label> </li> </ul> </div> <div class="sidebar-section"> <h3>颜色</h3> <div class="color-options"> <div class="color-option" style="background-color: #000000;" data-color="black"></div> <div class="color-option" style="background-color: #ffffff; border: 1px solid #dee2e6;" data-color="white"></div> <div class="color-option" style="background-color: #ff0000;" data-color="red"></div> <div class="color-option" style="background-color: #0000ff;" data-color="blue"></div> <div class="color-option" style="background-color: #008000;" data-color="green"></div> <div class="color-option" style="background-color: #ffff00;" data-color="yellow"></div> <div class="color-option" style="background-color: #ff00ff;" data-color="purple"></div> <div class="color-option" style="background-color: #ffa500;" data-color="orange"></div> </div> </div> <div class="sidebar-section"> <h3>用户评分</h3> <div class="rating-filter"> <div class="rating-option"> <input type="radio" name="rating" value="4" id="rating4"> <label for="rating4"> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> 及以上 </label> </div> <div class="rating-option"> <input type="radio" name="rating" value="3" id="rating3"> <label for="rating3"> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> 及以上 </label> </div> <div class="rating-option"> <input type="radio" name="rating" value="2" id="rating2"> <label for="rating2"> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> 及以上 </label> </div> </div> </div> <button class="apply-filters">应用筛选</button> </div> <div class="main-content"> <div class="product-grid"> <!-- 商品卡片 1 --> <div class="product-card"> <img src="https://picsum.photos/seed/product1/300/200.jpg" alt="商品图片" class="product-image"> <div class="product-info"> <h3 class="product-title">高端智能手机</h3> <div class="product-price">¥3999</div> <div class="product-rating"> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span style="margin-left: 5px;">(128)</span> </div> </div> </div> <!-- 商品卡片 2 --> <div class="product-card"> <img src="https://picsum.photos/seed/product2/300/200.jpg" alt="商品图片" class="product-image"> <div class="product-info"> <h3 class="product-title">时尚运动鞋</h3> <div class="product-price">¥599</div> <div class="product-rating"> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span style="margin-left: 5px;">(86)</span> </div> </div> </div> <!-- 商品卡片 3 --> <div class="product-card"> <img src="https://picsum.photos/seed/product3/300/200.jpg" alt="商品图片" class="product-image"> <div class="product-info"> <h3 class="product-title">无线蓝牙耳机</h3> <div class="product-price">¥299</div> <div class="product-rating"> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span style="margin-left: 5px;">(215)</span> </div> </div> </div> <!-- 商品卡片 4 --> <div class="product-card"> <img src="https://picsum.photos/seed/product4/300/200.jpg" alt="商品图片" class="product-image"> <div class="product-info"> <h3 class="product-title">智能手表</h3> <div class="product-price">¥1299</div> <div class="product-rating"> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span style="margin-left: 5px;">(97)</span> </div> </div> </div> <!-- 商品卡片 5 --> <div class="product-card"> <img src="https://picsum.photos/seed/product5/300/200.jpg" alt="商品图片" class="product-image"> <div class="product-info"> <h3 class="product-title">便携式充电宝</h3> <div class="product-price">¥129</div> <div class="product-rating"> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span style="margin-left: 5px;">(342)</span> </div> </div> </div> <!-- 商品卡片 6 --> <div class="product-card"> <img src="https://picsum.photos/seed/product6/300/200.jpg" alt="商品图片" class="product-image"> <div class="product-info"> <h3 class="product-title">时尚背包</h3> <div class="product-price">¥199</div> <div class="product-rating"> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span class="ui-icon ui-icon-star"></span> <span style="margin-left: 5px;">(76)</span> </div> </div> </div> </div> </div> </div> <script> $(document).ready(function() { // 价格滑块 $("#price-slider").slider({ range: true, min: 0, max: 10000, values: [0, 5000], slide: function(event, ui) { $("#min-price").val(ui.values[0]); $("#max-price").val(ui.values[1]); } }); // 设置初始价格输入框值 $("#min-price").val($("#price-slider").slider("values", 0)); $("#max-price").val($("#price-slider").slider("values", 1)); // 价格输入框变化时更新滑块 $("#min-price").on("change", function() { $("#price-slider").slider("values", 0, $(this).val()); }); $("#max-price").on("change", function() { $("#price-slider").slider("values", 1, $(this).val()); }); // 颜色选择 $(".color-option").click(function() { $(this).toggleClass("selected"); }); // 移动端筛选切换 $(".mobile-filter-toggle").click(function() { $(".sidebar-container").toggleClass("open"); }); // 点击主要内容区域时，在移动设备上关闭筛选侧边栏 $(".main-content").click(function() { if ($(window).width() <= 768) { $(".sidebar-container").removeClass("open"); } }); // 应用筛选按钮 $(".apply-filters").click(function() { // 收集所有筛选条件 var filters = { categories: [], brands: [], colors: [], priceRange: { min: $("#min-price").val(), max: $("#max-price").val() }, rating: $("input[name='rating']:checked").val() }; // 收集选中的分类 $("input[name='category']:checked").each(function() { filters.categories.push($(this).val()); }); // 收集选中的品牌 $("input[name='brand']:checked").each(function() { filters.brands.push($(this).val()); }); // 收集选中的颜色 $(".color-option.selected").each(function() { filters.colors.push($(this).data("color")); }); // 这里可以将筛选条件发送到服务器，或者在前端进行筛选 console.log("筛选条件:", filters); // 显示筛选结果提示 var resultMessage = "已应用筛选条件"; if (filters.categories.length > 0) { resultMessage += " | 分类: " + filters.categories.join(", "); } if (filters.brands.length > 0) { resultMessage += " | 品牌: " + filters.brands.join(", "); } if (filters.colors.length > 0) { resultMessage += " | 颜色: " + filters.colors.join(", "); } if (filters.priceRange.min > 0 || filters.priceRange.max < 10000) { resultMessage += " | 价格: ¥" + filters.priceRange.min + " - ¥" + filters.priceRange.max; } if (filters.rating) { resultMessage += " | 评分: " + filters.rating + "星及以上"; } // 使用jQuery UI对话框显示筛选结果 $("<div>").html(resultMessage).dialog({ title: "筛选结果", buttons: { "确定": function() { $(this).dialog("close"); } }, modal: true }); // 在移动设备上关闭筛选侧边栏 if ($(window).width() <= 768) { $(".sidebar-container").removeClass("open"); } }); }); </script> </body> </html>

7. 性能优化与最佳实践

7.1 代码优化

优化jQuery代码可以提高侧边栏的性能和用户体验。

// 使用事件委托来处理动态添加的元素 $(document).ready(function() { // 优化前：为每个菜单项单独绑定事件 // $(".sidebar-menu li a").click(function() { ... }); // 优化后：使用事件委托 $(".sidebar-menu").on("click", "li a", function(e) { // 处理菜单点击事件 }); // 缓存DOM查询结果 var $sidebar = $(".sidebar-container"); var $mainContent = $(".main-content"); var $toggleButton = $("#toggle-sidebar"); $toggleButton.click(function() { if (sidebarCollapsed) { $sidebar.animate({ width: "250px" }, 300); $mainContent.animate({ marginLeft: "250px" }, 300); $(this).text("折叠"); sidebarCollapsed = false; } else { $sidebar.animate({ width: "50px" }, 300); $mainContent.animate({ marginLeft: "50px" }, 300); $(this).text("展开"); sidebarCollapsed = true; } }); // 使用防抖技术处理窗口大小改变事件 var resizeTimer; $(window).on("resize", function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { // 处理窗口大小改变 var width = $(window).width(); if (width > 768) { $sidebar.removeClass("open"); // 其他处理逻辑... } }, 250); }); });

7.2 加载优化

优化侧边栏的加载过程可以提升用户体验。

// 延迟加载非关键资源 $(document).ready(function() { // 首先加载基本功能 initializeBasicSidebar(); // 使用setTimeout延迟加载非关键功能 setTimeout(function() { loadAdvancedFeatures(); }, 100); }); function initializeBasicSidebar() { // 基本侧边栏功能 $("#toggle-sidebar").click(function() { $(".sidebar-container").toggleClass("collapsed"); $(".main-content").toggleClass("expanded"); }); } function loadAdvancedFeatures() { // 加载高级功能，如动画效果、主题切换等 $(".sidebar-menu li a").hover( function() { $(this).addClass("ui-state-hover"); }, function() { $(this).removeClass("ui-state-hover"); } ); // 初始化主题切换 $("#theme-selector").change(function() { var theme = $(this).val(); var themeUrl = "https://code.jquery.com/ui/1.13.0/themes/" + theme + "/jquery-ui.css"; $("link[href*='jquery-ui.css']").remove(); $("<link/>", { rel: "stylesheet", type: "text/css", href: themeUrl }).appendTo("head"); }); }

7.3 可访问性优化

确保侧边栏对所有用户都可用，包括使用辅助技术的用户。

<!-- 添加ARIA属性提高可访问性 --> <div class="sidebar-container" role="navigation" aria-label="主导航"> <div class="sidebar-header"> <h3>导航菜单</h3> <button id="toggle-sidebar" class="ui-button" aria-expanded="true" aria-controls="sidebar-content"> 折叠 </button> </div> <div class="sidebar-content" id="sidebar-content"> <ul class="sidebar-menu" role="menu"> <li role="none"> <a href="#" role="menuitem"> <i class="ui-icon ui-icon-home" aria-hidden="true"></i> <span>首页</span> </a> </li> <li role="none"> <a href="#" class="has-submenu" role="menuitem" aria-haspopup="true" aria-expanded="false"> <i class="ui-icon ui-icon-note" aria-hidden="true"></i> <span>产品</span> <i class="ui-icon ui-icon-triangle-1-e submenu-arrow" aria-hidden="true"></i> </a> <ul class="submenu" role="menu"> <li role="none"><a href="#" role="menuitem">产品分类1</a></li> <li role="none"><a href="#" role="menuitem">产品分类2</a></li> <li role="none"><a href="#" role="menuitem">产品分类3</a></li> </ul> </li> <!-- 其他菜单项 --> </ul> </div> </div>

// 增强键盘导航 $(document).ready(function() { // 键盘导航支持 $(".sidebar-menu li a").on("keydown", function(e) { var $menuItem = $(this); var $menuItems = $(".sidebar-menu li a"); var currentIndex = $menuItems.index($menuItem); switch(e.keyCode) { case 13: // Enter键 case 32: // 空格键 e.preventDefault(); $menuItem.click(); break; case 38: // 上箭头 e.preventDefault(); if (currentIndex > 0) { $menuItems.eq(currentIndex - 1).focus(); } break; case 40: // 下箭头 e.preventDefault(); if (currentIndex < $menuItems.length - 1) { $menuItems.eq(currentIndex + 1).focus(); } break; case 37: // 左箭头 e.preventDefault(); // 如果是子菜单项，关闭子菜单 if ($menuItem.closest(".submenu").length) { var $parentMenu = $menuItem.closest(".submenu").prev(".has-submenu"); $parentMenu.click(); $parentMenu.focus(); } break; case 39: // 右箭头 e.preventDefault(); // 如果是有子菜单的项，打开子菜单 if ($menuItem.hasClass("has-submenu")) { $menuItem.click(); $menuItem.next(".submenu").find("a").first().focus(); } break; } }); // 更新ARIA属性 $("#toggle-sidebar").click(function() { var isExpanded = $(this).attr("aria-expanded") === "true"; $(this).attr("aria-expanded", !isExpanded); $("#sidebar-content").attr("aria-hidden", isExpanded); }); $(".has-submenu").click(function() { var isExpanded = $(this).attr("aria-expanded") === "true"; $(this).attr("aria-expanded", !isExpanded); }); });