Notification

Icone de notificação para o cartazeamento

by edgardleal

HTML

<br>
<div id="printAlert">
</div>
    <input name="produto" />

CSS

*{
    font-family : verdana, arial, sans-serif;
  
}


#p{
    width : 10px;
    height : 10px;
    margin-left : 70px;
    transform : rotate(45deg);
    top : -5px;    
    position : relative;
}
#cartazes{
    width : 150px;
    position : absolute;
    height : 190px;
    /*overflow : scroll;*/
    box-shadow : 3px 3px 3px;
}

JavaScript

$.widget("custom.notify", {
    options : {max : 4, icon : "ui-icon-print",
               left : "250px",
               click : null},
    _create : function(){
        var self = this;
      var html = 
    '<span id="alertCount" class="ui-corner-all">0</span>' +
    '<div id="cartazes" ' + 
    'class="ui-widget ui-state-default ui-corner-all" ' + 
    ' style="display:none"><div id="p" class="ui-state-default">' +
    '</div><ul></ul></div>';
        this.element.parent().append(html);        
        this.element
        .addClass("ui-widget ui-icon ui-icon-print ui-state-default")
        .addClass("ui-corner-all")
        .css({"position": "absolute",
              left : this.options.left})
        .width(20)
        .height(20)        
        .mouseenter(function(){
            $(this).addClass("ui-state-hover")
            .removeClass("ui-state-default");
            var c = $("#cartazes");
            if(c.css("display")==="none"){       
              c.fadeIn();
              if(c.position().left<$("#printAlert").position().left)
              c.position({my : "center top+10", 
                 at : "center bottom", of : "#printAlert"});    
    }

        }).click(function(){
            self.close();
        })
        .mouseleave(function(){        
                $(this).addClass("ui-state-default")
                .removeClass("ui-state-hover")
                .removeClass("ui-state-active");             
        })
        .mousedown(function(){
           $(this).addClass("ui-state-active");
        })
        .mouseup(function(){
           $(this).removeClass("ui-state-active");
        });
        
        $("#alertCount").css({background : "red",
                              color : "white",
                              width : "10px",
                              height: "10px",
                              "font-size" : "10px",
                              padding: "3px",
                              opacity : "0"
             ...