Question

我有一个菜单选项，请假请求显示的菜单会显示通知，如果有任何通知，那么假设当员工提出请假时，只有一名员工提出请求，那么它应该显示1通知如果2名员工将提出请求然后它应该增加2，现在第二件事点击通知后它应该在jsp页面上显示第一人请假请求我完全糊涂了如何开始这个我刚开始的小事在这里是我的代码....请任何人帮助我，并建议我一些逻辑和想法..

  <style>

 .badge1 {
position:relative;
   }
    .badge1[data-badge]:after {
  content:attr(data-badge);
  position:absolute;
  top:-10px;
 right:-10px;
  font-size:.7em;
  background:green;
  color:white;
    width:18px;height:18px;
     text-align:center;
       line-height:18px;
     border-radius:50%;
   box-shadow:0 0 1px #333;
 }


</style>
 </head>
    <body>

      <br>
   <a href="" class="badge1" data-badge="27">Badge Notification Example</a>
   </body>
  </html>

Answer 1

请尝试下面的代码也许它会给你一个想法，我尝试做一个我在评论中描述的演示。请将jquery.min.js文件放在工作区中。

notification.html

<html>
        <head>
            <script src="jquery.min.js"></script>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
        <form method="POST">
            <a href="" id="notification"  class="badge" data-badge="0">Badge Notification Example</a>
            <input id="submit" value="Push" class="submit" onclick="push();"  type="button"></input>
            <input id="submit" value="Pop" class="submit" onclick="pop();"  type="button"></input>
        </form>
       </body>
    <script>
        function push(){
            var notification=$("#notification").attr("data-badge");
            var counter =parseInt(notification,10);
            if(counter>9){
                alert("Notification list is full!");
                return;     
            }
            counter=counter+1;      
            $("#notification").attr("data-badge",counter);
        }
        function pop(){
            var notification=$("#notification").attr("data-badge");
            var counter=parseInt(notification,10);
            if(counter<1){
                alert("list is empty!");
                return;     
            }
            counter=counter-1;
            $("#notification").attr("data-badge",counter);
        } 
    </script>
     </html>

的style.css

.badge{
    position:relative;
}
    .badge[data-badge]:after {
    content:attr(data-badge);
    position:absolute;
    top:-10px;
    right:-10px;
    font-size:.7em;
    background:green;
    color:white;
        width:18px;
    height:18px;
        text-align:center;
        line-height:18px;
        border-radius:50%;
    box-shadow:0 0 1px #333;
}
.submit{
    margin-top    : 20px;
        margin-right  : 10px;
        margin-bottom : 20px;
        margin-left   : 10px;
    font-size:100m;
    background:orange;
    color:green;
        width:150px;
    height:30px;
        text-align:center;          
}

如何在java中连接通知菜单和数据库

1 个答案: