使用CSS的简单"New" 指示器

分享于 

6分钟阅读

Web开发

  繁體

Sample Image - CSSAnchor.gif

介绍

如果你曾经编写过消息板引擎,你可以能想让用户知道自从上次登录以来是否发布了新消息。 除了这些新帖子,你需要一个"新建"图像以便你的用户能够快速识别新消息。 理想情况下,一旦他们阅读了邮件或者回复,这个图像就会消失。

Background

实现这个结果的简单方法是简单地调用比X 天新的任何东西。 这就要求在后台( 了解每个用户已经阅读的邮件) 上没有每个用户登录。 然而,一旦用户读取新消息,他们就不再新的用户了,但"新建"icon 将继续显示。

在光谱的另一端,可以存储每个用户读取的消息,并在显示列表时使用该消息。 但是,这需要大量的工作在后端;对于"新建"icon的小结果太多了 !

使用代码

本文中的技术位于两个极端 上面的中间。 虽然它不是 100%精确的,但它也非常简单的实现。 它使用HTML锚点标记的默认行为 <>

关键是这个标记有两个伪类: a:linka:visited,意味着链接从未被访问过,并且最近已经访问过了。 可以在样式表中独立处理它们,如 below 所示,我创建了一个名为 MsgAnchor的广义类:

<style>.MsgAnchor { } 
.MsgAnchorA:visited 
{ 
 DISPLAY:none;} 
.MsgAnchorA:link 
{ 
 BACKGROUND-COLOR: LightGreen 
 TEXT-DECORATION:none;} </style>

现在,我可以在周围的元素上使用这个CSS类 <> 标记和用户浏览器将根据用户是否访问链接来确定要使用哪个伪类。

这是基本样式表information--nothing新的。 诀窍在于如何利用这些伪类构建消息列表。 我将提供一个简单的消息列表示例,用户首先查看主题列表并单击主题查看答复。 我试图使这个示例简单地演示文章的目的,而不是显示完全功能的消息板。 主页面从数据库中提取消息并将它们显示给用户。 下面是生成的生成的HTML:

<tableID="Table1"><tr><td><b>Topic</b></td><td><b>Date Submitted</b></td><td><b>Author</b></td></tr><tr><td><ahref="CSSSampleDetails.html?ID=1&NumReplies=4"> Building Robust ASP Pages</a><spanclass="MsgAnchor"><ahref="CSSSampleDetails.html?ID=1&NumReplies=4">New!</a></span></td><td>7/19 09:56AM</td><td>John Doe</td></tr><tr><td><ahref="CSSSampleDetails.html?ID=2&NumReplies=2"> Anyone seen this before?</a><spanclass="MsgAnchor"><ahref="CSSSampleDetails.html?ID=2&NumReplies=2">New!</a></span></td><td>7/19 08:50AM</td><td>Jimmy D.</td></tr><tr><td><ahref="CSSSampleDetails.html?ID=3&NumReplies=15"> Programming question...</a><spanclass="MsgAnchor"><ahref="CSSSampleDetails.html?ID=3&NumReplies=15">New!</a></span></td><td>7/18 08:50AM</td><td>Newbie L.</td></tr></table>

iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 <span> CSS类为 MsgAnchor的元素的锚点标记。 iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 HREF 标记标记包括对这里消息的回复数: <href="。csssampledetails。htmlID= 2 & NumReplies= 2">? 请注意, HREF 对于消息主题链接是完全相同的URL。

现在,当用户首先看到这个列表时,所有锚标记都将被取消访问,因此将使用 a:link 类。 如果使用前面显示的MsgAnchor 类,这意味着文本"新建"将显示为 LightGreen,没有文本修饰。

然后,用户单击其中一个消息链接以查看回复。 这将导致相应的链接成为"已经访问",浏览器将在下次查看页面时使用 a:visited 类。 返回到这里页面,它的浏览器使用 a:visited 类,该类具有 display:none。 这是隐藏"新建"文本的效果。

如果将新的回复添加到主题,则锚标记的URL将改变,从而使"新建"指示器回到可以见性。

Points of Interest

注意,该技术有几个缺点,如列出的below,但对于一个简单的解决方案,它可以。 你不希望在"新建"意味着新的意义的地方使用它。

这里技术的问题:

  • 如果用户清除它的历史记录,所有项目将再次变为"新建"。
  • 不同的浏览器可能定义"已经访问"不同,并且没有访问。
  • 如果用户在不同的计算机上查看页面,则访问的链接将不会跟随。

相关文章