Archive for category JQuery

Ordenar tabela por linha individual – JQuery

Posted by mateusgamba in JQuery on 28 de Agosto de 2012

Bom galera, esses dias precisei fazer uma função para movimentar as linhas de uma tabela tanto para cima como para baixo, para o usuário escolher em que posição quer que a linha fique.

Exemplo Funcionando

Ai fiz esse código bem simples utilizando JQuery, e no mesmo expliquei +/- como funciona, qualquer coisa só deixar comentário que respondo.

Em breve farei utilizando PHP e MySQL

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ordenar Tabela</title>
        
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        
        <script type="text/javascript">

        	$(function(){
				//função que faz a linha descer na tabela
				$(".descer").click(function(){
					var objLinha = $(this).parent().parent(); //Pega o objeto linha <tr>
					$(objLinha).next().after(objLinha); //Abaixo da linha clicada, insere a linha clicada
				});
				
				//função que faz a linha subir na tabela
				$(".subir").click(function(){
					var objLinha = $(this).parent().parent(); //Pega o objeto linha <tr>
					$(objLinha).prev().before(objLinha); //Acima da linha clicada, insere a linha clicada
				});				

			});
		
        </script>
        
	</head>

	<body>
		<table border="1" width="300">
			<tr>
				<td width="100">1</td>
				<td width="100"><a href="javascript:void(0)" class="subir">subir</a></td>
				<td width="100"><a href="javascript:void(0)" class="descer">descer</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td><a href="javascript:void(0)" class="subir">subir</a></td>
				<td><a href="javascript:void(0)" class="descer">descer</a></td>
			</tr>
			<tr>
				<td>3</td>
				<td><a href="javascript:void(0)" class="subir">subir</a></td>
				<td><a href="javascript:void(0)" class="descer">descer</a></td>
			</tr>
			<tr>
				<td>4</td>
				<td><a href="javascript:void(0)" class="subir">subir</a></td>
				<td><a href="javascript:void(0)" class="descer">descer</a></td>
			</tr>
		</table>
	</body>
</html>

Abç

2 comentários

Plugin JQuery Tooltip – gaTooltip

Posted by mateusgamba in JQuery, Plugin, Tooltip on 12 de Maio de 2011

Olá Pessoal

Desenvolvi esse plugin para mostrar uma ToolTip de forma simples. Apesar de ter vários desenvolvidos pela internet, não encontrei nenhum de forma simples, eficiênte e que me agradasse, então resolvi desenvolver.
Estou publicando para possam utilizar e modificar.

DOWNLOAD do código completo com exemplo

Para visualizar, clique aqui

