如何快速上手响应式侧边菜单Sidr：sidr.new与$.sidr双模式API全对比

如何快速上手响应式侧边菜单Sidr：sidr.new与$.sidr双模式API全对比

【免费下载链接】sidrSidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.项目地址: https://gitcode.com/gh_mirrors/si/sidr

正在为网站加响应式侧边菜单？Sidr 同时提供两套 API：原生 JS 的sidr.new()与 jQuery 插件式的$.sidr()，一套代码、两种写法，零依赖也能做侧滑菜单。本文带你用 10 分钟对比两者的初始化方式、常用操作和选型建议，新手也能一次写对。

🧭 先认识 Sidr：一个插件，两种身份

Sidr 是一个用于创建侧边菜单（side menu）的轻量库，核心卖点就是让菜单快速变响应式：现代浏览器用 CSS3 过渡动画，不支持时自动回退到 jQuery.animate。

更关键的是它的"双模式"设计：

• 原生 JS 模式：挂到window.sidr，不需要 jQuery，入口见 src/sidr.js
• jQuery 插件模式：注册jQuery.sidr与jQuery.fn.sidr两个命名空间，入口见 src/jquery.sidr.js

// 原生模式：挂到 window.sidr window.sidr = sidr // jQuery 模式：双命名空间 jQuery.sidr = runner // 命令式：$.sidr('open', 'sidr') jQuery.fn.sidr = fnSidr // 插件式：$('#btn').sidr({ ... })

📋 双模式 API 一图对比

两种模式共享同一套底层实现：菜单实例统一存放在 src/js/menu.store.js 的"菜单仓库"里，命令式操作（open/close/toggle/reload）都由 src/js/runner.js 统一分发，所以行为完全一致，只是调用姿势不同。

🚀 原生 JS 模式：用 sidr.new 初始化侧边栏

初始化只需一步：传入"触发按钮的选择器"和配置对象。sidr.new内部会完成"合并默认配置 → 创建菜单实例 → 给按钮绑定点击事件"三件事，源码见 src/js/sidr.js。

sidr.new('#simple-menu', { timing: 'ease-in-out', speed: 500 })

之后按钮点击会自动切换菜单；手动控制同样直观：

window.onresize = function () { sidr.close('sidr') // 窗口缩放时自动收起菜单 }

💡 状态查询返回一个{ moving, opened }对象（定义在 src/js/status.js），opened为 true 表示菜单当前展开，方便你在页面逻辑里做判断。

完整可运行的例子：examples/vanilla/simple-menu.html

📦 jQuery 插件模式：$.fn.sidr 与 $.sidr 分工

jQuery 模式下有两个容易混淆的命名空间，其实分工很清晰：

• $('#btn').sidr(options)—— 插件式初始化，绑定在"触发按钮"上，源码见 src/js/jquery.fnSidr.js
• $.sidr('method', name)—— 命令式控制，操作"已注册的菜单"，源码见 src/js/runner.js

$(document).ready(function () { $('#simple-menu').sidr({ timing: 'ease-in-out', speed: 500 }) }) $(window).resize(function () { $.sidr('close', 'sidr') })

一个小技巧：$.sidr的第一个参数如果直接传函数，会被当作toggle的回调，省略菜单名时默认操作名为'sidr'的菜单（见 src/js/runner.js 的参数处理逻辑）。

完整可运行的例子：examples/jquery/simple-menu.html

⚖️ 选型指南：你的项目该用哪种写法？

选原生sidr.new的情况

• 项目没有引入 jQuery，或正在做去 jQuery 化改造
• 用模块化打包工具（项目自带 Rollup 构建，见 rollup.config.js）
• 追求更小体积，侧边菜单只是页面一小部分功能

选$.sidr的情况

• 老项目、后台系统已深度依赖 jQuery
• 习惯$('.btn').plugin()的插件链式写法
• 团队熟悉 jQuery 事件与 ready 生命周期

一句话总结：功能等价，写法随技术栈。两套 API 的方法名（open/close/toggle/reload/status）完全对齐，从 jQuery 版迁移到原生版几乎是机械替换，迁移成本极低。

⚙️ 常用配置速查（两种模式通用）

所有默认选项集中定义在 src/js/default.options.js：

📌 多菜单场景下，给每个实例起不同name，再用sidr.open('name')或$.sidr('open', 'name')分别控制即可，参考 examples/README.md 中的 multiple-menus 示例。

🎯 小结

• 响应式侧边菜单不需要二选一框架：有 jQuery 用$.sidr，无 jQuery 用sidr.new
• 初始化只传"按钮选择器 + 配置"，打开/关闭/切换/刷新四个命令两种模式完全同名
• 更多场景（锚点菜单、全屏菜单、多回调、远程内容加载）可直接看 examples/ 目录下成对提供的 vanilla 与 jquery 两套示例，对照学习最快

掌握这套双模式 API 后，你只需几分钟就能给任何页面加一个丝滑的响应式侧滑菜单 🚀

【免费下载链接】sidrSidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.项目地址: https://gitcode.com/gh_mirrors/si/sidr