Í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