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

如何快速上手响应式侧边菜单Sidrsidr.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.jsjQuery 插件模式注册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 一图对比对比项原生 JSsidr.newjQuery$.sidr依赖无纯原生需要 jQuery初始化sidr.new(#btn, options)$(#btn).sidr(options)打开菜单sidr.open(sidr)$.sidr(open, sidr)关闭菜单sidr.close(sidr)$.sidr(close, sidr)切换菜单sidr.toggle(sidr)$.sidr(toggle, sidr)刷新内容sidr.reload(sidr)$.sidr(reload, sidr)查询状态sidr.status()$.sidr(status)两种模式共享同一套底层实现菜单实例统一存放在 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.jsopened为 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选项默认值说明namesidr菜单实例名命令式 API 用它定位菜单sideleft菜单从左侧还是右侧滑出speed200动画时长支持fast/normal/毫秒数displacetrue打开时是否推挤位移正文内容sourcenull覆盖菜单内容来源支持远程内容bindclick触发菜单的事件onOpen/onClose空函数打开/关闭回调常用于加遮罩 多菜单场景下给每个实例起不同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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考