Posts na categoria ‘jQuery’
22fev2012
Bem simples, só editei o trecho que era necessário para enviar um history.pushState, no final da requisição ajax, que carrega a página em uma div, sem dar refresh no restante do site.
http://wbruno.com.br/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2
$.ajax({
url: href,
success: function( response ){
//forçando o parser
var response = $( '<div>'+response+'</div>' );
var data = response.find('#content').html();
//apenas atrasando a troca, para mostrarmos o loading
window.setTimeout( function(){
content.fadeOut('slow', function(){
content.html( data ).fadeIn();
var title = response.find('title').text();
window.history.pushState( href, title, href );
document.title = title;
});
}, 500 );
}
});
Notem a linha:
window.history.pushState( href, response.find('title'), href );
É essa nova função que veio junto com o HTML5, que faz toda a mágica.
Browsers antigos não implementam esse método.
Agora podemos parar de forçar a barra usando o document.location.hash, como nessa implementação aqui:
http://wbruno.com.br/2011/11/25/carregando-conteudo-ajax-trocando-url-jquery/
É isso. Dúvidas ? pergunte, comente!
Link deste post
Tags: pushState
26jan2012
Nos últimos meses, tenho usado bastante o efeito de carousel.
Como todo programador, me incomodo de ter que ‘me repetir’. Ou ter que repensar uma lógica que já resolvi uma vez.
Nem sempre ‘temos tempo’ de parar, analisar e otimizar oque estamos fazendo.
Porém, devemos fazer isso.
Fiz vários tipos de carouseis, porém por serem diferentes um dos outros, e alguns possuirem algumas peculiaridades, configurações extras, estilizações fora dos padrões, acabei fazendo os meus próprios códigos, e não usando nenhum plugin pronto.
Nesse post, vou deixar o start de um plugin de jQuery, que rapidamente fiz aqui.
Muitas melhorias precisam ser feitas, como:
-> possibilitar scroll vertical
-> não limitar a marcação a ser usada
-> permitir uso do easing..
e por ai vai.. nisso, eu acabaria recriando o cycle(ou chegando perto do efeito Hz dele). Não é essa a intenção.
Até agora é para ser simples mesmo, e muito mais simples de usar também.
Como todos os meus efeitos, esse não foge do meu padrão: resolvi as partes mais complicadas no css.
O js é simples. O instanciamento ainda mais.
É isso, sem mais, segue o código, e logo abaixo a demonstração.
A grande ‘sacada’, é deixar o plugin se virar com a animação, (setas prev e next), e termos uma chamada simples e limpa assim:
/* fim plugin carousel */
jQuery(document).ready(function(){
jQuery('#slide').carousel();
jQuery('#slide2').carousel();
});
=) Vejam como fiz:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
/* carousel */
jQuery.fn.carousel = function( settings ){
var $this = jQuery( this );
var defaults = {
prev: '.nav-left',
next: '.nav-right',
pos: 0,
speed: 1000
}
settings = jQuery.extend(defaults, settings);
var lis = $this.find('li');
var width_li = lis.eq(0).width()+ parseInt( lis.eq(0).css('marginLeft') )+parseInt( lis.eq(0).css('marginRight') );
var ul = $this.find('ul');
var prev = $this.find( settings.prev );
var next = $this.find( settings.next );
ul.css({width: (width_li*lis.length)+'px'});
/* .nav-left */
prev.click(function(){
if( settings.pos>0 ){
settings.pos--;
_move( ul, settings.pos, width_li, settings.speed );
}
});
/* .nav-right */
next.click(function(){
if( lis.length-1>settings.pos ){
settings.pos++;
_move( ul, settings.pos, width_li, settings.speed );
}
});
/* funcoes privadas */
_move = function( ul, pos, width_li, speed ){
var new_left = -1*pos*width_li;
ul.animate({left:new_left+'px'},settings.speed);
}
return $this;
};
/* fim plugin carousel */
jQuery(document).ready(function(){
jQuery('#slide').carousel();
jQuery('#slide2').carousel();
});
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
#slide { width: 460px; height: 300px; }
#slide li { width: 460px; height: 300px; }
#slide2 { width: 140px; height: 105px; padding: 10px 25px; background: #000; }
#slide2 li { width: 140px; height: 105px; }
hr { margin: 50px; }
/* css do plugin */
.carousel { position: relative; }
.overflow { overflow: hidden; height: 100%; position: relative; }
.carousel ul { position: absolute; top: 0; left: 0; }
.carousel li { float: left; }
.nav { position: absolute; top: 50%; z-index: 3;
background: url('images/nav.png') no-repeat;
width: 36px; height: 36px; margin-top: -18px;
cursor: pointer;
}
.nav-left { left: 10px; }
.nav-right { right: 10px; background-position: right top; }
.nav-left:hover { background-position: left -36px; }
.nav-right:hover { background-position: right -36px; }
/* css do plugin */
</style>
</head>
<body>
<div id="slide" class="carousel">
<div class="nav nav-left"></div>
<div class="overflow">
<ul>
<li><img src="images/1.jpg" alt="" /></li>
<li><img src="images/2.jpg" alt="" /></li>
<li><img src="images/3.jpg" alt="" /></li>
<li><img src="images/4.jpg" alt="" /></li>
<li><img src="images/5.jpg" alt="" /></li>
</ul>
</div>
<div class="nav nav-right"></div>
</div><!-- /slide -->
<hr />
<div id="slide2" class="carousel">
<div class="nav nav-left"></div>
<div class="overflow">
<ul>
<li><img src="images/mini1.jpg" alt="" /></li>
<li><img src="images/mini2.jpg" alt="" /></li>
<li><img src="images/mini3.jpg" alt="" /></li>
<li><img src="images/mini4.jpg" alt="" /></li>
</ul>
</div>
<div class="nav nav-right"></div>
</div><!-- /slide -->
</body>
</html>
Link deste post
25jan2012
Boas,
A idéia aqui, foi chegar próximo do efeito de “Exibir mais” do youtube:
Escondido:
A mostra:
Ok ?
Uma parte do conteúdo fica a mostra, e clicando no botão aparece o restante.
O primeiro passo é resolver o efeito no css. Todos os efeitos são apenas css. O javascript manipulando css. jQuery só entra para facilitar essa manipulação, porém é importante ressaltar, que toda a lógica e o efeito em si, ficou no css.
Depois de conseguir resolver tanto o estado aberto, qnto o fechado, usando apenas css e html, sem nenhuma linha de js, fazer o comportamento fica super simples.
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
p { margin-bottom: 10px; }
.content { margin: 0 auto; width: 500px; }
#panel { position: relative; width: 500px; margin: 0 auto; }
#content { }
.hidden { height: 100px; overflow: hidden; }
#toggle { width: 488px; height: 20px; padding: 5px;
background: #fff; border: 1px solid #ccc; cursor: pointer;
text-align: center;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#toggle').click(function(){
jQuery('#panel').toggleClass('hidden');
});
});
</script>
</head>
<body>
<div id="panel" class="hidden content">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed gravida dolor. Fusce aliquam, urna sit amet
luctus adipiscing, massa sem venenatis dui, quis accumsan mi orci eu orci. Mauris nec massa non mi iaculis tincidunt
eget a lectus. Curabitur suscipit, magna vel laoreet volutpat, sem mauris placerat risus, nec pretium mauris orci non dui.</p>
<p>Cras in massa dapibus leo tincidunt molestie nec ut sem. Aenean sit amet ipsum risus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Cras vitae erat at magna volutpat consequat ut a justo.
Mauris dapibus dolor at orci placerat congue. Praesent facilisis sodales molestie. Quisque eget lacus eget justo aliquet
sagittis. Duis sed elit id dui semper feugiat. Vivamus risus magna, facilisis at hendrerit sit amet, accumsan nec felis.</p>
<p>Nunc massa tellus, fringilla ut tincidunt consequat, ultricies eget nunc. </p>
</div><!-- /content -->
</div><!-- /panel -->
<div id="toggle" class="content">toggle</div>
</body>
</html>
Link deste post
Tags: esconde mostra
23jan2012
Talvez esteja faltando algo “simples”, situações “cotidianas”, ou sei lá oque.
Estou vendo muitas pessoas no fórum com a mesma dúvida: “usar o objeto Deferred do jQuery”, “pegar o retorno de uma requisição ajax”, e coisas relacionadas.
Eu sempre indico o ótimo tutorial do Maujor:
http://www.maujor.com/blog/2011/02/01/o-objeto-deferred-da-jquery-1-5, porém talvez por ser tão completo, e ter tantas informações, alguns iniciantes podem não estar “entendendo”.
Vou deixar alguns exemplos práticos(todos com o mesmo resultado), de algumas formas de usar o Deferred:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
/* retorna undefined */
jQuery('#ajax_form_undefined').submit(function(){
var form = jQuery( this );
var ret = envia_form_nao_funciona( form );
alert( ret );
return false;
});
/* enviando ajax_form com done */
jQuery('#ajax_form').submit(function(){
var ret = envia_form( jQuery( this ) );
ret.done(function( dados ){
alert( dados );
});
return false;
});
/* enviando ajax_form2 com then */
jQuery('#ajax_form2').submit(function(){
var ret = envia_form( jQuery( this ) );
ret.then(function( dados ){
alert( dados );
});
return false;
});
/* enviando ajax_form3 com success */
jQuery('#ajax_form3').submit(function(){
var ret = envia_form( jQuery( this ) );
ret.success(function( dados ){
alert( dados );
});
return false;
});
});
function envia_form_nao_funciona( form )
{
jQuery.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function( dados ){
return dados
}
});
}
function envia_form( form )
{
return jQuery.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
});
}
</script>
</head>
<body>
<h2>Exemplo do que "não funciona"(retorna undefined)</h2>
<form method="post" action="processa.php" id="ajax_form_undefined">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome1" /></label>
<label>Email: <input type="text" name="email" value="email1" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
<h2>Recebendo com done</h2>
<form method="post" action="processa.php" id="ajax_form">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome2" /></label>
<label>Email: <input type="text" name="email" value="email2" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
<h2>Recebendo com then</h2>
<form method="post" action="processa.php" id="ajax_form2">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome3" /></label>
<label>Email: <input type="text" name="email" value="email3" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
<h2>Recebendo com success</h2>
<form method="post" action="processa.php" id="ajax_form3">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="nome4" /></label>
<label>Email: <input type="text" name="email" value="email4" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
</body>
</html>
Convém lembrar que “precisamos” do deferred por causa do assincronismo das requisições, ou seja, o objeto ajax, envia para o servidor, o servidor processa, e o objeto ajax trás o retorno, sem refresh, porém também, sem que o restante do script aguarde esse retorno.
É essa diferença entre “sincrono” e “assincrono”. Note que enviando em modo sincrono async: false,, eu consigo “pegar o retorno” do ajax.
jQuery(document).ready(function(){
/* retorna undefined */
jQuery('#ajax_form_sincrono').submit(function(){
var form = jQuery( this );
var ret = envia_form_sincrono( form );
alert( ret );
return false;
});
});
function envia_form_sincrono( form )
{
var ret = '';
jQuery.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
async: false,
success: function( dados ){
ret = dados;
}
});
return ret;
}
E ai ? qual dos dois usar ? sincrono ? ou assincrono com o deffered ?
Não sei, isso depende da sua aplicação, e é assunto para um próximo post talvez.
Usou ? comente.. este é o “meu pagamento” pelo que escrevo: o teu comentário.
Link deste post
Tags: deferred
20jan2012
Eu havia postado, como enviar um formulário com ajax, aproveitando o callback submitHandler do jQuery.validate.
Porém, se vc não estiver usando esse plugin, e quiser apenas usar o ajax do jQuery, o seguinte basta:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#ajax_form').submit(function(){
var dados = jQuery( this ).serialize();
jQuery.ajax({
type: "POST",
url: "processa.php",
data: dados,
success: function( data )
{
alert( data );
}
});
return false;
});
});
</script>
</head>
<body>
<form method="post" action="" id="ajax_form">
<label><input type="hidden" name="id" value="" /></label>
<label>Nome: <input type="text" name="nome" value="" /></label>
<label>Email: <input type="text" name="email" value="" /></label>
<label>Telefone: <input type="text" name="telefone" value="" /></label>
<label><input type="submit" name="enviar" value="Enviar" /></label>
</form>
</body>
</html>
Primeiro eu importo a lib jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Nada de novo até aqui.
Faço corretamente, e disparo a minha função no evento onsubmit do formulário:
jQuery('#ajax_form').submit(function(){
Vi alguns tutoriais( de blogs, fóruns e video aulas ), usando o evento onclick do botão submit(ou button), “fingem”, que isso funciona, e depois várias pessoas vão aos fóruns, por causa dos problemas gerados por esses códigos mal escritos e incorretos.
O correto é usar no onsubmit do form, e “desativar” ele, com aquele return false; que envio na linha 19
return false;
Daí em diante, não tem segredo, é o mesmo miolo que usei para enviar com o jQuery.validate.
De graça, o método .serialize(), cria a query string com os dados do formulário, e usamos essa variavel para enviar a função ajax.
Ali no success: function( data ) (linha 13), é o callback que será disparado, assim que a requisição retornar(status 200 e tal).
Bom, é isso =)
Comentem, compartilhem. Sei que é um assunto já bastante “batido”, porém não me custava deixar um código bem escrito, até para tentar minimizar os efeitos dos maus tutoriais.
Link deste post
19jan2012
Apenas repositório mesmo:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var combo = jQuery("select[name='combo']");
jQuery("input[name='selecionar']").click(function(){
var button = jQuery( this );
combo.find("option").each(function(){
if( jQuery( this ).text()==button.val() )
{
combo.val( jQuery( this ).val() );
}
});
});
});
</script>
<select name="combo">
<option value="2">Selecione</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<input type="button" name="selecionar" value="Item 1" />
<input type="button" name="selecionar" value="Item 2" />
<input type="button" name="selecionar" value="Item 3" />
Link deste post
Tags: combobox, select
19jan2012
Muito bom o plugin jQuery de lightbox do brasileiro Leandro Vieira:
leandrovieira.com/projects/jquery/lightbox/
é verdade que o projeto está ‘sem atualizações’, mas também nem precisa.
O plugin cumpre o papel dele, funciona perfeitamente e para um simples modal de imagens funciona muito bem, obrigado.
Precisei ontem, de uma galeria, onde várias classes seriam as disparadoras. Este html:
<ul class="fotos">
<li class="lightbox"><a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Primeira Diretoria Eleita da ABTF">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a><p>Primeira Diretoria Eleita da ABTF</p>
<div style="display: none;">
<a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Imagem 2">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a>
<a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Imagem 3">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a>
<a href="images/banner-primeira-diretoria-eleita-da-abtf.jpg" title="Imagem 4">
<img src="images/banner-primeira-diretoria-eleita-da-abtf.jpg" alt="" /></a>
</div><!-- /none -->
</li>
<li class="lightbox"><a href="images/banner-presidentes-da-abtf.jpg" title="Presidentes da ABTF">
<img src="images/banner-presidentes-da-abtf.jpg" alt="" /></a><p>Presidentes da ABTF</p>
<div style="display: none;">
<a href="images/banner-presidentes-da-abtf.jpg" title="Imagem 2">
<img src="images/banner-presidentes-da-abtf.jpg" alt="" /></a>
<a href="images/banner-presidentes-da-abtf.jpg" title="Imagem 3">
<img src="images/banner-presidentes-da-abtf.jpg" alt="" /></a>
</div><!-- /none -->
</li>
<li class="lightbox last"><a href="images/banner-diretoria-atual.jpg" title="Diretoria Atual">
<img src="images/banner-diretoria-atual.jpg" alt="" /></a><p>Diretoria Atual</p>
<div style="display: none;">
<a href="images/banner-diretoria-atual.jpg" title="Imagem 2">
<img src="images/banner-diretoria-atual.jpg" alt="" /></a>
</div><!-- /none -->
</li>
</ul><!-- /fotos -->
Não achei nenhuma configuração de galeria no plugin.
Então ao disparar da maneira básica:
jQuery(document).ready(function(){
jQuery('.lightbox a').lightBox({
txtImage: 'Imagem',
txtOf: 'de'
});
});
O que o plugin fez, foi juntar todas as imagens numa única galeria de 9 imagens no total.
Mas na verdade, eu queria que cada LI, fosse um album separado dos demais.
Sendo a primeira galeria, com 4 imagens, a segunda com 3, e a ultima com 2 imagens.
Bom, eu poderia muito bem trocar de plugin, usar um fancybox, ou sei lá.. porém apenas pelo desafio, resolvi de uma maneira bem simples essa situação de: criar galerias diferentes para uma mesma classe html, com o plugin jQuery.lightBox:
jQuery(document).ready(function(){
jQuery('.lightbox').each(function(){
$( this ).find('a').lightBox({
txtImage: 'Imagem',
txtOf: 'de'
});
});
});
Dessa forma, o plugin vai rodar um grupo(cada li), um de cada vez, e vai separou como eu queria.
é isso. =)
Link deste post
Tags: lightbox
29dez2011
Dúvida que vi no fórum.
Pegar o valor da tag title de um iframe, e colocar ele em um titulo do lado de fora, do documento pai.
Não é ‘tão simples’ assim, e notei um probleminha: ‘o iframe precisa ser carregado antes de tentarmos pegar o conteúdo dele’.
Bom, resolvi dessa forma:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#menu a').click(function( e ){
jQuery('#content').load(function(){
var titulo = jQuery('#content').contents().find('title').text();
jQuery('#titulo').text( titulo );
});
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="home.html" target="content">Home</a></li>
<li><a href="cadastro.html" target="content">Cadastro</a></li>
<li><a href="contato.html" target="content">Contato</a></li>
</ul><!-- /menu -->
<h1 id="titulo">Home</h1>
<iframe name="content" id="content" src="home.html" width="99.9%" frameborder="0" scrolling="no" ></iframe>
</body>
</html>
Por esse motivo, depois do clique, eu aguardo o evento ‘onload’ do iframe:
jQuery('#content').load(function(){
Sse vc não quiser incorporar a lib jQuery, e também para provar que jQuery é apenas javascript, segue a mesma funcionalidade, usando apenas js puro:
function id( el )
{
return document.getElementById( el );
}
window.onload = function()
{
id('content').onload = function()
{
var titulo = this.contentWindow.document.getElementsByTagName('title')[0].innerHTML;
id('titulo').innerHTML = titulo;
};
}
é isso =)
Se for útil, comente e compartilhe. Esse é o único ‘pagamento’ que peço pelos códigos(conhecimento) que disponibilizo.
Link deste post
29dez2011
Eu já postei aqui no meu blog, como carregar conteudo com ajax em div, daí, aprimorei aquele código, e mostrei como carregar conteudo com ajax, colocando também um gif de loading.. e também como fazer tudo isso de cima, ainda trocando a URL, e usando um plugin na página interna.
Hoje é dia de carregar várias divs ‘separadas’, várias áreas diferentes com ajax.
Já vi no fórum um cara(com dúvida) resolvendo isso, de uma forma ‘natural’ do ponto de vista de pensamento humano, mas terrível para performance e manutenção do site.
O código que ele usou era mais ou menos assim:
jQuery(document).ready(function(){
var sidebar = jQuery('#sidebar');
var content = jQuery('#content');
var other = jQuery('#other');
jQuery('#menu a').click(function( e ){
e.preventDefault();
if( jQuery( this ).attr('href')=='home.html' )
{
sidebar.load('home_sidebar.html');
content.load('home_content.html');
other.load('home_other.html');
}
else if( jQuery( this ).attr('href')=='cadastro.html' )
{
sidebar.load('cadastro_sidebar.html');
content.load('cadastro_content.html');
other.load('cadastro_other.html');
}
});
});
Ou seja, a cada clique em um link do menu, ele fazia 3 requests. Um para cada ‘área’ do site.
Tinha que manter 3 arquivos distintos para cada link, e esse jogo de if/else para saber quais arquivos ele deve invocar.
Isso deve ter um ‘mau cheiro’.
A cada clique fazer 3 requisições, e ter que manter 3 arquivos separados para cada área.. além de que o site ‘não vai funcionar corretamente’, se o suporte a js estiver desabilitado… muitos motivos para evidenciar que algo está errado.
Mas então, o que podemos fazer?
A minha sugestão, é aproveitar o ótimo parser de HTML da lib jQuery, fazer um único request, e então direcionar cada conteúdo para o local específico.
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var sidebar = jQuery('#sidebar');
var content = jQuery('#content');
var other = jQuery('#other');
request( 'home.html' );
function m_load( data )
{
var text = jQuery( '<div>'+data+'</div>' );//forçando o parser
sidebar.html( text.find('#sidebar').html() );
content.html( text.find('#content').html() );
other.html( text.find('#other').html() );
jQuery(document).attr( 'title', text.find('title').html() );
}
function request( file )
{
jQuery.ajax({
url: file,
success: function( data )
{
m_load( data );
}
});
}
jQuery('#menu a').click(function( e ){
e.preventDefault();
request( jQuery( this ).attr('href') );
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="home.html">Home</a></li>
<li><a href="cadastro.html">Cadastro</a></li>
<li><a href="contato.html">Contato</a></li>
</ul><!-- /menu -->
<div id="sidebar">
</div><!-- /sidebar -->
<div id="content">
</div><!-- /content -->
<div id="other">
</div><!-- /other -->
</body>
</html>
Note que além de fazer o parser do retorno:
var text = jQuery( '<div>'+data+'</div>' );//forçando o parser
sidebar.html( text.find('#sidebar').html() );
content.html( text.find('#content').html() );
other.html( text.find('#other').html() );
eu também faço a troca do title do documento:
jQuery(document).attr( 'title', text.find('title').html() );
Se vc tiver o firebug instalado, confira na aba Net|Rede -> xhr que faço apenas uma requisição.
Link deste post
25nov2011
Vamos lá.. esse post é mais ou menos uma mescla de outros 3 posts meus.
Nesse script eu vou, carregar conteudo com ajax(usando jQuery), vou deixar o lightbox funcionando, e também fazer com que a URL mude.
Para que o visitante possa dar F5, e o conteudo “continuar lá”(sem voltar para a index). E também, para que ele consiga sei lá, enviar para um amigo, uma página interna do seu site.
Bom, o código javascript ficou assim:
$(document).ready(function(){
var content = $('#content');
//pre carregando o gif
loading = new Image(); loading.src = 'ico-loading.gif';
$('#menu a').click(function( e ){
var arq = pega_arq( $( this ).attr('href') );
abre( arq, content );
});
/* iniciando com a home */
abre( pega_arq( document.location.href ), content );
});
function abre( href, content ){
content.html( '<img src="ico-loading.gif" />' );
$.ajax({
url: href,
success: function( response ){
content.delay(1000).hide().html( response ).fadeIn();
init_plugins( href );
}
});
}
function pega_arq( url ){
var file = url.split('#');
return ( file[1] ) ? file[1]+'.html' : 'home.html';
}
function init_plugins( href )
{
if( href=='lightbox.html' )
{
$('#gallery a').click(function( e ){
e.preventDefault();
})
$('#gallery').lightBox();
}
}
É isso. Comentem! Sério.. se vc usar, deixa um comentário aqui..
Link deste post
Tags: lightbox
