Latest Entries »

Estou usando o KO3 num projeto relativamente grande. Na verdade estou migrando de CI para KO3.

Bom, o objetivo deste post é compartilhar a integração com as libs do ZF, mais precisamente Zend_Db e Zend_Db_Table.

Primeiro passo é criar uma pasta chamada “zend” dentro da pasta “modules”. Em seguida, dentro da pasta “zend”, criamos as pastas “classes” e “Zend”. Veja a estrutura abaixo.

Alteração no bootstrap

Classe zend.php

Exemplo de Controller

Exemplo do Model

[s]

Menu dropdown com css

Apenas com técnicas de css vejam o fonte: http://gist.github.com/248416

Let’s go! Copy paste!

Não funciona no IE6

[s]

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

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

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

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

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.