企业官网建设流程全解析

让侧边菜单加载远程数据：Sidr的source选项3大用法（选择器、URL、函数）详解

【免费下载链接】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是一个轻量的 jQuery 侧边菜单插件，也是让菜单实现响应式的最简单方式。它的source选项决定了侧滑菜单的内容从哪里来——页面已有的选择器、远程 URL 或自定义函数。本文用 3 个实际示例讲透Sidr source 选项的全部玩法，帮你快速让侧边菜单加载远程数据。

source 选项是什么？

在 default.options.js 中可以看到，source的默认值是null，即直接使用页面上已有的菜单内容：

source: null, // Override the source of the content.

一旦你传入source，Sidr 就会在初始化时执行 menu.js 中的reload逻辑，按以下优先级判断内容来源：

用法一：CSS 选择器（复制页面内容）

最简单的场景：菜单 HTML 本来就写在你页面里（比如隐藏的桌面导航），只需把选择器传给source，Sidr 会把匹配的 HTML 搬进侧边菜单：

source: '.nav-sample, #sample2'

📌 两个实用细节：

• 支持多个选择器，用逗号分隔，一次性合并多个区块；
• 默认开启renaming: true，搬过来的id和class会自动加上菜单名前缀，避免与页面元素冲突。想保留原样可设置renaming: false。

完整可运行的示例见 multiple-menus.html 与 reload-content.html。

用法二：URL 字符串（加载远程数据）⭐

想让侧边菜单显示服务器上的动态内容（比如后台返回的最新导航），直接把 URL 传给source：

source: 'http://localhost:9000/examples/remote-content.html'

内部流程在 utils.js：Sidr 先用isUrl校验字符串是否为合法 URL，再发起 GET 请求，拿到响应文本后整体替换菜单内容。远程内容示例文件见 remote-content.html。

⚠️ 注意两点：

• 必须是合法 URL才会走远程加载分支，否则会被当作选择器处理；
• 远程文件需允许跨域访问（同一域名下无此问题）。

用法三：函数（动态生成 HTML）

如果内容需要运行时实时计算（根据用户、权限、时间等条件拼接），就传一个返回 HTML 字符串的函数：

source: function () { return '<p>This is the Sidr content generated with a callback</p>'; }

函数在菜单初始化时执行，返回值直接作为菜单 HTML。这是三种用法中最灵活的一种，适合对接 AJAX 后的模板渲染结果（在函数内完成异步请求并 return HTML 即可）。参考示例见 multiple-menus.html 中右侧顶部按钮的配置。

加分技巧：reload 命令刷新菜单内容

source只在初始化时生效一次。如果内容会变化，调用$.sidr('reload', '菜单名')即可重新执行 source 逻辑——函数会被再次调用、远程 URL 会被再次请求。示例见 reload-content.html：点击按钮更换链接文字后，一行reload就让侧边菜单同步更新。

快速上手三步走

1. 引库：在页面引入 jQuery 和 Sidr 构建产物 jquery.sidr.js；
2. 配置：$('#按钮').sidr({ name: 'my-menu', source: '选择器 / URL / 函数' })；
3. 按需刷新：内容变化时调用$.sidr('reload', 'my-menu')。

小结

掌握这 3 种用法，Sidr 侧边菜单就能轻松接入静态导航、远程数据和动态内容。更多选项说明可参考项目说明 README.md 和 default.options.js 中的默认配置注释。

【免费下载链接】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