如何在网页上的按钮上添加一个小的高亮图标,以显示有新的更新内容?

huangapple go评论76阅读模式
英文:

How to have a tiny highlighted icon on my button in a web page to show new updates are present?

问题

我目前制作了一个Java Web应用程序。它有一个服务器(MyServer)和客户端(网页)。客户端向MyServer发出请求以获取一些信息。现在,MyServer会向Confluence API服务器发出请求,以从我们Confluence空间中的最新Confluence页面获取信息。

当我们在客户端网页上点击“What's New”按钮时,Confluence空间中的最新页面会显示在“What's New”网络小部件中。用户可以点击“What's New”按钮,最新的Confluence页面将显示出来。

现在我想做的是:

  1. 每当有新的更新(无论是同一Confluence页面的更改还是创建了新的Confluence页面)时,“What's New”按钮上会显示一个小亮点图标(请参见所附的示例所需图片-另外,就像在任何聊天应用程序中一样{如WhatsApp,FbMessenger等,当收到新消息时})。
  2. 一旦我的特定用户看到了新的更新,那个小亮点图标就会消失,适用于该特定用户。
  3. 对于首次登录的所有用户,如果他们还没有打开新的更新,那么小亮点图标应该显示出来。如果用户1打开它-小亮点图标就会消失,而“What's New”按钮应恢复为普通的非亮点按钮。但是,如果用户2还没有打开它,这个小亮点图标应该保持显示。
  4. 然后,如果我们在Confluence页面中进行新的更改,并且用户1尚未看到此新的更新-那么用户1的小亮点图标应该再次显示。

我应该如何着手处理?感谢您的帮助。

英文:

I have currently made a Java web application. It has a server(MyServer) and the client side(the webpage). The client makes request to MyServer to get some information. MyServer now makes request to Confluence API server to get information from our latest Confluence page in our Confluence space.

When we click on "What's New" button (in our client -website) - the latest page in our Confluence space shows in the What's New web widget. The user can click on the What's New button and the most latest page from the Confluence page shows up.

What I would like to do now is-

  1. Every time a new update is made, (either changes in the same Confluence page/or new Confluence page is created), a little highlighted icon shows on my "What's New" button. (Please find the sample required picture attached - also, like in any chat applications {Whats app, FbMessanger etc when a new message is received}).
  2. Once my particular user sees that new update that tiny highlighted icon goes away for that particular user.
  3. The tiny highlighted icon should show for all the logged-in users for the first time if they have not opened the new update yet. If user1 opens it - the tiny highlighted icon should go away for that user1 (and the "What's New" button should become a normal non-higlighted button) But, this tiny highlighted icon should stay for user2 if they have not opened it.
  4. Then if we make a new change in our Confluence page and user1 has not seen this new update yet - the tiny highlighted icon should show again for user1.

How should I go about it? Thank you for your help.
如何在网页上的按钮上添加一个小的高亮图标,以显示有新的更新内容?

答案1

得分: 1

关于解决你的问题的通用解决方案,

  1. 你需要实现 WebSockets 来从后端获取实时聊天类似的通知。

  2. 你可以编写 JavaScript 代码来定位一个元素,例如在这种情况下是你的通知图标。
    假设它的 ID 是 #notifIcon

    隐藏操作

    document.getElementbyId('notifIcon').style.display = 'none'

    显示操作

    document.getElementbyId('notifIcon').style.display = 'block'

  3. 为了保持用户特定,你可以从数据库模式中获取数据并相应地进行更新。

  4. 再次通过 WebSockets 更新你的数据。

英文:

About the generic solution to your problems,

  1. You need to implement websockets to get the realtime chat like notification from back-end

  2. You can write a JavaScript code to target an element, in this case your notification icon.
    Consider the it's ID is #notifIcon

    to hide

    document.getElementbyId('notifIcon').style.display = 'none'
    

    to show

    document.getElementbyId('notifIcon').style.display = 'block'
    
  3. To keep it user specific, you can take data from database schema and update accordingly

  4. Again update your data with websockets

huangapple
  • 本文由 发表于 2020年9月2日 23:04:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/63708320.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定