javascript - Javascript/jQuery 图例小部件

Question

是否有一个 JS/jQuery 小部件可以让我显示一个简单的图例，其中包含例如一个小的彩色矩形和旁边的文本标签？

在这种特定情况下，图例将显示内联 jQuery UI 日期选择器小部件中不同颜色代码背后的含义，该小部件将被定制为允许用户进行多项选择并在特定日期显示不同颜色。

事实上，我需要的东西看起来与此页面页脚处的 SO 站点列表完全相同（但理想情况下，垂直列在选择器旁边）。因此，如果没有现成的解决方案，我想我会尝试查看此页面源。

Answer 1

你必须把它交给 StackOverflow 的工作人员。他们创造传奇的方法非常聪明。基本上，他们使用字符■ (ASCII 254) 代替任何图像或 div。他们将其插入到一个跨度中，该跨度具有字体大小和颜色属性。旁边是一个样式化的锚标记。冲洗并重复。

它特别聪明的是它都适合内联在 div 中并在基线上排列！让我再说一遍：它在基线上排列！因此，图像偏移等方面没有差异。向 UI 工程师致敬，让事情变得如此简单。感谢您提醒我注意这一点，否则我可能永远不会去看和学习。

编辑：ASCII 254 不正确。产生的实际值"■".charCodeAt(0)是 9632，可能是某种 Unicode 风格。相同的外观和形状，但不同的价值。