简介
jquery-cookiebar 是一个基于 jQuery 的小型插件，用于在网站中添加 cookie 提示栏。用户可以自定义提示文本、链接和按钮等元素，并且可以在用户同意之后设置 cookie。
安装
使用 npm 安装 jquery-cookiebar：
npm install jquery-cookiebar
使用
在 HTML 文件的
<head>标签中引入 jQuery 和 jquery-cookiebar：<head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="./node_modules/jquery-cookiebar/jquery.cookiebar.js"></script> </head>
在 JavaScript 文件中初始化 cookiebar：
-- -------------------- ---- ------- ---------------------------- - ------------- -------- ----- ------ ------------ ------------- ----- ----------- ----- ------------- ----- ----------- ------- ---- ---------- --------------------- --- ---
展开代码上述代码会在页面加载完成后显示 cookiebar，并且提示文本为 "我们使用 Cookie 来提高您的浏览体验。"，同意按钮文本为 "同意"，同时也会显示一个 "Cookie 政策" 的链接，该链接的目标地址为 "/cookie-policy.html"。
高级功能
除了上述基本用法之外，jquery-cookiebar 还提供了一些高级功能：
自定义样式
用户可以通过 CSS 样式表来自定义 cookiebar 的样式。jquery-cookiebar 会在 cookiebar 元素上添加 "cookie-bar" 和 "cookie-bar-accepted" 类名以及其他一些类名，用户可以通过这些类名来指定样式。
设置 cookie
当用户同意之后，jquery-cookiebar 会设置一个 cookie。用户可以在初始化时设置 cookie 名称和其他相关属性：
-- -------------------- ---- ------- ---------------------------- - ------------- -------- ----- ------ ------------ ------------- ----- ----------- ----- ------------- ----- ----------- ------- ---- ---------- ---------------------- ------------ --- -- ----- -- - ---------- ------ -- ---- --------- ------- -------- -- ------- -------- ----------------- -- --- --------- ------ ------- ------ -- - --------- ---------------- ------ ----- -- --------- ------- ------- ---- -- --------- - ------- - --- ---展开代码
自定义回调函数
用户可以在用户同意之后执行自定义的回调函数：
-- -------------------- ---- ------- ---------------------------- - ------------- -------- ----- ------ ------------ ------------- ----- ----------- ----- ------------- ----- ----------- ------- ---- ---------- ---------------------- ----------------- ----- ----------- --- -- ----- -- - --------- ---------- - -------------------- ---------- - --- ---展开代码
示例代码
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- --------------- -- ----------------------- ---------- ----- ---------------- ----------------------------------------------------------- -- ------- ----------------------------------------------------------- ------- ------------------------------------------------------------------- ------- ------ -------- -- ------------ -------------------- --------------------- -------- ----------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
