用户中心添加优质服务链接入口按钮-记录

在用户中心界面中添加一个优质服务链接入口按钮，以此提升用户获取优质服务信息的便捷性。󠄐󠄹󠅀󠄪󠄣󠄞󠄡󠄥󠄞󠄢󠄢󠄩󠄞󠄡󠄥󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄤󠄣󠄧󠄣󠄡󠄥󠄡󠄥󠄬󠅒󠅢󠄟󠄮󠇕󠆬󠅰󠇕󠆯󠅳󠇕󠆞󠆍󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮

完整js代码

各部分功能与作用

1. $(function() { ... });
   这个结构确保代码在页面的 DOM 完全加载后执行，确保插入的元素能够被正确识别并显示。
2. $('.col-sm-3 .sidebar-user').prepend(...)
   该语句选择页面上具有 .col-sm-3 .sidebar-user 的元素，并在其开头插入内容。这里的内容是一个 HTML 结构，包括容器、标题和按钮集合。
3. <div class="zib-widget padding-6">...</div>
   这是插入的“扩展中心”小部件的外部容器，包含了整个按钮组件。padding-6 是用于添加内部间距的类。
4. <div class="padding-6 ml3">扩展中心</div>
   这是“扩展中心”的标题部分，通过类名 padding-6 和 ml3 控制样式和对齐。
5. 样式部分
   在内嵌的 <style> 标签中定义了按钮的样式：
   • .zyx-item：控制按钮的宽度、最小和最大宽度、间距以及光标样式。
   • .icon：定义图标的大小、对齐方式和颜色填充，确保图标在按钮中正确显示。
6. 按钮元素部分
   每个按钮是一个 <a> 链接，具有 .zyx-item 类，用于设置样式和行为：
   • 签到奖励按钮
     • 链接的 href="javascript:;" 使其默认无跳转行为。
     • data-remote 和 data-toggle 属性用于指定点击后的 Ajax 弹窗请求，加载指定链接的内容。
     • 内部结构包含了图标和文字描述区域。
   • 美化教程、云服务器和站长博客按钮
     • 各按钮指向特定页面或链接，内部包含图标和文字描述，分别代表不同的外部功能或资源。

核心功能概述

• 动态插入“扩展中心”小部件：通过 prepend() 函数插入新内容，确保该小部件在页面加载完成后自动出现。
• 自定义图标和按钮样式：内嵌的样式确保按钮的排版整齐、尺寸自适应，图标显示清晰。
• Ajax 弹窗功能：通过 data-remote 和 data-toggle 使“签到奖励”按钮点击后动态加载内容，而不跳转页面。