Criando um menu drop down com jQuery e 3 linhas!

14/05/2009

Olá pessoal,

semana passada lecionei um curso sobre XHTML, CSS e JavaScript na faculdade para o pessoal do primeiro ano. Como eles não sabem programar ainda, resolvi passar um pouco de jQuery ocultando assim muita lógica.

A primeira parte é o XHTML:

TEXTO PURO
HTML:
  1. <p id="menu">
  2. <h3>Navegue pelas lojas:</h3>
  4.     <li>
  5. <h4>Livros e Papelaria:</h4>
  7.     <li><a href="#">Livros</a></li>
  8.     <li><a href="#">Livros Importados</a></li>
  9.     <li><a href="#">Papelaria</a></li>
  10. </ul>
  11. </li>
  12.     <li>
  13. <h4>CDS, DVDs e Games:</h4>
  15.     <li><a href="#">Livros</a></li>
  16.     <li><a href="#">Livros Importados</a></li>
  17.     <li><a href="#">Papelaria</a></li>
  18. </ul>
  19. </li>
  20. </ul>

O CSS:

TEXTO PURO
CSS:
  1. <pre>#menu&gt; ul{
  2.   margin: 40px 0 0 10px;
  3.   background: #FFFFFF;
  4.   width: 150px;
  5.   padding: 0;
  6. }
  7. /* mostrando o cursor do mouse como pointeiro */</pre>
  8. <pre>#menu h4{
  9.   cursor: pointer;
  10. }
  11. /* ocultando o menu */
  12. #menu ul li ul{
  13.   display: none;
  14. }</pre>

E o código JS em jQuery:

TEXTO PURO
JAVASCRIPT:
  1. $(function(){
  2. $("#menu&gt; ul&gt; li&gt; h4").click(function(){
  3. $(this).parent().find("ul").toggle("slow");
  4. });
  5. });

Simples né?
Qualquer dúvida comentem! Forte abraço!

Comentários (13)

Vídeo Tutorial: JavaScript Objeto Literal e jQuery - organizando seus JS’s

05/02/2008

Olá pessoal,

este vídeo tutorial aborda de uma maneira rápida o uso de Objetos Literais em JavaScript, neste caso juntamente com jQuery.

Queria agradecer ao grande amigo Edy Segura pelos exemplos de Objetos Literais, que me ajudaram bastante.

Assistir agora!

Até a próxima pessoal, qualquer dúvida ou sugestão, comentem!

Comentários (13)

jQuery - image replacement com 4 linhas

14/01/2008

Olá pessoal,

precisei usar image replacement em um projeto, mas um IR dinâmico. Resolvi então implementar um em jQuery.

TEXTO PURO
HTML:
  1. <h2 class="ir">Titulo</h2>
  2. <a href="http://www.tuliofaria.net" class="ir">Tulio</a>

TEXTO PURO
JAVASCRIPT:
  1. $(function(){
  2. $(".ir").each(function(){
  3. t = $(this).text();
  4. $(this).text("");
  5. $(this).append('<img src="geradordaimagem.php?texto='+escape(t)+'" alt="'+t+'" border="0" />');
  6. });
  7. });

O script PHP para a geração dos títulos pode ser conseguido em: http://www.alistapart.com/articles/dynatext , aliás, no neste post no ALA tem também o JS (não jQuery, rs) de como se fazer o mesmo.

Prefiro o meu, que basta colocar a classe ir, ou qualquer outra (configurando o script) e mandar substituir.

Abraços pessoal e até a próxima!

Comentários (8)

jQuery - FloatNumber Plugin

27/12/2007

Olá pessoal,

criei um plugin pro jQuery para adicionar a possibilidade de formatar números como float de um input text logo após a digitação do mesmo. Pode ser usado com a máscara de entrada numeric de Sam Collet.

jquery.numeric.js (by Sam Collet)

jquery.floatnumber.js

Exemplo (Example)

Uso (Usage):

TEXTO PURO
JAVASCRIPT:
  1. $(function(){
  2. // using numeric mask by Sam Collett (http://www.texotela.co.uk)
  3. $(".numeric").numeric(",");
  4. // floatnumber(separator, precision);
  5. $(".numeric").floatnumber(",",2);
  6. });

