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}); });

[s]

JunioR

Selecionar coluna com jQuery

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

Simples Menu Accordion com JQuery

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');
     $(this).children().each(function(){
      $($tr).hover(
       function(){
        $(this).addClass('hover')
       },
       function(){
        $(this).removeClass('hover')
       }
      ).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

Tooltips simples para elementos input com jQuery

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

Retornar último número pelo PHP

Vou mostrar algumas formas para descobrir/mostrar o(s) último(s) número(s) de uma string via php.

// string
$x = 144-4534-ABACD-394-ADSACD;

// preg_match_all
preg_match_all('/(\d+)/',$x,$m);
echo end($m[0]);
echo "\n";

// preg_split
echo end(preg_split('/[^\d]+/',$x,-1,PREG_SPLIT_NO_EMPTY));
echo "\n";

// caracter por caracter...
$c = strlen($x) - 1;
$r = array();
while(true) {
 // se o caracter for inteiro
 if(ctype_digit($x[$c])) {
  $r[$c] = $x[$c];
  // se próximo caracter não for inteiro
  // break
  if(!ctype_digit($x[$c - 1]))
   break;
 }
 $c--;
}
ksort($r);
echo join($r);
echo "\n";

Índice alfabético para tabela com jQuery

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

jQuery lightBox plugin

Grande trabalho do Leandro Vieira Pinho, vale apena conferir.

Ext.BasicDialog - extjs

Uma maneira simples de criar janelas com a lib extjs.

Includes cd css
ext/resources/css/ext-all.css
ext/resources/css/xtheme-default.css

A primeira linha corresponde ao css default da ext, a segunda faz referência ao theme, na versão 1.1 existem 3 opções além do default: areo,vista e gray.

Includes de javascript
ext/adapter/ext/ext-base.js
ext/ext-all.js

Você pode trabalhar com outros adaptadores: jQuery,Prototype e YUI. Já fiz alguns testes com o jQuery, funciona perfeitamente, mas neste post vamos usar o “Stand-Alone” ext-base.js.

Classe para manipulação da janela

var ExtJs = function() {
 var dialog = [];
 return {
  init: function() {
   Ext.select('button').on('click',function(){
    ExtJs.showDialog(this.getAttribute('dialogId'))
   });
  },
  showDialog : function(xid) {
   if (!dialog[xid]) {
    dialog[xid] = new Ext.BasicDialog('', {
     autoCreate: true,
     width:500,
     height:300,
     shadow:true,
     minWidth:300,
     minHeight:250,
     proxyDrag: true,
     title: 'Minha Janela número '+xid
    });
    dialog[xid].addKeyListener(27, dialog[xid].hide, dialog[xid]);
    dialog[xid].addKeyListener(13, dialog[xid].hide, dialog[xid]);
    dialog[xid].addButton('Close', dialog[xid].hide, dialog[xid]);
    dialog[xid].body.dom.innerHTML = Ext.get('content'+xid).dom.innerHTML;
    dialog[xid].on('hide',function(){
    dialog[xid].destroy(true);
    dialog[xid] = false;
   });
  }
  dialog[xid].show(Ext.get('trigger')).toFront();
 }
};
}();

Esta classe busca, através de um seletor (neste caso a tag button), e adiciona um evento onclick para criação da janela.

Iniciamos a extjs baseada na classe acima
Ext.onReady(ExtJs.init,ExtJs,true);

Pronto, tudo certo basta clicar nos botões.

O HTML
<div style="text-align:center">
<button class=”dialog-box” dialogId=”1″>Dialog 1</button>
<button class=”dialog-box” dialogId=”2″>Dialog 2</button>
<button class=”dialog-box” dialogId=”3″>Dialog 3</button>
</div>
<div id=”trigger” style=”position:absolute;top:50%;left:50%;”></div>
<div id=”content1″ style=”display:none”>Conteúdo 1</div>
<div id=”content2″ style=”display:none”>Conteúdo 2</div>
<div id=”content3″ style=”display:none”>Conteúdo 3</div>

Referências:
extjs.com/learn
extjs.com.br
google.com

[s]

JunioR