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
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!
Bom pessoal hoje eu estava trabalhando em um projeto e descobri com um colega de trabalho um plug-in para jquery de mascaras de campos de texto ;DD
Primeiramente baixe o plug-in aqui ou acesse o site do mesmo aqui.
Depois de realizar o download do mesmo, inclua no seu cabeçalho html..
feito isto, ainda no cabeçalho do seu html..
vamos incluir o seguinte código..
var masks = {
set : function() {
$(".mask-cpf").mask("999999999-99");
$(".mask-cnpj").mask("99.999.999/9999-99");
$(".mask-cep").mask("99.999-999");
$(".mask-telefone-nacional").mask("(99) 9999-9999");
}
};
$(function() {
masks.set();
});
ai depois é só incluir o campos de texto..
exemplo abaixo...
CEP: <input type="text" name="cep" id="cep" class="mask-cep" />
CPF: <input type="text" name="cpf" id="cpf" class="mask-cpf" />
bom por enquanto é isso..
caso tiveres dificuldade quanto a implementação do mesmo..
só prender o gritoo..
[]'s
Postagens mais antigas Página inicial
