Category: javascript


Após uma dúvida de um colega, resolvi escrever este post. Ele estava usando o antigo livequery que, atualmente, foi acoplado ao fonte do jquery (1.3X) renomeado para jQuery.live().

Utitlizar o jQuery.live() é uma possibilidade mas, numa análise mais cuidadosa e menos custosa, podemos usar o jQuery.clone(true). Passando true no parametro, dizemos que o elemento será clonado com todos os eventos para ser inserido em qualquer parte do DOM.

Vamos aos códigos:
HTML

<table cellspacing="1" cellpadding="2">
 <thead>
  <tr>
   <th>col 1</th>
   <th>col 2</th>
   <th>&nbsp;</th>
  </tr>
 </thead>
<tbody>
 <tr>
  <td>linha 1</td>
  <td>linha 1</td>
  <td><a href="#up">up</a>&nbsp;<a href="#down">down</a></td>
 </tr>
 <tr>
  <td>linha 2</td>
  <td>linha 2</td>
  <td><a href="#up">up</a>&nbsp;<a href="#down">down</a></td>
 </tr>
 <tr>
  <td>linha 3</td>
  <td>linha 3</td>
  <td><a href="#up">up</a>&nbsp;<a href="#down">down</a></td>
 </tr>
 <tr>
  <td>linha 4</td>
  <td>linha 4</td>
  <td><a href="#up">up</a>&nbsp;<a href="#down">down</a></td>
 </tr>
</tbody>
</table>

CSS

table {
 font: 1.5em tahoma;
 border:1px solid #dadada;
 width:50%;margin:auto;
 border:1px solid #dadada;
}
table thead tr {
 text-align:left;
 background:#fff;
}
table thead th {
 background:#ccc;
}
table tbody tr {
 cursor: pointer;
 background:#eee;
}

JS

$(document).ready(function(){
 $(document.getElementsByTagName('tbody')[0].childNodes).find('a').bind('click',function(){
  var _hash = this.hash;
  var $self = $(this);
  var $tr = $self.parent().parent();
  var $prev = $tr.prev();
  var $next = $tr.next();

  switch(_hash) {
   case '#down':
    if ($next.length > 0 && 'TR' === $next[0].tagName) {
     $tr.clone(true).insertAfter($next[0]);
     $tr.remove();
    }
   break;
   default:
    if ($prev.length > 0 && 'TR' === $prev[0].tagName) {
     $tr.clone(true).insertBefore($prev[0]);
     $tr.remove();
    }
  }
 });
});

Resumindo. Identificamos os filhos da tag tbdoy (tr´s) e todas as tags de a inseridas neste contexto do seletor (tr a). O resto é auto-explicativo.

[s]

JunioR

Anúncios

jQuery lightBox com iframe

Aos solicitantes, depois de algumas pesquisas, segue o tutorial.

HTML principal, chamamos aqui de light.html
<script language="JavaScript" type="text/javascript" src="jquery/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
</head>
<body>
<iframe src="light-iframe.html" style="width:600px;height:300px;margin-top:10px;"></iframe>
</body>
</html>

HTML do iframe, light-iframe.html

<style>
/* jQuery lightBox plugin - Gallery style */
#gallery {
	background-color: #444;
	padding: 10px;
	width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
	border: 5px solid #3e3e3e;
	border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
	border: 5px solid #fff;
	border-width: 5px 5px 20px;
	color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
<div id="gallery">
    <ul>
        <li>
            <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
       </li>
        <li>
            <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
   </ul>
</div>

Neste iframe, assim como no site do lightbox, apenas um css para formatar as listas com imagens.

JAVASCRIPT do light.html

$(function(){
 $('iframe').load(function(){
  $(this).contents().find('div#gallery > ul > li a').lightBox();
 });
});

Não tem segredo, adicionamos um load na tag do iframe, pegamos o conteúdo via contents() e com seletor simples aplicamos o plugin lightbox

[s]

JunioR

jQuery.scrollTable na prática

Depois do lançamento deste plugin aqui no blog, vou mostrar sua utilização. A única complexidade é a utilização de rowspan e colspan na tabela. Vamos lá!

Includes necessários:

<script type="text/javascript" src="jquery/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery/jquery.scrollTable.js"></script>

Estrutura HTML
Para imprimir as linhas, usei um for simples do PHP.
Na declaração do div class=”main”, adicionei um style para funcionar o “opacity” fora do css apenas para IE. Aprendi isto aqui (vale a pena).

