rrssb / rrssb-plus
极其响应式的社交分享按钮增强版
0.5.5
2023-05-19 11:44 UTC
README
这是一种可以插入任何网站中的社交分享按钮,具有吸引人的基于SVG的图标、小巧的下载量和浏览器兼容性。RRSSB+可以通过调整大小、平均分布按钮到多行和隐藏标签来自动适应不同的屏幕尺寸。
该库为所有网站提供一致风格的按钮。没有第三方脚本(如来自Facebook的脚本),以及固有的开销和不同的按钮设计。
由AlbanyWeb开发。基于RRSSB "Ridiculously Responsive Social Sharing Buttons" 由KNI。
安装说明
如果您使用Drupal CMS,则可以通过模块自动安装此库——请参阅演示。如果您使用Backdrop CMS,则可以通过项目安装程序界面安装模块,该模块包含此库。
否则,您可以检查演示页面的源代码以了解如何进行操作。搜索<div class="rrssb">以找到按钮的HTML。您需要加载rrssb.min.js和rrssb.css。要配置此库,请调用rrssbConfigAll。
与RRSSB的主要变化
- 允许按钮拆分到多行,确保行保持均匀。
- 按钮大小自动保持可使用和清晰。一般来说,我们不想在大型屏幕上使用巨大的按钮或在小型屏幕上使用微小的按钮,这您可以通过RRSSB实现。RRSSB+提供可配置的默认大小和可配置的允许缩小的百分比。
- 图标和文本周围的空白在所有尺寸上都是一致的。在RRSSB中,间距随按钮大小变化。在“正常宽度”下,空间很大,因此字体和图标较小,难以阅读。屏幕变大后,您会看到“大格式”,它不同——我们认为这是一个更好的平衡。默认情况下,RRSSB类似于大格式,但图标略大。
- 同时应用于所有按钮的统一响应性。相比之下,RRSSB 是逐个隐藏标签。这不是我们在主流网站上熟悉的方法,我们认为这看起来很奇怪,就像有bug一样。
- 支持按钮前缀文本,例如“分享此页面”。RRSSB 演示页面有类似的文本,尽管它不是响应式的,而且被硬编码到页面中,而不是作为库的一部分。
- 可配置设置以控制外观。
性能变化
- 使用背景图像而不是内联SVG。这可以减小页面大小,减少服务器负载和缓存大小。
- 更小的JS和CSS文件,以便更快地下载。
- 更简单的脚本执行更少的代码行,以便更平滑地调整大小。
- 减少DOM大小:将工作数据存储为data()而不是attr()。