Forma de utilizar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>gaToolTip</title>
		<style type="text/css">
			body { font-family:Arial; font-size:12px; }
			#gaTool { background-color:#EFEFEF; border:1px solid #F00; color:#000; }
			.gaTool { color:#F00; font-weight:bold; }
        </style>    

		<script type=text/javascript src="http://code.jquery.com/jquery-1.6.min.js"></script>
        <script type=text/javascript src="query.gatooltip-1.0.js"></script>

		<script type="text/javascript">
          $(document).ready(function(){
              $(".gaTool").gaToolTip();
          });
        </script>
    </head>   
    <body>
    	<h1>gaToolTip - Passe o mouse sobre as palavras em vermelho</h1>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo <span class="gaTool" title="Demostração ToolTip">ligula</span> eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis <span class="gaTool" title="?">parturient montes</span>, nascetur ridiculus mus.</p>
    </body>
</html>

Qualquer sugestão ou bugs que encontrarem, se possível me informem.

Até a próxima.

7 comentários

Autocomplete + JQuery + ASP – Atualizado

Posted by mateusgamba in ASP, JQuery, Plugin on 12 de Abril de 2011

Olá

Pelo que percebi e pelo pessoal que entrou em contato, o meus post sobre Autocomplete ficou desatualizado e com os links quebrados, então resolvi atualizar ele e acrescentar algumas coisas novas e interessantes.

A imagem a seguir mostrar um exemplo de aonde queremos chegar:

Vamos começar pelo banco de dados

Banco de dados que estou utilizando é o Microsoft SQL SERVER 2008

Código para criação da tabela:

create table contatos (
	codigo    int           not null,
	nome      varchar(100)  not null,
	telefone  varchar(11)   null,
	email     varchar(100)  null
)
go

Agora vamos inserir alguns dados manualmente

INSERT INTO contatos(codigo, nome, telefone, email) VALUES (1, 'Mateus', '4833552211','mateusgamba@gmail.com')
INSERT INTO contatos(codigo, nome, telefone, email) VALUES (2, 'Monique', '4888040521','monique@hotmail.com')
INSERT INTO contatos(codigo, nome, telefone, email) VALUES (3, 'Marcelo', '4833552123','marcelo@gmail.com')
INSERT INTO contatos(codigo, nome, telefone, email) VALUES (4, 'Gledson', '4833122378','gledson@yahoo.com')

Com o banco de dados pronto, vamos dar início ao desenvolvimento.

Vamos precisar do framework Jquery e do plugin Autocomplete com seu CSS

Agora irei mostrar 3 exemplos interessantes e diferentes de usar o Autocomplete com Jquery.

1 – Exemplo mais simples:

exemplo01.asp

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Auto Complete - Exemplo 1</title>

        <link href="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.5.2.min.js" language="javascript"></script>
        <script src="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js" language="javascript"></script>

        <script type="text/javascript" language="javascript">

			$(document).ready(function(){
				//Ao digitar executar essa função
				$("#nome").focus().autocomplete("exemplo01_nomes.asp")
			});
			
		</script>
    </head>

    <body>
    	<h1>Autocomplete com Jquery em ASP - Exemplo 1</h1>
    	Nome: <input name="nome" id="nome" type="text" autocomplete="off" />
    </body>
</html>

exemplo01_nomes.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
	' Parametros de Conexao ao Banco
	SERVIDOR_DO_BANCO = "localhost"
	NOME_DO_BANCO = "agenda"
	USUARIO_DO_BANCO = "mateus"
	SENHA_DO_BANCO = "123456"

	' Conexao com o Banco de dados
	Dim conexao
	Set conexao = Server.CreateObject("ADODB.Connection")
	conexao.Open = "Provider=MSDASQL;Driver={SQL Server};Server="&SERVIDOR_DO_BANCO&";Database="&NOME_DO_BANCO&";UID="&USUARIO_DO_BANCO&";PWD="&SENHA_DO_BANCO&";" 'Efetua a Conexao

	' SQL de pesquisa
	sql = "SELECT codigo, nome FROM contatos ORDER BY nome ASC"
	Set query = conexao.execute(sql)
	While Not query.eof
		' Lista o nome
		response.write query("nome")&"|"&query("codigo")&vbCrLf
		query.movenext
	Wend

	Set query = Nothing
	Set conexao = Nothing
%>

Esse primeiro exemplo mostra de uma forma simples como utilizar o autocomplete, não há necessidades de passar parâmetros, pois é carregado os 10 primeiros nomes da resposta do SQL em uma lista do javascript, assim não precisando consultar no banco de dadis a cada caracter digitado.

2 – Exemplo mais completo

exemplo02.asp

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Auto Complete - Exemplo 2</title>

        <link href="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.5.2.min.js" language="javascript"></script>
        <script src="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js" language="javascript"></script>

        <script type="text/javascript" language="javascript">

			$(document).ready(function(){
				//Ao digitar executar essa função
				$("#nome").focus().autocomplete("exemplo02_nomes.asp",{
					minChars: 1 //Número mínimo de caracteres para aparecer a lista
				  , matchContains: true //Aparecer somente os que tem relação ao valor digitado
				  , scrollHeight: 220 //Altura da lista dos nomes
				  , selectFirst: true //Vim o primeiro da lista selecionado
				  , mustMatch: true //Caso não existir na lista, remover o valor
				  , delay: 0 //Tempo para aparecer a lista para 0, por padrão vem 200
				  });
			});

		</script>
    </head>

    <body>
    	<h1>Autocomplete com Jquery em ASP - Exemplo 2</h1>
    	Nome: <input name="nome" id="nome" type="text" autocomplete="off" />
    </body>
</html>

exemplo02_nomes.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
	' Parametros de Conexao ao Banco
	SERVIDOR_DO_BANCO = "localhost"
	NOME_DO_BANCO = "agenda"
	USUARIO_DO_BANCO = "mateus"
	SENHA_DO_BANCO = "123456"

	' Conexao com o Banco de dados
	Dim conexao
	Set conexao = Server.CreateObject("ADODB.Connection")
	conexao.Open = "Provider=MSDASQL;Driver={SQL Server};Server="&SERVIDOR_DO_BANCO&";Database="&NOME_DO_BANCO&";UID="&USUARIO_DO_BANCO&";PWD="&SENHA_DO_BANCO&";" 'Efetua a Conexão
	
	valor = Replace(Request.QueryString("q"),"'","") 'Parâmetro do campo nome, o "q" é padrão do componente autocomplete

	' SQL de pesquisa
	sql = "SELECT codigo, nome FROM contatos where nome like '"&valor&"%' ORDER BY nome ASC"
	Set query = conexao.execute(sql)
	While Not query.eof
		' Lista o nome
		response.write query("nome")&"|"&query("codigo")&vbCrLf
		query.movenext
	Wend
	Set query = Nothing
	Set conexao = Nothing
%>

Esse exemplo permite trazer somente os nomes que existem no banco de dados, caso não exista, é limpado o campo automaticamente.

3 – Exemplo retornando valores

exemplo03.asp

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Auto Complete - Exemplo 3</title>

        <link href="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.5.2.min.js" language="javascript"></script>
        <script src="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js" language="javascript"></script>

        <script type="text/javascript" language="javascript">

			$(document).ready(function(){
				//Ao digitar executar essa função
				$("#nome").focus().autocomplete("exemplo03_nomes.asp",{
					  minChars: 1 //Número mínimo de caracteres para aparecer a lista
					, matchContains: true //Aparecer somente os que tem relação ao valor digitado
					, scrollHeight: 220 //Altura da lista dos nomes
					, selectFirst: true //Vim o primeiro da lista selecionado
					, mustMatch: true //Caso não existir na lista, remover o valor
					, delay: 0 //Tempo para aparecer a lista para 0, por padrão vem 200
				});
				
				//Quando selecionar valor pegar retorno. O retorno nesse caso são: Nome|Código
				$("#nome").result(function(event, retorno) {
					if (retorno==undefined)
						$("#codigo").val("");
					else
						$("#codigo").val(retorno[1]);
				});				
			});

		</script>
    </head>

    <body>
    	<h1>Autocomplete com Jquery em ASP - Exemplo 3</h1>
    	Nome: <input name="nome" id="nome" type="text" autocomplete="off" />
        <br/>
        <br/>
        Código: <input name="codigo" id="codigo" type="text" disabled="disabled" />
    </body>
</html>

exemplo03_nomes.asp

<%
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
	' Parametros de Conexao ao Banco
	SERVIDOR_DO_BANCO = "localhost"
	NOME_DO_BANCO = "agenda"
	USUARIO_DO_BANCO = "mateus"
	SENHA_DO_BANCO = "123456"

	' Conexao com o Banco de dados
	Dim conexao
	Set conexao = Server.CreateObject("ADODB.Connection")
	conexao.Open = "Provider=MSDASQL;Driver={SQL Server};Server="&SERVIDOR_DO_BANCO&";Database="&NOME_DO_BANCO&";UID="&USUARIO_DO_BANCO&";PWD="&SENHA_DO_BANCO&";" 'Efetua a Conexão
	
	valor = Replace(Request.QueryString("q"),"'","") 'Parâmetro do campo nome, o "q" é padrão do componente autocomplete

	' SQL de pesquisa
	sql = "SELECT codigo, nome FROM contatos where nome like '"&valor&"%' ORDER BY nome ASC"
	Set query = conexao.execute(sql)
	While Not query.eof
		' Lista o nome
		response.write query("nome")&"|"&query("codigo")&vbCrLf
		query.movenext
	Wend
	Set query = Nothing
	Set conexao = Nothing
%>

Esse exemplo é bem semelhante ao Exemplo 2, a única diferença é que retorna o codigo do contato para o campo Código. Caso não exista o valor digitado, além de limpar o campo Nome é limpado o campo Código também.

Clique aqui e baixe os exemplos

É isso ai pessoal.

Até a próxima.

27 comentários

Pegar valor Radio Button com JQuery

Posted by mateusgamba in JQuery on 18 de Outubro de 2010

Olá

O código que estou postando abaixo mostra como pegar o valor de um grupo de Radio Buttons. Existem diversos códigos para pegar o valor, mas costumo utilizar esse:

<html>
	<head>
		<title>Pegar valor Radion Button com Jquery</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        
		<script type="text/javascript">
			
			$(document).ready(function() {
				$('#pegar_valor').click(function() {
					var valor = "";
					//Executa Loop entre todas as Radio buttons com o name de valor
					$('input:radio[name=valor]').each(function() {
						//Verifica qual está selecionado
						if ($(this).is(':checked'))
							valor = parseInt($(this).val());
					})
					alert(valor);
				})
			})
			
		</script>
        
	</head>
	
    <body>
		
        <input name="valor" type="radio" value="1" />Valor 1
        <br />
        
        <input name="valor" type="radio" value="2" />Valor 2
        <br />
        
        <input name="valor" type="radio" value="3" />Valor 3
        <br />
        
        <input name="valor" type="radio" value="4" />Valor 4
        <br />
        
        <input name="valor" type="radio" value="5" />Valor 5
        <br />
        
        <input type="button" name="pegar_valor" id="pegar_valor" value="Mostrar Valor"/>

	</body>
</html>

Exemplo online

Até a próxima

11 comentários

Trabalhando com templates em JQuery

Posted by mateusgamba in JQuery, Plugin, Templates on 5 de Outubro de 2010

Olá

JQuery agora tem oficialmente um plugin para trabalhar com templates

Não cheguei a utilizar ainda, mais quando sobrar um tempo vou desenvolver algo

Dêem uma olhada nesse link:

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-working-with-the-official-jquery-templating-plugin/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+nettuts+%28Nettuts%2B%29

Deixe um comentário

Entendendo prepend(), prependTo(), appeend() e appeendTo() do Jquery

Posted by mateusgamba in JQuery on 22 de Setembro de 2010

Olá Pessoal

Quando comecei utilizar o framework JQuery, cheguei a um certo momente que precisei desenvolver uma aplicação que gerasse um código dinâmicamente, nesse caso DOM com JQuery. Como estava aprendendo JQuery resolvi pesquisar para não precisar misturar código javascript, ai pesquisei… pesquisei até encontrar 4 maneiras, que foram o prepend(), prependTo(), appeend() e appeendTo(). Sendo que uma das minhas dúvidas naquela época era qual utilizar para meu projeto.

Nesse Post mostrarei como utilizar e quando utilizar cada um desses métodos:

prepend() ( visualizar exemplo )

Esse método permite adicionar conteúdo ao INÍCIO de um elemento HTML. Este conteúdo pode ser um seletor, um elemento HTML, uma string HTML ou um objeto jQuery.

Exemplo:

<html>
	<head>
		<title>Utilizando o método prepend() do Jquery</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        
		<script type="text/javascript">
        	$(document).ready(function() {
            	$("#prepend").click(function () {
                	$('.conteudo').prepend("<div class='novo_conteudo'>Novo conteúdo Prepend()</div>");
				});  
			})
			
		</script>
        
		<style type="text/css">
            .conteudo { padding:5px; border:1px solid #000; width:200px; height:200px; }
            .novo_conteudo { padding:5px; border:1px solid #F00; width:100px; height:50px; }
        </style>
        
	</head>
	
    <body>
		
        <div class="conteudo">Conteúdo Normal</div>

	 	<br/>
        
        <input type="button" name="prepend" id="prepend" value="Executar Prepend()">
        
	</body>
</html>

Ao executarmos esse exemplo e clicarmos algumas vezes no botão “Executar Prepend()” veremos que irá inserir o
<div class=’novo_conteudo’>Novo conteudo Prepend()</div> acima do Conteúdo Normal, e ao clicarmos em exibir o código fonte o seguinte coóigo será exibido:

<div class="conteudo">
	<div class="novo_conteudo">Novo conteudo Prepend()</div>
	<div class="novo_conteudo">Novo conteudo Prepend()</div>
	Conteudo Normal
</div>

Com o método prepend() o conteúdo sempre será inserido após o <div class=”conteudo”>.

append() ( visualizar exemplo )

Esse método permite adicionar conteúdo ao FINAL de um elemento HTML. Este conteúdo pode ser um seletor, um elemento HTML, uma string HTML ou um objeto jQuery.

Exemplo:

<html>
	<head>
		<title>Utilizando o método append() do Jquery</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        
		<script type="text/javascript">
        	$(document).ready(function() {
            	$("#append").click(function () {
                	$('.conteudo').append("<div class='novo_conteudo'>Novo conteúdo Append()</div>");
				});  
			})
			
		</script>
        
		<style type="text/css">
            .conteudo { padding:5px; border:1px solid #000; width:200px; height:200px; }
            .novo_conteudo { padding:5px; border:1px solid #F00; width:100px; height:50px; }
        </style>
        
	</head>
	
    <body>
		
        <div class="conteudo">Conteúdo Normal</div>

	 	<br/>
        
        <input type="button" name="append" id="append" value="Executar Append()">
        
	</body>
</html>

Ao executarmos esse exemplo e clicarmos algumas vezes no botão “Executar Append()” veremos que irá inserir <div class=’novo_conteudo’>Novo conteudo Append()</div> abaixo do Conteúdo Normal, e ao clicarmos em exibir o código fonte o seguinte codigo será exibido:

<div class="conteudo">
	Conteudo Normal
	<div class="novo_conteudo">Novo conteudo Append()</div>
	<div class="novo_conteudo">Novo conteudo Append()</div>
</div>

Com o método append() o conteúdo sempre será inserido antes da </div>.

prependTo() ( visualizar exemplo )

Esse método é usado quando queremos recortar algum conteúdo da página e colar para dentro de um seletor. Esse conteúdo é inserido no INÍCIO desse seletor. Executado o exemplo abaixo fica mais fácil de se entender.

<html>
	<head>
		<title>Utilizando o método prependTo() do Jquery</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        
		<script type="text/javascript">
        	$(document).ready(function() {
            	$("#prependto").click(function () {
					$(".novo_conteudo").prependTo(".conteudo"); 
				});  
			})
			
		</script>
        
		<style type="text/css">
            .conteudo { padding:5px; border:1px solid #000; width:200px; height:200px; }
            .novo_conteudo { padding:5px; border:1px solid #F00; width:100px; height:50px; }
        </style>
        
        
	</head>
	
    <body>
		
        <div class="novo_conteudo">Novo conteúdo prependTo()</div>
        
        <div class="conteudo">Conteúdo Normal</div>

	 	<br/>
        
        <input type="button" name="prependto" id="prependto" value="Executar prependTo()">
        
	</body>
</html>

Ao executarmos esse exemplo, e clicarmos no botão “Executar prependTo()” veremos que irá recortar o conteúdo <div class=”novo_conteudo”>Novo conteúdo prependTo()</div> e colocar dentro do <div class=”conteudo”>Conteúdo Normal</div>, ficando: 

<div class="conteudo">
	<div class="novo_conteudo">
		Novo conteúdo prependTo()
	</div>
	Conteúdo Normal
</div>

appendTo() ( visualizar exemplo )

Esse método é usado quando queremos recortar algum conteúdo da página e colar para dentro de um seletor. Esse conteúdo é inserido no FINAL desse seletor. Executado o exemplo abaixo fica mais fácil de se entender.

<html>
	<head>
		<title>Utilizando o método appendTo() do Jquery</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        
		<script type="text/javascript">
        	$(document).ready(function() {
            	$("#appendTo").click(function () {
					$(".novo_conteudo").appendTo(".conteudo"); 
				});  
			})
			
		</script>
        
		<style type="text/css">
            .conteudo { padding:5px; border:1px solid #000; width:200px; height:200px; }
            .novo_conteudo { padding:5px; border:1px solid #F00; width:100px; height:50px; }
        </style>
        
        
	</head>
	
    <body>
		
        <div class="novo_conteudo">Novo conteúdo appendTo()</div>
        
        <div class="conteudo">Conteúdo Normal</div>

	 	<br/>
        
        <input type="button" name="appendTo" id="appendTo" value="Executar appendTo()">
        
	</body>
</html>

Ao executarmos esse exemplo, e clicarmos no botão “Executar appendTo()” veremos que irá recortar o conteúdo <div class=”novo_conteudo”>Novo conteúdo prependTo()</div> e colocar dentro do <div class=”conteudo”>Conteúdo Normal</div> antes da </div>, ficando: 

<div class="conteudo">
	Conteúdo Normal
	<div class="novo_conteudo">
		Novo conteúdo prependTo()
	</div>	
</div>

Espero te ajudado, até a próxima pessoal

1 Comentário

Slide com JQuery

Posted by mateusgamba in Cycle, Javascript, JQuery, Slide on 8 de Julho de 2010

Olá pessoal

Desculpem pela demora

Esse Post mostrarei como desenvolver uma aplicação de Slide, como pode ser visualizado na imagem abaixo:
Exemplo 1
Exemplo 2

Para o desenvolvimento vamos precisar dos seguintes arquivos:
Framework Jquery 1.3.2
Plugin cycle

Para ser um exemplo didatico vamos criar uma pasta chamada slides. Dentro dela vamos colocar o jquery-1.3.2.js, jcycle.js e vamos criar os arquivos slide.html (página de apresentação dos slides), slide.css (página de estilo) e outra página com o nome de imagens onde contem as imagens do exemplo, como pode ser vista na imagem abaixo:
Estrutura

Iniciaremos o desenvolvimento pela página slide.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
        <title>Slides</title>
        
		<script src="jquery-1.3.2.js" language="javascript"></script> 
        <script src="jquery.cycle.js" language="javascript"></script>
        
        <link href="estilo.css" type="text/css" rel="stylesheet" />     

		<script type="text/javascript">
			$(document).ready(function() {
				
				$('#conteudo').cycle({
					timeout: 8000, //Tempo da transição
					speed:   400,  //Velocidade da transição
					fx:      'fade', //Tipo
					pager:   '#nav', //A div que vai aprensetar os números do slides
					prev:    '#anterior', //Link para voltar ao slide anterior
					next:    '#proxima' //Link para próximo slide
				});
			});
        </script>           
        
    </head>
    
    <body>
		
        <div class="slide">
			<div class="bloco_navegacao">
                <div id="anterior" class="navegacao">
                    <a href="javascript:void(0)"><strong><</strong>&nbsp; Anterior</a>
                </div> 
                
                <div id="nav" class="nav">
                </div>
                
                <div id="proxima" class="navegacao">
                    <a href="javascript:void(0)">Próxima &nbsp;<strong>></strong></a>
                </div> 
            </div>

            <div id="conteudo">

                <div>
                    <div class="conteudo_img">
                        <img src="imagens/img1.jpg" width="258" height="193"/>
                    </div>
                    
                    <h1>Title 1</h1>
        
                    <div class="texto">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </div>
                </div>
                    
                <div>
                    <div class="conteudo_img">
                        <img src="imagens/img2.jpg" width="258" height="193"/>
                    </div>
                    
                    <h1>Title 2</h1>
        
                    <div class="texto">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </div>
                </div>
                    
                <div>
                    <div class="conteudo_img">
                        <img src="imagens/img3.jpg" width="258" height="193">
                    </div>
                    
                    <h1>Title 3</h1>
        
                    <div class="texto">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                    </div>
                </div>

            </div>
		</div>     
    
    </body>
</html>

slide.css

body {
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
}

.slide {
	width: 500px;
	border: 1px solid #36F;
	display: block;
	padding:5px
}

.slide .navegacao {
	border: 1px solid #000;
	padding: 3px;
	background-color:#BDD2FF;
	width:80px;
	font-weight:bold;
	text-align:center;
	float:left
}

.slide #anterior {
	margin-right:5px;	
}

.slide .bloco_navegacao {
	width:100%;
	display:block;
	height:27px;
}

.slide .navegacao:hover {
	background-color:#ECF1FF;
}

.slide .navegacao a:link {
	text-decoration:none;
	color:#333;
}

.slide .nav,.slide #nav  {
	display:block;	
	float:none;
	padding: 3px;
	margin-top:1px;
	float:left;
}

.slide .nav a {
	border: 1px solid #000;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left:5px;
	padding-right: 5px;
	background-color:#BDD2FF;
	margin-right:5px;
	text-decoration:none;
	color:#000;
}

.slide #nav a.activeSlide { 
	background: #ECF1FF;
}

.slide #conteudo {
	display:block;
}

.slide h1 {
	margin:0;
	font-family:Tahoma, Geneva, sans-serif;
}

.slide #conteudo .conteudo_img {
	float:left;
	margin-right:10px;
	border:1px solid #000;
}

.slide #conteudo .texto{
	padding:10px;
}

Prontinho, agora já está funcionando

Para mais informações sobre esse plugin o endereço é http://jquery.malsup.com/cycle/

Para download clique aqui

Até a próxima pessoal

2 comentários

Auto complete + JQuery + ASP

Posted by mateusgamba in ASP, JQuery on 29 de Março de 2010

POST ATUALIZADO, CLIQUE AQUI

A pedidos estou fazendo esse tutorial
Ele consiste em sugir nomes quando estiver preenchendo um campo, como por exemplo o do google
Exemplo

Vamos começar pelo banco de dados

Banco de dados que estou utilizando é o Microsoft SQL SERVER 2008

Código para criação da tabela:

create table contatos (  
   codigo               int                  not null,  
   nome                 int                  not null,  
   telefone             varchar(11)          null,  
   email                varchar(100)         null,  
)  
go 


Agora vamos inserir alguns dados manualmente

INSERT INTO agenda(codigo, nome, telefone, email) VALUES (1, 'Mateus', '4833552211','mateusgamba@gmail.com')
INSERT INTO agenda(codigo, nome, telefone, email) VALUES (2, 'Monique', '4888040521','monique@hotmail.com')
INSERT INTO agenda(codigo, nome, telefone, email) VALUES (3, 'Marcelo', '4833552123','marcelo@gmail.com')
INSERT INTO agenda(codigo, nome, telefone, email) VALUES (4, 'Gledson', '4833122378','gledson@yahoo.com')

Agora com o banco de dados pronto, vamos precisar dos seguintes arquivos
Framework Jquery 1.3.2
Plugin autocomplete

O framework pode se utilizar a última versão, mas como eu estou acustumado e todos os meus códigos estão nessa versão, então é o qual vou utilizar.
Ao baixar o plugin, vai vim um pacotão de coisas, bem interessante para dar uma estuda mais afundo.
Mas o que irei utilizar desse pacotão é jquery.autocomplete.js e jquery.autocomplete.css.

A estrutura desse exemplo ficara da seguinte maneira:
Estrutura

default.asp é a página que terá o campo autocomplete e o página lista_nomes.asp é onde aparecera os resultados
A pesquisa que iremos fazer é do campo nome da tabela contatos.

default.asp

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Auto Complete</title>
        
        <link href="jquery.autocomplete.css" type="text/css" rel="stylesheet" />
        <script src="jquery-1.3.js" language="javascript"></script>
        <script src="jquery.autocomplete.js" language="javascript"></script>
       
        <script type="text/javascript" language="javascript">
			
			$(document).ready(function(){
				//Ao digitar executar essa função					   
				$("#nome").focus().autocomplete("lista_nomes.asp",{ 
											    minChars: 0 //Número minimo de caracteres para aparecer
											  , matchContains: true //Sempre aparecer somente os que tem relação ao digitado
											  , scrollHeight: 220 //altura da lista dos nomes
											  , selectFirst: false //vim como padrão o primeiro selecionado
				})
				
			})
		
		</script>
    </head>

    <body>
    	<input name="nome" id="nome" type="text" />
    </body>
</html>

lista_nomes.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
	' Parametros de Conexao ao Banco
	SERVIDOR_DO_BANCO = "localhost"
	NOME_DO_BANCO = "agenda"
	USUARIO_DO_BANCO = "mateus"
	SENHA_DO_BANCO = "123456"
	
	' Conexao com o Banco de dados
	Dim conexao
	Set conexao = Server.CreateObject("ADODB.Connection") 
	conexao.Open = "Provider=MSDASQL;Driver={SQL Server};Server="&SERVIDOR_DO_BANCO&";Database="&NOME_DO_BANCO&";UID="&USUARIO_DO_BANCO&";PWD="&SENHA_DO_BANCO&";" 'Efetua a Conexao
	
	' Pega valor
	valor = Request.QueryString("valor")
	
	' SQL de pesquisa
	sql = "SELECT nome FROM contatos WHERE UPPER(nome) like UPPER('%"&valor&"%') AND nome IS NOT NULL GROUP BY nome ORDER BY nome ASC"
	Set query = conexao.execute(sql)
	Do While Not query.eof
		' Lista o nome
		response.write query("nome")&"|"&query("nome")&vbCrLf
		query.movenext
	Loop
	
	Set query = Nothing
	Set conexao = Nothing
%>

Na linha 22 temos dois parametros separados por “|”
O primeiro parâmetro é o item que aparece na pesquisa, por exemplo, se trocar nome pelo código, vai aparecer o código de vez o nome, ou seja, é o resultado
Já o segundo parâmetro não serve para nada, eu até olhei até no código do plugin para confirmar
Como padrão eu sempre deixo repetido os dois parâmetros.

Prontinho

Para o download

14 comentários