Javascript/jQuery 图例小部件
是否有一个 JS/jQuery 小部件可以让我显示一个简单的图例，其中包含例如一个小的彩色矩形和旁边的文本标签？
在这种特定情况下，图例将显示内联 jQuery UI 日期选择器小部件中不同颜色代码背后的含义，该小部件将被自定义以允许用户进行多种选择并在特定日期显示不同的颜色。
事实上，我需要的东西看起来与本页页脚处的 SO 站点列表完全相同（但理想情况下垂直列在选择器旁边）。因此，如果没有现成的解决方案，我想我会尝试查看此页面源代码。
Is there a JS/jQuery widget that would allow me to display a simple legend that contains for example a small colored rectanlge and a text label next to it?
In this specific case the legend would show meanings behind different color codes in an inline jQuery UI datepicker widget, which would be customized to enable multiple selections by a user and showing different colors for specific days.
In fact, the thing that I need would look exactly like the list of SO sites at the footer of this page (but ideally listed vertically next to the picker). So if there is no ready-made solution I guess I'll try and look at this page source.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你必须把它交给 StackOverflow 工作人员。他们创造传奇的方法非常聪明。基本上，他们使用字符 ■ (ASCII 254) 来代替任何图像或 div。他们将其插入到一个跨度中，该跨度使用字体大小和颜色属性进行样式设置。它旁边是一个样式化的锚标记。冲洗并重复。
它特别聪明的地方在于，它全部都内嵌在 div 中并在基线上对齐！让我再说一遍：它在基线上对齐！因此，图像偏移等方面没有差异。向让事情变得如此简单的 UI 工程师致敬。感谢您让我注意到这一点，否则我可能永远不会去寻找和学习。
编辑：ASCII 254 不正确。
"■".charCodeAt(0)生成的实际值是 9632，可能是某种 Unicode 风格。相同的外观和形状，但价值不同。You have to hand it to the StackOverflow crew. Their method for creating the legends is pretty clever. Basically, they use the character ■ (ASCII 254) in place of any image or div. They insert it in a span, which is styled with a font size and color property. Next to it is a styled anchor tag. Rinse and repeat.
What is particularly clever about it is that it all fits inline in a div and lines up on the baseline! Let me say that again: it lines up on the baseline! So there is no disparity in image offsets, etc. A tip of the hat to the UI engineer who made it that simple. Thanks for calling my attention to that, or I probably never would have looked and learned.
EDIT: ASCII 254 is incorrect. The actual value yielded by
"■".charCodeAt(0)is 9632 and is probably some flavor of Unicode. Same look and shape, but different value.