<div class="main" style="filter:alpha(opacity=0)">
<div class="divGridScroll">
<table cellpadding="2" cellspacing="1">
<thead>
<tr>
<th rowspan="2">Column 1</th>
<th rowspan="2">Column 2</th>
<th colspan="2" >Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
</tr>
</thead>
<tbody>
<?php for($i=1;$i<=20;$i++):?>
<tr>
<td><?=$i?></td>
<td>um monte</td>
<td>um monte de coisa aqui</td>
<td>um monte de coisa aqui</td>
<td>um monte de coisa aqui</td>
</tr>
<?php endfor;?>
</tbody>
<tfoot>
<tr>
<th colspan="2">Total</th>
<th>22213</th>
<th>Teste</th>
<th>TESTESTE </th>
</tr>
</tfoot>
</table>
</div>
</div>

Um pouco de CSS

div.main {
font: 11px tahoma;
border:1px solid #dadada;
width:800px;margin:auto;
-moz-opacity:0;
opacity:0;
}
table {
font: 11px tahoma;
width:100%;
background:#fff;
}
table thead th, table tfoot th {
background:#ccc;
text-align:center;
}
table tbody td {
background:#eee;
padding:3px;
}

Usei opacity para não mostrar a tabela antes de receber toda a execução do plugin. Se for alterado para o convencional display:none ou visibility:hidden a renderização da tabela não ficara adequada.

O javaScript.
Estou buscando pelo div class=”divGridScroll” onde esta nossa tabela. Perceba que adicionei uma função chamada onComplete. Esta função tem como objetivo, fazer alguma coisa após a tabela ser renderizada. Neste caso, vamos mostrar o div class=”main”. Outro detalhe, veja que aplico um filtro para validar se o browser é IE. Se for, remove o atributo filter. Se deseja ver o resultado padrão no IE, apenas remova o método filter do chain.

$(function(){
   $('.divGridScroll').scrollTable({
      height:150,
      onComplete:function(){
         $(this).parent().css('opacity',1).filter(function(){
            if ($.browser.msie) {
               this.style.removeAttribute('filter');
            }
         });
      }
   });
});

Testei no IE7,Opera,Chrome e FF.

Até a próxima

[s]

JunioR

plugin jQuery ScrollTable

De tanto procurar e testar scripts para scroll em tabelas (dataGrid), resolvi quebrar um pouco a cabeça e escrever um plugin via jQuery para tal. Sabemos que para FireFox 2 um simples overflow:auto com algum height na tag de tbody resolveria, mas infelizmente, alguns browsers não suportam isto. O FireFox 3 tem algumas diferenças com relação ao scroll no tbody, se o FF2 respeita a altura do td, o FF3 redimensiona a altura do td caso não ultrapasse a altura definida no tbody.

Não vou escrever o fonte do plugin aqui, caso tenham interesse basta comentar solicitando js.

Algumas imagens

Tabela original:

Tabela com scroll FireFox e IE7:

Opera 9.5

Tabela com rowspan,colspan e tfoot

A estrutura solicitada para trabalhar com o plugin é a seguinte:
<div><table><thead><tr><th></th></tr></thead></table></div>

O js:
$(function(){ $('div').scrollTable({height:200}); });

Fiz um post no forum do jQuery Brasil:

http://jquerybrasil.com/forum/index.php?showtopic=496

Em ação – jsbin
http://jsbin.com/inede/2

[s]

JunioR

Aproveitando uma dúvida no fórum do jQuery, vou mostrar uma das maneiras de selecionar coluna de uma tabela.

CSS

table {
font: 11px tahoma;
border:1px solid #dadada;
width:50%;margin:auto;
}
table thead tr {
text-align:left;
background:#fff;
}
table thead th {
background:#ccc;
cursor:pointer;
}
.over {
background:#555;color:#fff;
}
.odd {background:#eee;}
.even {background:#f6f6f6;}

HTML

<table cellspacing="1" cellpadding="2">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 4</th>
</tr>
</thead>
<tbody>
<tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
<tr><td>col 1</td><td>col 2</td><td>col 3</td></tr>
</tbody>
</table>

JavaScript

$(function(){
var $tr = $('table > tbody tr')
.filter(':odd').removeClass('even').addClass('odd')
.end()
.filter(':even').removeClass('odd').addClass('even')
.end();
var $thead = $('table > thead');
var data = [];
$thead.find('th').bind('click',function(){
var idx = this.cellIndex;
if ( data.length ) {
$(data).removeClass('over');
data = [];
}
$tr.each(function(){
$('td:eq('+idx+')',this).map(function(){ data.push(this); $(this).addClass('over')});
});
});
});

[s]

JunioR

Coisa rápida 🙂

JS

$(document).ready(function(){
 $('#accordion-container > li > a').bind('click',function() {
  var $next = $(this).next();
  if ($next.is(':visible')) return false;
  $(this).parent().parent().find('li > ul:visible').slideUp('normal');
  $next.slideDown('normal');
  return false;
});});

CSS

ul {
 margin:0;padding:0;
 list-style:none;
}
ul#accordion-container {
 width:200px;
 padding:2px;
}
ul#accordion-container > li {
 margin-top:1px;
 background:#555;
}
ul#accordion-container > li > a {
 display:block;
 padding: 4px;
 color: #fff;
 text-decoration:none;
 outline:none;
}
ul#accordion-container > li > a:hover {
 background: #000;
}ul.accordion-menu {
 display:none;
 background:#ccc;
}
ul.accordion-menu a {
 display:block;
 padding-left: 4px;
 background:#ccc;
 color:#555;
 text-decoration:none;
 outline:none;
}
ul.accordion-menu a:hover {
 color:#fff;
}

