Juareznjunior's Weblog

Alterar posição da Linha (TR) com jQuery

juareznjunior — Fri, 06 Feb 2009 14:02:19 +0000

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


 
  
   
   
   
  
 
 
  
  
  
 
 
  
  
  
 
 
  
  
  
 
 
  
  
  
 col 1 col 2  
linha 1 linha 1 up down
linha 2 linha 2 up down
linha 3 linha 3 up down
linha 4 linha 4 up down

col 1	col 2
linha 1	linha 1	up down
linha 2	linha 2	up down
linha 3	linha 3	up down
linha 4	linha 4	up down

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

$(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

jQuery lightBox com iframe

juareznjunior — Mon, 17 Nov 2008 20:13:28 +0000

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

HTML principal, chamamos aqui de light.html

HTML do iframe, light-iframe.html

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

juareznjunior — Fri, 31 Oct 2008 12:56:14 +0000

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:

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).









































Column 1
Column 2
Column 3
Column 4


Column 5
Column 6
Column 7






um monte
um monte de coisa aqui
um monte de coisa aqui
um monte de coisa aqui





Total
22213
Teste
TESTESTE

Column 1	Column 2	Column 3	Column 4
	um monte	um monte de coisa aqui	um monte de coisa aqui	um monte de coisa aqui
Total	22213	Teste	TESTESTE

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

Curiosidade! Declaração de controller (ZF,Kohana e CodeIgniter)

juareznjunior — Thu, 04 Sep 2008 14:25:03 +0000

Zend Framework

class IndexController extends Zend_Controller_Action {
 public function indexAction() {
  $this->render();
  //views/script/index/index.phtml
 }
}

Kohana

class Site_Controller extends Controller {
 public function index() {
  View::factory('template')->render(true);
  //views/template.php
 }
}

CodeIgniter

class Site extends Controller {
 function index() {
  $this->load->view('site.php');
  //views/site.php
 }
}

plugin jQuery ScrollTable

juareznjunior — Tue, 24 Jun 2008 13:04:28 +0000

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:

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

Fiz um post no forum do jQuery Brasil:

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

[s]

JunioR

Selecionar coluna com jQuery

juareznjunior — Wed, 14 May 2008 19:56:56 +0000

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

col 1	col 2	col 4
col 1	col 2	col 3
col 1	col 2	col 3

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

juareznjunior — Mon, 28 Jan 2008 18:38:17 +0000

Coisa rápida

$(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


  
  Menu 1
  
 	link de menu
 	link de menu
 	link de menu
 	link de menu
 	link de menu
 	link de menu
  
  
  
  Menu 2
  
 	link de menu
 	link de menu
 	link de menu
 	link de menu
 	link de menu
 	link de menu
  
  
  
  Menu 3
  
 	link de menu
 	link de menu
 	link de menu
 	link de menu
 	link de menu
 	link de menu

[s]

JunioR

jQuery + XML

juareznjunior — Thu, 20 Dec 2007 11:24:21 +0000

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.



10
Fulano
1600
Analista de sistemas
Tecnologia da informao


14
Beltrano
1900
Suporte Help Desk
Tecnologia da informao


24
Cicrano
2000
Compradora Lar
Compras/Lar


34
Teste
3900
Gerente E-Commerce
Comrcio Eletrnico


44
zefina
3900
Design Modas
Vendas

';
 sleep(1);
 exit;
}

JavaScript – parte legal :

$(document).ready(function(){
 var loading = 'Aguarde...';
 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(''+$(this).text()+'');
     });
     $table.append($tr);
    });
    $table.zebra().find('tfoot td').text('time: '+new Date().getTime()).end().parent().show();
    click = false;
   }
  });
 });
});

HTML








        id
        nome
        salario
        cargo
        dpto

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

[s]

JunioR

Tooltips simples para elementos input com jQuery

juareznjunior — Tue, 11 Dec 2007 17:57:40 +0000

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

[s]

JunioR

Retornar último número pelo PHP

juareznjunior — Mon, 26 Nov 2007 16:03:47 +0000

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";

Column 1	Column 2	Column 3		Column 4
Column 1	Column 2	Column 5	Column 6	Column 7
	um monte	um monte de coisa aqui	um monte de coisa aqui	um monte de coisa aqui
Total		22213	Teste	TESTESTE