Mudanças entre as edições de "Pagina de teste"
(.) |
|||
(283 revisões intermediárias por 5 usuários não estão sendo mostradas) | |||
Linha 1: | Linha 1: | ||
− | + | {| style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #99CCFF" align="center" | |
− | + | |- style="background-color:#FFFFFF" | |
− | + | | [[arquivo:BarraAzul.png|8px]] | |
− | + | | [[arquivo:informacoes.jpg|60px]] | |
− | + | | ''Através desta tela é possível consultar os dados cadastrais de planos e serviços, financeiros e de atendimento''. | |
− | + | |} | |
− | |- | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | | | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | {| style="border: 1px solid #99CCFF;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;background-color:#f4faff" align="center" | |
+ | |- style="background-color:#f4faff" | ||
+ | | [[arquivo:BarraAzul.png|8px]] | ||
+ | | [[arquivo:informacoes.jpg|60px]] | ||
+ | | ''Através desta tela é possível consultar os dados cadastrais de planos e serviços, financeiros e de atendimento''. | ||
+ | |} | ||
+ | |||
+ | |||
+ | {| style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #DDC12B" align="center" | ||
+ | |- style="background-color:#FFFFFF" | ||
+ | | [[arquivo:BarraAmarela.png|6px]] | ||
+ | | [[Arquivo:Lampada.png|40px]] | ||
+ | | ''Através desta tela é possível exibir notas importantes''. | ||
|} | |} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | | | + | |
− | + | {| style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #F27A13" align="center" | |
− | + | |- style="background-color:#FFFFFF" | |
− | + | | [[arquivo:BarraLaranja.png|6px]] | |
− | + | | [[Arquivo:Cadeado.png|40px]] | |
− | + | | '' Através desta tela é possível informar telas bloqueadas''. | |
− | |||
− | |||
− | |||
− | |- | ||
− | |||
− | |||
− | |||
− | |||
− | | | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
|} | |} | ||
+ | |||
+ | |||
+ | {| style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #A5030E" align="center" | ||
+ | |- style="background-color:#FFFFFF" | ||
+ | | [[arquivo:BarraVermelha.png|6px]] | ||
+ | | [[Arquivo:AlertaVermelha.png|40px]] | ||
+ | | '' Através desta tela é possível exibir alertas na página''. | ||
|} | |} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |- | + | {| style="border-collapse: collapse; border-width: 1px; border-style: solid; border-color: #6BB25A" align="center" |
− | | | + | |- style="background-color:#FFFFFF" |
− | | | + | | [[arquivo:BarraVerde.png|6px]] |
− | | | + | | [[Arquivo:Regras.png|60px]] |
+ | | ''Através desta tela é possível exibir regras na página''. | ||
|} | |} | ||
− | |||
− | |||
− | |||
+ | <html> | ||
+ | <head> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> | ||
+ | <style type="text/css"> | ||
+ | #bubble_tooltip{ | ||
+ | width:147px; | ||
+ | position:absolute; | ||
+ | display:none; | ||
+ | } | ||
+ | #bubble_tooltip .bubble_top{ | ||
+ | background-image: url("http://wiki.elitesoft.com.br/images/8/85/Bubble_top.gif"); | ||
+ | background-repeat:no-repeat; | ||
+ | height:16px; | ||
+ | } | ||
+ | #bubble_tooltip .bubble_middle{ | ||
+ | background-image: url("http://wiki.elitesoft.com.br/images/7/7f/Bubble_middle.gif"); | ||
+ | background-repeat:repeat-y; | ||
+ | background-position:bottom left; | ||
+ | padding: 18px 18px 68px 18px; | ||
+ | top: -150px; | ||
+ | left: 10px; | ||
+ | |||
+ | |||
+ | } | ||
+ | #bubble_tooltip .bubble_middle span{ | ||
+ | position:relative; | ||
+ | top:-8px; | ||
+ | font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; | ||
+ | font-size:11px; | ||
+ | } | ||
+ | #bubble_tooltip .bubble_bottom{ | ||
+ | background-image: url("http://wiki.elitesoft.com.br/images/3/33/Bubble_bottom.gif"); | ||
+ | background-repeat:no-repeat; | ||
+ | background-repeat:no-repeat; | ||
+ | height:44px; | ||
+ | position:relative; | ||
+ | top:-6px; | ||
+ | } | ||
+ | </style> | ||
+ | <link rel="stylesheet" href="css/tooltip.css" media="screen"> | ||
+ | <script type="text/javascript"> | ||
+ | function showToolTip(e,text){ | ||
+ | if(document.all)e = event; | ||
+ | |||
+ | var obj = document.getElementById('bubble_tooltip'); | ||
+ | var obj2 = document.getElementById('bubble_tooltip_content'); | ||
+ | obj2.innerHTML = text; | ||
+ | obj.style.display = 'block'; | ||
+ | var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); | ||
+ | if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; | ||
+ | /*var leftPos = e.clientX - 100;*/ | ||
+ | var leftPos = 30 | ||
+ | if(leftPos<0)leftPos = 0; | ||
+ | obj.style.left = leftPos + 'px'; | ||
+ | obj.style.top = 70 + 'px' | ||
+ | /*obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';*/ | ||
+ | } | ||
+ | |||
+ | function hideToolTip() | ||
+ | { | ||
+ | document.getElementById('bubble_tooltip').style.display = 'none'; | ||
+ | |||
+ | } | ||
+ | </script> | ||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <div id="bubble_tooltip"> | ||
+ | <div class="bubble_top"><span></span></div> | ||
+ | <div class="bubble_middle"><span id="bubble_tooltip_content"></span></div> | ||
+ | <div class="bubble_bottom"></div> | ||
</div> | </div> | ||
− | < | + | <h1>Dica em formato de balão</h1> |
− | + | <p>Esta demonstração mostra como trabalhar com dicas em formato de balão semelhantes ao do Windows.</p> | |
− | <! | + | <p><a href="#" onmouseover="showToolTip(event,'Este é apenas\ um exemplo!');return false" onmouseout="hideToolTip()">Passe o mouse aqui.</a> para ver a ação.</p> |
− | |||
− | + | <img src="http://wiki.elitesoft.com.br/images/4/4f/Smile1.png" onmouseout="this.src='http://wiki.elitesoft.com.br/images/4/4f/Smile1.png';hideToolTip()" onmouseover="this.src='http://wiki.elitesoft.com.br/images/3/33/Smile2.png';showToolTip(event,'Este é apenas\ um exemplo!');return false" |
Edição atual tal como às 15h54min de 9 de fevereiro de 2023
Através desta tela é possível consultar os dados cadastrais de planos e serviços, financeiros e de atendimento. |
Através desta tela é possível consultar os dados cadastrais de planos e serviços, financeiros e de atendimento. |
Através desta tela é possível exibir notas importantes. |
Através desta tela é possível informar telas bloqueadas. |
Através desta tela é possível exibir alertas na página. |
Através desta tela é possível exibir regras na página. |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">
- bubble_tooltip{
width:147px; position:absolute; display:none; }
- bubble_tooltip .bubble_top{
background-image: url("http://wiki.elitesoft.com.br/images/8/85/Bubble_top.gif"); background-repeat:no-repeat; height:16px; }
- bubble_tooltip .bubble_middle{
background-image: url("http://wiki.elitesoft.com.br/images/7/7f/Bubble_middle.gif"); background-repeat:repeat-y; background-position:bottom left; padding: 18px 18px 68px 18px; top: -150px; left: 10px;
}
- bubble_tooltip .bubble_middle span{
position:relative; top:-8px; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; font-size:11px; }
- bubble_tooltip .bubble_bottom{
background-image: url("http://wiki.elitesoft.com.br/images/3/33/Bubble_bottom.gif"); background-repeat:no-repeat; background-repeat:no-repeat; height:44px; position:relative; top:-6px; } </style> <link rel="stylesheet" href="css/tooltip.css" media="screen"> <script type="text/javascript"> function showToolTip(e,text){ if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip'); var obj2 = document.getElementById('bubble_tooltip_content'); obj2.innerHTML = text; obj.style.display = 'block'; var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop); if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; /*var leftPos = e.clientX - 100;*/ var leftPos = 30 if(leftPos<0)leftPos = 0; obj.style.left = leftPos + 'px'; obj.style.top = 70 + 'px' /*obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';*/ }
function hideToolTip() { document.getElementById('bubble_tooltip').style.display = 'none';
} </script>
</head> <body>
Dica em formato de balão
Esta demonstração mostra como trabalhar com dicas em formato de balão semelhantes ao do Windows.
<a href="#" onmouseover="showToolTip(event,'Este é apenas\ um exemplo!');return false" onmouseout="hideToolTip()">Passe o mouse aqui.</a> para ver a ação.
<img src="http://wiki.elitesoft.com.br/images/4/4f/Smile1.png" onmouseout="this.src='http://wiki.elitesoft.com.br/images/4/4f/Smile1.png';hideToolTip()" onmouseover="this.src='http://wiki.elitesoft.com.br/images/3/33/Smile2.png';showToolTip(event,'Este é apenas\ um exemplo!');return false"