HTML

<ul id="accordion-container">
  <li>
  <a href="#">Menu 1</a>
  <ul class="accordion-menu">
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
  </ul>
  </li>
  <li>
  <a href="#">Menu 2</a>
  <ul class="accordion-menu">
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
  </ul>
  </li>
  <li>
  <a href="#">Menu 3</a>
  <ul class="accordion-menu">
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
 	<li><a href="#">link de menu</a></li>
  </ul>
  </li>
</ul>

[s]

JunioR

jQuery + XML

Aproveitando uma dúvida do fórum do jQuery, escrevi um script para trabalhar com xml retornado via ajax. Vamos por partes:

Nome do script: (xml.php)

Ajax. Este script, valendo-se da condição, escreve um xml válido.

<?php
if ($_GET['xml']) {
header("Content-type: text/xml; charset=ISO-8859-1");
   echo '
<empresa>
<funcionario>
<id>10</id>
<nome>Fulano</nome>
<salario>1600</salario>
<cargo>Analista de sistemas</cargo>
<depto>Tecnologia da informao</depto>
</funcionario>
<funcionario>
<id>14</id>
<nome>Beltrano</nome>
<salario>1900</salario>
<cargo>Suporte Help Desk</cargo>
<depto>Tecnologia da informao</depto>
</funcionario>
<funcionario>
<id>24</id>
<nome>Cicrano</nome>
<salario>2000</salario>
<cargo>Compradora Lar</cargo>
<depto>Compras/Lar</depto>
</funcionario>
<funcionario>
<id>34</id>
<nome>Teste</nome>
<salario>3900</salario>
<cargo>Gerente E-Commerce</cargo>
<depto>Comrcio Eletrnico</depto>
</funcionario>
<funcionario>
<id>44</id>
<nome>zefina</nome>
<salario>3900</salario>
<cargo>Design Modas</cargo>
<depto>Vendas</depto>
</funcionario>
</empresa>';
 sleep(1);
 exit;
}

JavaScript – parte legal 🙂 :

$(document).ready(function(){
 var loading = '<span>Aguarde...</span>';
 var $button = $('button');
 var click = false; 

 // extend, para aplicar um zebra table
 $.fn.zebra = function() {
  $('tbody tr:visible',this)
   .filter(':odd').removeClass('even').addClass('odd')
   .end()
   .filter(':even').removeClass('odd').addClass('even');
  return this;
 }

 $().ajaxStart(
  function(){
   $button.after(loading)
  }
 ).ajaxStop(
  function(){
   $button.next().fadeOut('fast',function(){
    $(this).remove();
   })
  }
 );

$button.bind('click',function(){
  if (click) return;
  click = true;
  $.ajax({
   type: 'GET',
   url: 'xml.php?xml=1',
   dataType: 'xml',
   success: function(xml) {
    var $table = $('table').find('tbody').empty().end();
    var $tr = null;
    $('funcionario',xml).each(function(){
     $tr = document.createElement('tr');
     $($tr).hover(
       function(){
        $(this).addClass('hover')
       },
       function(){
        $(this).removeClass('hover')
       }
     ).bind('click',function(){
	alert($('td:first',this).text())
     });
     $(this).children().each(function(){
      $($tr).append('<td>'+$(this).text()+'</td>');
     });
     $table.append($tr);
    });
    $table.zebra().find('tfoot td').text('time: '+new Date().getTime()).end().parent().show();
    click = false;
   }
  });
 });
});

HTML