Bugs, críticas ou sugestões, comentem!

Comentários (9)

jQuery tabs - abas simples e leve

01/12/2007

Olá pessoal,

nessa semana precisei fazer as famosas abas. Nada melhor que procurar um plugin pronto para jQuery. E não foi que eu encontrei. Mas só tem um problema: eu queria algo leve! A saída? Fazer a minha própria implementação, mais simples e pra minha situação mais eficiente.

O HTML ficou assim:

TEXTO PURO
HTML:
  1. <!-- a lista de abas -->
  2.  
  3.     <ul id="abas">
  4.                 <li><a href="#tab1">Aba 1</a></li>
  5.                 <li><a href="#tab2">Aba 2</a></li>
  6.     </ul>
  7.  
  8. <!-- conteudo das abas -->
  9.     <div id="tab1" class="contaba">
  10.     <a name="tab1" />
  11.        Conteudo 1
  12.     </div>
  13.     <div id="tab2" class="contaba">
  14.     <a name="tab1" />
  15.        Conteudo 2
  16.     </div>

O código usando jQuery, somente isso:

TEXTO PURO
JAVASCRIPT:
  1. $(function(){
  2. // abas
  3. // oculta todas as abas
  4. $("div.contaba").hide();
  5. // mostra somente  a primeira aba
  6. $("div.contaba:first").show();
  7. // seta a primeira aba como selecionada (na lista de abas)
  8. $("#abas a:first").addClass("selected");
  9.  
  10. // quando clicar no link de uma aba
  11. $("#abas a").click(function(){
  12. // oculta todas as abas
  13. $("div.contaba").hide();
  14. // tira a seleção da aba atual
  15. $("#abas a").removeClass("selected");
  16.  
  17. // adiciona a classe selected na selecionada atualmente
  18. $(this).addClass("selected");
  19. // mostra a aba clicada
  20. $($(this).attr("href")).show();
  21. // pra nao ir para o link
  22. return false;
  23. });

Com isso economizei alguns kb's deixando de usar o plugin :)

Abraços pessoal e até a próxima!

Comentários (21)

JAX - jQuery Ajax Helper for CakePHP

28/09/2007

Olá pessoal,

intediado com o helper do cake que trabalha com prototype? Eu também...

Então resolvi criar (inicialmente para uso próprio) o JAX - jQuery Ajax Helper. Que funciona de forma bem semelhante ao helper nativo do cake, mas com algumas melhorias...

O código pode ser visto abaixo: (e baixado aqui)

TEXTO PURO
PHP:
  1. /*
  3. JAXHelper - CakePHP Helper for Ajax with jQuery
  4. Author: Tulio Faria (www.tuliofaria.net)
  6. Requeriments:
  7. - jquery: http://docs.jquery.com/Downloading_jQuery
  8. - jform (for some features like observeForm): http://jquery.com/plugins/project/form
  10. Using:
  11. - include jquery.js and jquery.form.js in your view (yes, using plain html or html helper :) )
  13. - include the helper Jax in your controller
  14. - call any of methods available: link, observeField and observeForm
  16. */
  17.  
  18. class JaxHelper extends Helper {
  19.  
  20. var $helpers = array("Html");
  21.  
  22. function link($text, $url, $target, $options = null, $loading = null){
  23. $aId = 'link' . intval(rand());
  24. $url = $this->Html->url($url);
  25. $att = " ";
  26.  
  27. if (is_array($options)){
  28.  
  29. foreach($options as $k=>$v){
  30. $att.=$k.'="'.$v.'" ';
  31. }
  32.  
  33. }
  34.  
  35. echo "<a id="\" href="http://www.tuliofaria.net/%5C%22$url%5C%22">$text</a>";
  36. echo $this->_jsBlock("\$(\"#$aId\").click( function(){  \$.post(\"$url\", function(data){
  38. \$(\"$target\").html(data); }); return false; }); ");
  39. }
  40. function observeField($element, $options){
  41. $event = $options["event"];
  42. $update = $options["update"];
  43. $url = $this->Html->url($options["url"]);
  44.  
  45. $code = $options["loading"].'
  46. $.ajax({
  47. type: "POST",
  48. url: "'.$url.'",
  49. data: $("'.$element.'").serialize(),
  50. success: function(data){
  51. $("'.$update.'").html(data);
  52. '.$options["complete"].'
  53. }
  54. });
  55. ';
  56.  
  57. return $this->_jsBlock($this->_addReady("\$(\"$element\").$event(function(){ $code })"));
  58. }
  59.  
  60. function observeForm($element, $options){
  61. $event = $options["event"];
  62. $update = $options["update"];
  63. $url = $this->Html->url($options["url"]);
  64.  
  65. $code = '$("'.$element.'").ajaxSubmit({
  66. target:        \''.$update.'\',
  67. beforeSubmit:  function(){'.$options["loading"].'},
  68. success:       function(){'.$options["complete"].'}
  69. }
  70. );';
  71.  
  72. return $this->_jsBlock($this->_addReady("\$(\"$element\").$event(function(){ $code return false; })"));
  73. }
  74.  
  75. function _jsBlock($content){
  76. return "<script type="\">$content</script>";
  77. }
  78. function _addReady($content){
  79. return "\$(function(){ $content } );";
  80. }
  81.  
  82. function test(){
  83. echo $this->_jsBlock($this->_addReady("alert(\"Jax Helper has been installed and ready to use!\");"));
  84. }
  85. }
  86. ?>

Exemplos:

Link:

TEXTO PURO
PHP:
  1. link("Click Here!", "/contatos/info/1/", "teste", "teste"); ?>

Observe field:

TEXTO PURO
PHP:
  1. $options["event"] = "change";
  2. $options["update"] = "#teste";
  3. $options["url"] = "/contatos/info/1/";
  4. $options["loading"] = "$('#loading').fadeIn('slow');$('#teste').hide();";
  5. $options["complete"] = "$('#teste').fadeIn('slow');$('#loading').fadeOut();";
  6. echo $jax->observeField("#texto", $options); ?>

ObserveForm:

TEXTO PURO
PHP:
  1. $options["event"] = "submit";
  2. $options["update"] = "#teste";
  3. $options["url"] = "/contatos/info/1/";
  4. $options["loading"] = "$('#loading').fadeIn('slow');$('#teste').hide();";
  5. $options["complete"] = "$('#teste').fadeIn('slow');$('#loading').fadeOut();";
  6.  
  7. echo $jax->observeForm("#testando", $options); ?>

Em breve publicarei exemplos mais decentes de uso.

Qualquer sugestão ou dúvida, comente!

Abraços,

Comentários (25)

jQuery: confirmação não obstrusiva (unobtrusive confirm)

12/02/2007

ConfirmPessoal, aqui vai mais uma dica interessante usando jQuery.

Fazer uma confirmação não obstrusiva, ou seja, caso o usuário tenha desabilitado ou não tenha suporte a JS, funcionará do mesmo jeito.

Para fazer isso, iremos declarar que todos os links que possuam a classe "linkdelete", terão uma confirmação antes de seguir para seus devidos links. (quando clicado).

TEXTO PURO
HTML:
  1. <a xhref="linkqualquerparaexclusão" class="linkdelete">Delete 1</a>
  2.  
  3. <a xhref="linkqualquerparaexclusão" class="linkdelete">Delete 2</a>
  4.  
  5. ....

Agora a parte divertida com jQuery:

TEXTO PURO
JAVASCRIPT:
  1. $(document).ready(function(){
  2.  
  3. $(".linkdelete").click(function(){
  4. if (!confirm("Tem certeza que deseja apagar?")){
  5. return false;
  6. }
  7. });
  8.  
  9. });

Resumidamente, pegamos todos os itens com o class igual a linkdelete e dizemos que se ele for clicado e caso eu não confirme a mensagem, ele retornará falso, ou seja, cancela a ação. Caso contrário, ou seja, ele confirme a mensagem, será levado a URL do link.

Caso o usuário não tenha JS ou o mesmo esteja desabilitado, sem problemas, pois não colocamos o JS diretamente no (X)HTML.

Bom pessoal, é isso...

Espero que tenham gostado da dica...

Até a próxima...

Obs.: me desculpem pela não publicação de um novo vídeo tutorial esta semana, é que estou completamente sem voz... Mas semana que vem, se tudo der certo, tem material novo sobre Cake... 

Comentário (1)

jQuery: marcando/desmarcando todos os checkbox (check/uncheck checkboxes)

07/02/2007

CheckboxesVocê precisa criar um checkbox que quando marcado, marque também todos os outros de uma lista de registros, por exemplo?

Com jQuery consegui resolver isso facilmente.

Primeiro criei um checkbox que marcará e desmarcará os outros:

TEXTO PURO
HTML:
  1. <input type="checkbox" id="checkAll" />

E os que serão marcados terão a seguinte configuração:

TEXTO PURO
HTML:
  1. <input type="checkbox" value="1" class="chM" />
  2.  
  3. <input type="checkbox" value="2" class="chM" />

Agora o JavaScript:

TEXTO PURO
JAVASCRIPT:
  1. $(document).ready(function(){
  2. $("#checkAll").change(function() {
  3. if(this.checked){
  4. v = true;
  5. }else{
  6. v = false;
  7. }
  8. chs = $(".chM").get();
  9. for(i=0; i
  10. chs[i].checked=v;
  11. });
  12. });

Este código será executado quando o documento for carregado, ou seja, quando ele estiver pronto (ready).

De forma resumida, adicionamos um evento (change) ao checkbox checkAll, quando executado, verifica o valor do checkbox e baseado neste altera o valor dos checkboxes com class=chM. No caso o $(".chM").get(); retorna todos os elementos que possuem essa classe "chM".

Bem simples, não?

UPDATED (08/02/2007):

Recebi via comentário uma outra maneira de marcar todos os checkboxes usando as expressões do jQuery, vale a pena conferir:

http://www.georgisvetoslavov.name/codes/jquery_checkboxes.html

Enviada por Georgi

/UPDATED

Qualquer dúvida, comentem!

Abraços e até a próxima!

Comentários (18)

Alinhamento Vertical de Divs com JavaScript e JQuery

18/01/2007

Passei um sufoco esses dias tentando alinhar um div dentro do outro apenas com CSS, o qual aliás não consegui nada satisfatório, mesmo achando algumas técnicas interessantes que não chegaram a funcionar comigo. Então parti para o JavaScript, para me ajudar. :)

Como neste projeto que eu precisava alinhar os divs, eu já estava usando a biblioteca JQuery (que por sinal tem um slogan legal - "Write less, do more" ou seja, escreva menos e faça mais), fiz o alinhamento usando ela mesmo.

Aqui está a explicação do problema:

Alinhamento Vertical

Onde eu tenho uma div maior, com altura definida. Um div (que tive que adicionar para poder alinhar) com altura variada por conter o texto e uma imagem os quais não tenho controle das suas respectivas alturas.

O primeiro detalhe que temos que fazer é adaptar o código (x)html para ser alinhado. Como disse tive que adicionar um div (o da altura variada), pois sem ele nada feito.

TEXTO PURO
HTML:
  1. <div class="alinhar">
  2. <div><img src="http://www.tuliofaria.net/imagem.jpg" />
  3. texto</div>
  4. </div>

Obs.: não pode haver nenhum espaço ou texto entre os dois divs, porque senão haverá um textNode entre eles e a técnica não funcionará. Tenho que arrumar um workaround para isso e para a preguiça. :)

[UPDATED 10/07/2007]

Agora vem a parte divertida, JavaScript, para conferir o código entre aqui e veja o Código Fonte de Exemplo.

Obs.: me desculpem por não ter percebido esse erro. Realmente o editor do blog cortou uma parte do fonte JS.

[/UPDATED 10/07/2007]

O que esse código faz, resumidamente, é pegar a altura dos dois divs, subtrair e dividir esse resultado por dois. Para saber o valor do padding-top que temos que definir no div de altura fixa. Que é o mesmo valor que tiraremos de sua altura.

Por que usei setTimeOut? Porque estava dando alguns problemas de não reconhecer a altura dos divs logo após o carregamento da página, assim depois de 1000ms possivelmente já terá renderizado corretamente.

Para baixarem a JQuery: www.jquery.com

Bom pessoal, até a próxima. Qualquer dúvida, comentem :)

Comentários (33)