Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Israel Elias

como simplificar o $('#id').focus();

Por , em Javascript

Recommended Posts

Israel Elias    8

Israel Elias
Postado

Fala galera tudo otimo?

 

e o seguinte to fazendo um tooltips!

só que tipo eu tive que fazer campos(input) diferentes e div='tooltips' diferentes para cada focu que eu desse apareçesse somente uma caixa tooltips e não todas,

se eu deixasse tudo igual iria apareçer todas as caixa tooptips

 

Exemplo 1(todos os input e div='tooltips' diferentes)

<html>
<head>
<title>Dica de Contexto </title>

<style type="text/css">
 *{margin:0;padding:0;}
 .formata { /* esta classe é somente 
              para formatar a fonte */
 font: 12px arial, verdana, helvetica, sans-serif; 
 }
 ul{margin-left:300px;margin-top:50px;float:left;background-color:#00FF66;width:300px;}
 ul li{margin-bottom:10px;}
 .dcontexto{list-style:none;
 position:relative; 
 font:12px arial, verdana, helvetica, sans-serif; 
 padding:0;
 color:#039;
 text-decoration:none;
 }
 .tooltips{display: none;z-index:9999999;}
</style>

</head>
<body>
    <ul>
          <li class="dcontexto">
                   <input type="text" id="text1" />
                   <div class="tooltips tooltips1">
                               <strong>Campo text 1</strong>
                               <br />bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                   </div>
          </li>

          <li class="dcontexto">
                   <input type="text" id="text2" />
                   <div class="tooltips tooltips2">
                               <strong>Campo text 2</strong>
                               <br />bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                   </div>
          </li>

          <li class="dcontexto">
                   <input type="text" id="text3" />
                   <div class="tooltips tooltips3">
                               <strong>Campo text 3</strong>
                               <br />bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                   </div>
          </li>
    </ul>

</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script><!-- jquery -->
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
                 $('#text1').focus(function(){
					 $('.tooltips1').css({
					 display:'block',position:'absolute',width:'230px',top:'0',left:'-260px',rightAlign:'justify',font: '12px arial, verdana, helvetica, sans-serif',padding:'5px 10px',border:'1px solid #999',background:'#e0ffff',color:'#000'});
                 }); 
                 $('#text2').focus(function(){
					 $('.tooltips2').css({
					 display:'block',position:'absolute',width:'230px',top:'0',left:'-260px',rightAlign:'justify',font: '12px arial, verdana, helvetica, sans-serif',padding:'5px 10px',border:'1px solid #999',background:'#e0ffff',color:'#000'});
                 }); 
                 $('#text3').focus(function(){
					 $('.tooltips3').css({
					 display:'block',position:'absolute',width:'230px',top:'0',left:'-260px',rightAlign:'justify',font: '12px arial, verdana, helvetica, sans-serif',padding:'5px 10px',border:'1px solid #999',background:'#e0ffff',color:'#000'});
                 }); 



                 $('input').focusout(function(){
                        $('.tooltips').css({display: 'none'});
                 }); 
       });
</script>
</body>
</html>

 

Exemplo 2(input e div='tooltips' iguais)

<html>
<head>
<title>Dica de Contexto </title>

<style type="text/css">
 *{margin:0;padding:0;}
 .formata { /* esta classe é somente 
              para formatar a fonte */
 font: 12px arial, verdana, helvetica, sans-serif; 
 }
 ul{margin-left:300px;margin-top:50px;float:left;background-color:#00FF66;width:300px;}
 ul li{margin-bottom:10px;}
 .dcontexto{list-style:none;
 position:relative; 
 font:12px arial, verdana, helvetica, sans-serif; 
 padding:0;
 color:#039;
 text-decoration:none;
 }
 .tooltips{display: none;}
</style>

</head>
<body>
    <ul>
          <li class="dcontexto">
                   <input type="text" />
                   <div class="tooltips">
                               <strong>Campo text 1</strong>
                               <br />bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                   </div>
          </li>

          <li class="dcontexto">
                   <input type="text" />
                   <div class="tooltips">
                               <strong>Campo text 2</strong>
                               <br />bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                   </div>
          </li>

          <li class="dcontexto">
                   <input type="text"  />
                   <div class="tooltips">
                               <strong>Campo text 3</strong>
                               <br />bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
                   </div>
          </li>
    </ul>

</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script><!-- jquery -->
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
                 $('input').focus(function(){
					 $('.tooltips').css({
					 display:'block',position:'absolute',width:'230px',top:'0',left:'-260px',rightAlign:'justify',font: '12px arial, verdana, helvetica, sans-serif',padding:'5px 10px',border:'1px solid #999',background:'#e0ffff',color:'#000'});
                 }); 

                 $('input').focusout(function(){
                        $('.tooltips').css({display: 'none'});
                 }); 
       });
</script>
</body>
</html>

 

No exemplo 2 como fazer quando de o focu no input só apareça a caixa dele e não de todas as div????

Compartilhar este post

Link para o post
Compartilhar em outros sites

mexicanox    7

mexicanox
Postado

Seguinte, tenta o .next(), ou alguma variação dele, ficaria algo do tipo

 


$('input').focus(function(){
$(this).next('.tooltips').css({
                                                display:'block',position:'absolute',width:'230px',top:'0',left:'-260px',rightAlign:'justify',font: '12px arial, verdana, helvetica, sans-serif',padding:'5px 10px',border:'1px solid #999',background:'#e0ffff',color:'#000'});
                 });

 

Não testei mas acredito que ja é um começo.

 

 

 

 

flws

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito