Simples Tooltip com Jquery.. plugin vTip pode ser baixado aqui.
<a href="http://www.vertigo-project.com" title="This is an example of a link tooltip." class="vtip">Link Tooltip</a>
<img src="http://www.vertigo-project.com/vertigo.png" title="This is an image!" class="vtip" />
<div class="vtip" title="This tooltip shows for the whole div!">This div has a tooltip.</div><
para implementar é só adiiconar a class vtip e botar um title.
dúvidas só comentar.
Fala galera, bom muitos já devem de saber mas como o padrão XHTML 1.0 Strict não nos permite usar uns códigos que usavamos no padrão Transitional, então para ajudar a validação do seu site no padrão Strict aqui tem uma solução com Jquery para substituir o famoso target="_blank".
Então vou postar a solução simples e explicar como funciona, segue o código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<meta http-equiv="Content-Language" content="pt-br" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
$(function() {
$("a[rel~=external]").click(function() {
$(this).attr("target","_blank");
});
});
/* ]]> */
</script>
<style type="text/css">
body { font-family: Arial; font-size: 12px; }
ul li { width: 500px; heigth: 50px; display: block; background: #ccc; margin: 2px; padding: 5px; }
ul li a { color: white }
ul li:hover { background: #666; color: #f4f4f4 }
</style>
</head>
<body>
<ul>
<li><a href="http://www.google.com.br" rel="external">google.com.br</a></li>
</ul>
</body>
</html>
Bom como o que acontece então?
Simples ao clicar em qualquer link que conter a tag rel="external", irar ser adicionado a tag target="_blank".
Isso é o suficiente parar validar seu código. A tag target="_blank" só sera inclusa quando você utilizar o rel="external".
Espero que tenham gostado e até a próxima.
Ae galera segue um exemplo que fica bem legal com Jquery também pode-se usar em outras partes do seu site como por exemplo menus ou algo do tipo.
Quando resolvi bolar este tutorial foi para parte de faq de um site qualquer.
bom vamos ao código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<meta http-equiv="Content-Language" content="pt-br" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
$(function() {
//aqui escondo todas as linhas que estão com a classe .esconde
$(".esconde").hide();
//agora em cada linha que o usuário clicar será mostrado a próxima linha que possui a classe .esconde
$("ul li").click(function() {
$(this).next(".esconde").slideToggle(300);
});
});
/* ]]> */
</script>
<style type="text/css">
body { font-family: Arial; font-size: 12px; }
ul li { width: 500px; heigth: 50px; display: block; background: #ccc; margin: 2px; padding: 5px; }
ul li:hover { background: #666; color: #f4f4f4 }
.esconde { background: white !important; border: solid #ccc; border-width: 1px 0; }
</style>
</head>
<body>
<ul>
<li>1. Pergunta Um ?</li>
<li class="esconde">bla bla bla bla bla bla bla bla bla bla bla</li>
<li>2. Pergunta Dois ?</li>
<li class="esconde">bla bla bla bla bla bla bla bla bla bla bla</li>
<li>3. Pergunta Três ?</li>
<li class="esconde">bla bla bla bla bla bla bla bla bla bla bla</li>
</ul>
</body>
</html>
o jquery está comentado o resto é tranquilaço..
só copiar o código e colar em um bloco de notas e ver o resultado..
qualquer dúvida.. prendem o grito
[]'s.
Plugin para deixar cantos de elementos html arredondados.
Bom primeiramente vamos baixar a última versão do Jquery, no exemplo eu testei com a versão 1.3.2. (aqui).
Após realizado o download do Jquery vamos baixar o plugin jQuery Corner (aqui).
Vamos ao html agora..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt-br" />
<title>Cantos Arredondados</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
$().ready(function(){
$("#hp").corner("round");
});
/* ]]> */
</script>
</head>
<body>
<div id="hp">
<p>Conteudo aqui</p>
<p>Conteudo aqui</p>
<p>Conteudo aqui</p>
<p>Conteudo aqui</p>
<p>Conteudo aqui</p>
</div>
</body>
</html>
Muito simples :D
Veja aqui mais exemplos:
http://malsup.com/jquery/corner/
Feito até a próxima.
[]'s
Ae galera.. hoje vou demonstrar um exemplo bem simples e de grande utilidade. Vamos carregar um arquivo atráves do Jquery com o método load().
Vou usar um exemplo bem simples com 2 radio buttons onde as opções serão, Pessoa Física e Pessoa Jurídica.
Bom primeiramente vamos criar nosso arquivo html :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt-br" />
<title>Jquery - Carrega Arquivo em Div</title>
<script type="text/javascript" src="/andre/abas/ui/jscripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
$().ready(function(){
$("#cliente_pj").click(function() {
$("#load").load('/andre/abas/pfpj.php?tipo=pj',carregando('#load'));
});
$("#cliente_pf").click(function() {
$("#load").load('/andre/abas/pfpj.php?tipo=pf',carregando('#load'));
});
});
var divnome;
var carregando = function(divnome) {
$(divnome).html("Carregando....");
};
/* ]]> */
</script>
</head>
<body>
<p><strong>Tipo de Pessoa:</strong></p>
<p><input name="tp_cliente" id="cliente_pj" value="pj" type="radio"> <label for="cliente_pj">Pessoa JurÃdica</label></p>
<p><input name="tp_cliente" id="cliente_pf" value="pf" type="radio"> <label for="cliente_pf">Pessoa FÃsica</label></p>
<br />
<div id="load" style="width: 300px; height: 100px; border: 1px solid #ccc;"></div>
</body>
</html>
eu criei a função carregando onde nela vc vai passar um seletor onde vc vai querer que carregue seu arquivo.
criado nosso arquivo html, agora vamos criar um arquivo php, eu chamei ele de pjpf.php
if(isset($_GET)) {
if ($_GET['tipo'] == "pj") {
echo "Pessoa Jurídica.";
} else {
echo "Pessoa Física.";
}
}
O legal disso que posso passar parametros via GET ou POST para minerar melhor os dados :)..
qualquer dúvidas ou sugestões :)
[]'s
Fala galera, tudo beleza?
Seguinte.. essa semana eu estava desenvolvendo um site para um cliente e houve a necessidade de pegar dados sobre o Clima aqui da nossa cidade (Santa Maria - RS).
Ai pesquisando na internet achei um jeitinho em PHP de pegar informações de um outro site :D
Abaixo segue o código.. bem simples
$ch = curl_init();
$timeout = 0;
curl_setopt($ch, CURLOPT_URL, 'http://tempo1.cptec.inpe.br/cidades/previsao.do?parameter=estendida&id=4599');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$conteudo = curl_exec ($ch);
curl_close($ch);
$conteudo = utf8_encode($conteudo);
preg_match_all('/div id="sub3"(.+)div id="mini"/s', $conteudo, $array);
$dados = $array[0][0];
echo $dados;
Aqui vai uma breve introdução sobre a biblioteca cURL do PHP
O PHP suporta a libcurl, uma biblioteca criada por Daniel Stenberg, que permite a você conectar e comunicar com vários tipos diferentes de servidor com vários tipos diferentes de protocolos. libcurl atualmente suporta os protocolos http, https, ftp, gopher, telnet, dict, file, e ldap. libcurl também suporta certificados HTTPS, HTTP POST, HTTP PUT, upload com FTP (isto também pode ser feito com a extensão de ftp do PHP), upload baseado em formulário HTTP, proxies, cookies, e autenticação usuário+senha.
Mais informações clique aqui.
Voltando ao código nos gravamos o site na variável $conteudo.
Ai com a função preg_match_all defino com expressões regulares e pequenos trechos de código o que realmente eu quero pegar.. no caso eu pego o conteúdo que está entre os códigos..
div id="sub3"
....
div id="mini"
e após isso o conteúdo fica salvo em um array que denominei de $array.
ai no final eu apenas imprimo a posição onde se encontra o conteúdo dentro do array..
Seria isso.. qualquer dúvidas prende o grito :)
PS: Ai o código esta bem simples.. mas depois você poderá tratar os dados que obter, com str_replace e algumas outras funções para deixar os dados, digamos que mais apresentaveis :)
Outra coisa super importante, ali onde eu coloquei a função preg_match_all deverá colocar as tags das Div's corretamente.
[]'s
Ae galera beleza?
Bom hoje pela manhã estava desenvolvendo um sistema e estava fazendo um formulário do tipo wizard.
Então ao chegar no último passo do meu formulário eu adiciono o botão que submete meus dados. Só que dai eu estava com um probleminha, pois meu sistema, possui uma navegação dos passos, ai quando eu clico no úlitmo passo mais de uma vez ele adiciona o botão mais de uma vez.
Então eu descobri um jeitinho muito simples com Jquery de como verificar se determinado elemento ou seletor existe.
Exemplo:
if ($(".wizardend").length > 0) {
alert("O Botão já foi adicionado");
}
Simples, não?
Qualquer dúvida, comentar!
Abraços!
