Destac e caixa de notificação

by edgardleal

HTML

<div id="circle"></div>
<br><br>
<div id="button">Ok</div>
    <br><br>
 <div id="version">
     <span>1.0.0.7</span>
        </div>
        
        <table border="1">
            <thead>
                <tr>
                    <th>Data</th>
                    <th>Tipo</th>
                    <th>Valor</th>
                    <th>Status</th>                    
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>01/01/2012</td>
                    <td>A</td>
                    <td>15,22</td>
                    <td>X</td>                    
                </tr>
                <tr>
                    <td>01/05/2012</td>
                    <td>ZZZZ</td>
                    <td>1.500,62</td>
                    <td>Vendido</td>                    
                </tr>
                
            </tbody>
            
        </table>
        
 <div id="notification" class="ui-corner-all shadow">
     <div id="content" style="height:80%"></div>
     <div id="foot" style="height:18%">
         <span>Ok</span>
         
     </div>
 </div>

CSS

#circle{
    position : absolute;
    border-radius : 15px;
    border : 3px solid yellow;
    width : 5px;
    height : 5px;
    display : none;
}
#button{
    border : 1px solid;
    width : 250px;
}
#version span {
    margin-left : 50%;
}

#notification{
    z-index : 100;
  width : 250px;
    height : 100px;
    background : white;
    position : absolute;
    padding : 5px;
}
#notification span.ui-icon-triangle-1-n {
    position : relative;
    top : -10px;    
}
#notificaion span.ui-icon-close{
    float : right;
}
td{
  padding : 3px 5px 3px 5px;
}
.shadow{
    box-shadow :0 0  3px 3px #505050;
}
.arrow-left{
    width:10px;
    height:10px;
    position:absolute;
    display:none;
    overflow:hide;
    -webkit-transform:rotate(45deg);
    background: white;
}

JavaScript

function distac(element){
   if(!element) return false;
   if(element.css == undefined)   
       element = $(element);
    if(element.length==0)
        return false;
    var circle = $("#circle");
    circle.stop().css({opacity : 1, width : '5px', height : '5px'})
    .position({ my : 'center', at: 'center', of : element });
    circle.show();
    var x = circle.position().left;
    var y = circle.position().top;
    circle    
    .animate({width : "+20px", height : "+20px", opacity : "0",
              top : (y - 7 + 'px'), left :x - 8 + 'px'}, 1000, function(){
    
    });
}          
console.log(new Date().getTime());
if(new Date().getTime() < 1372863002283 + (86400000))
   distac($('#version span'));
$('#button').mousedown(function(e){
    $("#circle").css({ top : e.clientY - 5 + 'px', left : e.clientX - 7 + 'px',
                      opacity : 1, width : '5px', height : '5px'});
    $("#circle")
    .show()
    .animate({width : "+20px", height : "+20px", opacity : "0",
              top : (e.clientY - 10 + 'px'), left : e.clientX - 12 + 'px'}, 500,     function(){
    
    });
    return true;
});
$("#notification").find('span').button().click(function(){
    $("#notification").fadeOut();
});
var rect, rectUpper;
var rectString = "<div class='"  + 
    "arrow-left shadow'></div>";
var rectUpperString = 
    "<div style='z-index :102;" + 
    "' class='arrow-left'></div>";

function show(text , element){
    if(!rect){
        rect = $(rectString).appendTo('body');
        rectUpper = $(rectUpperString)
        .appendTo('body');
    }
    var arrows = $('.arrow-left').position({my : "top+3", at : "bottom", of : element});
    
    arrows.fadeIn(1000);
    $("#notification").position({my : "left-4", at : "right", of : rect})
    .find("#content").text(text);
}

show('Teste', $('td:first'));