<style>
table { background:#fff;border:1px solid #dadada;width:500px;}
table tbody tr {cursor:default;}
table tfoot tr {background:#ccc;}
.odd {background:#eee;}
.even {background:#f6f6f6;}
.hover {background:#fff000;}
</style>
<body>
<button>Get XML</button>
<div id="result" style="display:none">
<table border="0" cellpadding="2" cellspacing="1">
<thead style="background:#ccc">
<tr>
        <th>id</th>
        <th>nome</th>
        <th>salario</th>
        <th>cargo</th>
        <th>dpto</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
        <td colspan="5"></td>
</tr>
</tfoot>
</table>
</div>

Adicionei alguns efeitos para melhorar a visualização (zebra e hover)

[s]

JunioR

As vezes precisamos ajudar o usuário à preencher formulários, dizendo o que pode e não pode ser digitado nos campos. Na minha opnião este tipo de ajuda nunca é demais. Valendo-se da filosofia do jQuery (escrever pouco, produzir muito), escrevi este script para tal.

var help = function() {
 return {
  init: function() {
   var $form = $('form');
   var tip = null;
   $(':text',$form).each(function(){
    $(this).bind('focus',function(){
     tip = document.createElement('span');
     $(this).after( $(tip).text( $(this).attr('tips') ) );
    }).blur(function(){
     if (tip) {
      $(tip).remove();
      tip = null;
     }
     return;
    });
   });
  }
 }
}();
$(document).ready(help.init);

HTML

<form>
<input type="text" name="teste1" tips="Este input é muito importante..." /><br />
<input type="text" name="teste2" tips="Digite qualquer coisa..." /><br />
<input type="text" name="teste3" tips="Terceiro, esta quase acabando..." /><br />
<input type="text" name="teste4" tips="Seja persistente" /><br />
<input type="text" name="teste5" tips="Último input, caso tenha preenchido os anteriores, boa sorte!" />
</form>

[s]

JunioR

Sempre que posso, procuro melhorar alguns scripts (visualização, velocidade, integração…). Neste post, vou mostrar um pequeno script js para manipular dados de uma tabela. Coisa básica, o objetivo é clicar na letra e mostra na tabela apenas a linhas que comecem com ela (letra).

JAVASCRIPT

$(document).ready(function(){
 var enab = $(document.getElementById('todas')).addClass('enable');
 var tr = $('table tbody > tr');
 $('ul > li').bind('click',function(){
  if (enab) $(enab).removeClass();
  enab = $(this).addClass('enable');
  var text = $(this).text();
  if (text.match(/todas/i)){
   tr.show();
  } else {
   if ($.browser.msie) {
    tr.hide();
    $('.'+text).show()
   } else {
    tr.hide().filter('.'+text).show();
   }
  }
 });
});

CSS

ul li {
 display:inline;float:left;width:30px;text-align:center;list-style:none;
 background:#ccc;margin-left:2px;cursor:pointer;border:1px solid #ccc;
}
.enable {
 background:#028AC6;color:#fff;border:1px solid #555;
}
.disable {
 background:#ccc;color:#000;
}
table {
 background:#dadada;margin-top:10px;
}
thead tr {background:#ccc;}
thead th {width:100px;}
tbody tr {background:#fff;}

HTML
<ul>
<listyle="margin-left:0;">A</li>
<li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li>
<li>H</li><li>I</li><li>J</li><li>L</li>
<li>M</li><li>N</li><li>O</li><li>P</li>
<li>Q</li><li>R</li><li>S</li><li>T</li>
<li>U</li><li>V</li><li>X</li><li>Z</li>
<listyle="width:80px"id="todas">TODAS</li>
<divstyle="clear:both"></div>
</ul>
<table>
<thead>
<tr>
<th>Coluna1</th>
<th>Coluna2</th>
</tr>
</thead>
<tbody>
<trclass="A"><td>Atestado</td><td>1</td></tr>
<trclass="A"><td>Almanaque</td><td>2</td></tr>
<trclass="A"><td>Almoxarifado</td><td>3</td></tr>
<trclass="B"><td>Balconista</td><td>1</td></tr>
<trclass="B"><td>Balão</td><td>2</td></tr>
<trclass="C"><td>Carro</td><td>3cef</td></tr>
<trclass="D"><td>Dedos</td><td>3sdf</td></tr>
<trclass="E"><td>Escola</td><td>3ssdfdf</td></tr>
<trclass="F"><td>Fórmula1</td><td>3s</td></tr>
<trclass="F"><td>Farsante</td><td>3s</td></tr>
<trclass="G"><td>Gases</td><td>3s</td></tr>
</tbody>
</table>

Testado no IE6, IE7 e FireFox.

Confira.

[s]

JunioR

jQuery UI

Foi lançada no dia 17/09/2007 a lib jquery UI. Não é uma novidade, pois os jQuerianos utilizavam, e muito, o interface, que possui inumeros plugins funcionáveis até o jquery-1.1.4.

Agora, com o jquery UI, creio que o inteface seja descontinuado ou migrado. Será que o jquery UI veio para competir com o ExtJS ? Vamos esperar.

Confira os plugins

Draggables
Droppables
Sortables
Selectables
Resizables
Accordion
Calendar
Dialog
Slider
Tablesorter
Tabs
Magnifier
Shadow