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

让侧边菜单加载远程数据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/sidrSidr是一个轻量的 jQuery 侧边菜单插件也是让菜单实现响应式的最简单方式。它的source选项决定了侧滑菜单的内容从哪里来——页面已有的选择器、远程 URL 或自定义函数。本文用 3 个实际示例讲透Sidr source 选项的全部玩法帮你快速让侧边菜单加载远程数据。source 选项是什么在 default.options.js 中可以看到source的默认值是null即直接使用页面上已有的菜单内容source: null, // Override the source of the content.一旦你传入sourceSidr 就会在初始化时执行 menu.js 中的reload逻辑按以下优先级判断内容来源source 传值类型行为函数function调用函数用返回值填充菜单URL 字符串string 合法 URL通过 XHR 异步拉取远程 HTML普通字符串string当作 CSS 选择器复制页面内容其他值—控制台报错Invalid Sidr Source用法一CSS 选择器复制页面内容最简单的场景菜单 HTML 本来就写在你页面里比如隐藏的桌面导航只需把选择器传给sourceSidr 会把匹配的 HTML 搬进侧边菜单source: .nav-sample, #sample2 两个实用细节支持多个选择器用逗号分隔一次性合并多个区块默认开启renaming: true搬过来的id和class会自动加上菜单名前缀避免与页面元素冲突。想保留原样可设置renaming: false。完整可运行的示例见 multiple-menus.html 与 reload-content.html。用法二URL 字符串加载远程数据⭐想让侧边菜单显示服务器上的动态内容比如后台返回的最新导航直接把 URL 传给sourcesource: http://localhost:9000/examples/remote-content.html内部流程在 utils.jsSidr 先用isUrl校验字符串是否为合法 URL再发起 GET 请求拿到响应文本后整体替换菜单内容。远程内容示例文件见 remote-content.html。⚠️ 注意两点必须是合法 URL才会走远程加载分支否则会被当作选择器处理远程文件需允许跨域访问同一域名下无此问题。用法三函数动态生成 HTML如果内容需要运行时实时计算根据用户、权限、时间等条件拼接就传一个返回 HTML 字符串的函数source: function () { return pThis 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就让侧边菜单同步更新。快速上手三步走引库在页面引入 jQuery 和 Sidr 构建产物 jquery.sidr.js配置$(#按钮).sidr({ name: my-menu, source: 选择器 / URL / 函数 })按需刷新内容变化时调用$.sidr(reload, my-menu)。小结场景source 传值复用页面已有菜单CSS 选择器字符串显示服务器/接口 HTML合法 URL 字符串内容需实时计算返回 HTML 的函数掌握这 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考