Tag Archive: jquery


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