Apostila JQUERY by bruno rossi

INDICE SOBRE JAVASCRIPT......................................................................................................2 INTRODUÇÃO JQUERY................................................................................................7 POR ONDE COMEÇAR COM A JQUERY?..................................................................8 JQUERY COM CSS........................................................................................................19 JQUERY COM TEXTO..................................................................................................45 TRABALHANDO COM TABELAS CSS3....................................................................61 TRABALHANDO COM FORMULARIO.....................................................................74 JQUERY EFEITO ANIMADO.......................................................................................91 TRABALHANDO COM IMAGENS.............................................................................99 UPLOAD COM PHP E JQUERY.................................................................................109 FORMULARIO COM PHP E JQUERY.......................................................................116

SOBRE JAVASCRIPT Antes de começarmos a falar de JQURY não podemos nos esquecer do Javascript. O que é JavaScript? É uma linguagem utilizada principalmente para auxílio de desenvolvimento de páginas para a Internet. JavaScript é a mesma coisa que Java? Não, JavaScript é mais simples que Java. Aprender JavaScript é o melhor começo se você quer aprender Java, C, C++, PHP, pois a sintaxe (forma de escrever a linguagem) é semelhante. O que posso fazer com o JavaScript? Você pode tornar suas páginas mais “inteligentes”, com recursos adicionais como: botões que mudam ao passar o mouse em cima, exibir o horário atual, verificar se o preenchimento de um formulário está correto, e muito mais! O JavaScript pode lhe salvar nas horas em que você menos espera, pois as possibilidades de utilização são infinitas. Onde coloco o código JavaScript? O Código JavaScript fica Entre o <script> e o </script>, e dentros da tags <head> e </head>. Ficaremos com a seguinte estrutura:

<html> <head> <title>Título minha página</title> <script> alert("Minha primeira mensagem!") </script> </head> <body> </body> </html>

Entendendo o código: alert("Minha primeira mensagem!");

Exibe uma janela com a frase Minha primeira mensagem! com apenas um botão de Agora é só testar, crie um arquivo com extensão .htm e execute. Há mais três diferentes maneiras de colocar o código JavaScript na página, mas iremos utilizar o método acima em nosso tutorial. 1 – Digite o código em um simples editor de texto mesmo, pode ser o bloco de notas.

2 – Execute no browser.

CARACTERÍSTICAS As seguintes características são comuns a todas as implementações conformantes com o ECMAScript. Imperativa e Estruturada JavaScript suporta os elementos de sintaxe de programação estruturada da linguagem C (por exemplo, if, while, switch). Uma exceção é a questão do escopo: o escopo em blocos ao estilo do C não é suportado, em seu lugar JavaScript utiliza escopo a nível de função. JavaScript 1.7, entretanto, suporta escopo a nível de bloco através do comando let. Como C, JavaScript faz distinção entre expressões e comandos. Uma diferença sintática do C é que a quebra de linha termina automaticamente o comando, sendo o ponto-e-vírgula opcional ao fim do comando. Dinâmica tipagem dinâmica Como na maioria das linguages de script, tipos são associados com valores, não com variáveis. Por exemplo, a variável x poderia ser associada a um número e mais tarde associada a uma string. JavaScript suporta várias formas de testar o tipo de um objeto, incluindo ducktyping. baseada em objetos JavaScript é quase inteiramente baseada em objetos. Objetos JavaScript são arrays associativos, aumentados com protótipos. Os nomes da propriedade de um objeto são strings: obj.x = 10 e obj["x"] = 10 são equivalentes, o ponto neste exemplo é apenas açúcar sintático. Propriedades e seus valores podem ser adicionadas, mudadas, ou deletadas em tempo de execução. A maioria das propriedades de um objeto (e aqueles em sua cadeia de herança via protótipo) pode ser enumerada usando-se uma estrutura de repetição for...in. Javascript possui um pequeno número de objetos padrão da linguagem como window e document. Avaliação em tempo de execução JavaScript inclui a função eval que consegue executar em tempo de execução comandos da linguagem que estejam escritos em uma string. Uso em páginas Web O uso primário de JavaScript é escrever funções que são embarcadas ou incluídas em páginas HTML e que interagem com o Document Object Model(DOM) da página. Alguns exemplos deste uso são: • • •

abrir uma nova janela com controle programático sobre seu tamanho, posição e atributos; validar valores de um formulário para garantir que são aceitáveis antes de serem enviados ao servidor; mudar imagens à medida que o mouse se movimenta sob elas.

SOBRE AJAX

AJAX (acrônimo em língua inglesa de Asynchronous Javascript and XML, em português "Javascript e XML Assíncronos") é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. Foi inicialmente desenvolvida pelo estudioso Jessé James Garret e mais tarde por diversas associações. Descrição • AJAX não é um novo modelo para desenvolvimento web. Os navegadores implementam essa tecnologia desde o ano 2000(no mínimo). Porém sua popularização nos últimos anos tem também trazido consigo muitas outras melhorias para a Web. Tem estimulado a construção de aplicações Web mais dinâmicas e criativas. AJAX não é uma tecnologia, mas um conjunto de tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades. AJAX incorpora em seu modelo: • • •

Exposição e interação dinâmica usando o DOM; Intercâmbio e manipulação de dados usando XML e XSLT; Recuperação assíncrona de dados usando o objeto XMLHttpRequest e XMLHttpResponse; JavaScript fazendo a junção entre os elementos.

O modelo clássico de aplicação web trabalha assim: a maioria das ações do usuário na interface dispara uma solicitação HTTP para o servidor web. O servidor processa algo, recuperando dados, realizando cálculos, conversando com vários sistemas legados, e então retorna uma página HTML para o cliente. É um modelo adaptado do uso original da Web como um agente de hipertexto, porém o que faz a web boa para hipertexto não necessariamente a faz boa para aplicações de software. As principais vantagens das aplicações que utilizam AJAX para determinadas requisições é que os dados trafegados pela rede são reduzidos e o usuário não precisa aguardar a página ser recarregada a cada interação com o servidor.

EXEMPLO AJAX Vejamos um exemplo de um simples pedido em HTTP. <script type="text/javascript" language="javascript"> var http_request = false; function makeRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); // Veja a nota abaixo sobre esta linha } } else if (window.ActiveXObject) { // IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Giving up :( Cannot create an XMLHTTP instance'); return false; } http_request.onreadystatechange = alertContents; http_request.open('GET', url, true); http_request.send(null); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert('Houve um problema com o pedido.'); } } } </script> <span style="cursor: pointer; text-decoration: underline" onclick="makeRequest('iped.xml')"> Clique aqui! </span>

INTRODUÇÃO JQUERY

jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML. Ela foi lançada em janeiro de 2006 no BarCamp de Nova York por John Resig. Usada por cerca de 41% dos 10 mil sites mais visitados do mundo, jQuery é a mais popular das bibliotecas JavaScript. jQuery é uma biblioteca de código aberto e possui licença dual, fazendo uso da Licença MIT ou da GNU General Public License versão 2. A sintaxe do jQuery foi desenvolvida para tornar mais simples a navegação do documento HTML, a seleção de elementos DOM, criar animações, manipular eventos e desenvolver aplicações AJAX. A biblioteca também oferece a possibilidade de criação de plugins sobre ela. Fazendo uso de tais facilidades, os desenvolvedores podem criar camadas de abstração para interações de mais baixo nível, simplificando o desenvolvimento de aplicações web dinâmicas de grande complexidade. A Microsoft e a Nokia anunciaram planos de incluir o jQuery em suas plataformas, a Microsoft adotando-a inicialmente no Visual Studio para uso com o framework AJAX do ASP.NET, e a Nokia na sua plataforma Web Run-Time de widgets. A biblioteca jQuery também tem sido usada no MediaWiki desde a versão 1.16. Funcionalidades Principais funcionalidades do jQuery: * Resolução da incompatibilidade entre os navegadores. * Redução de código. * Reutilização do código através de plugins. * Utilização de uma vasta quantidade de plugins criados por outros desenvolvedores. * Trabalha com AJAX e DOM. * Implementação segura de recursos do CSS1, CSS2 e CSS3.

JQUERY X JAVASCRIPT

Veremos um exemplo básico dentro do javascript e o mesmo exemplo dentro do jquery.

Um código em Javascript para criar um id com o valor "5".

document.getElementById('Teste').value = 5; O mesmo código em jQuery.

$('#Teste').val(5); Conseguiu perceber que moleza ficou no jquery!

POR ONDE COMEÇAR COM A JQUERY? Para começar, nós precisamos de uma cópia da bliblioteca jQuery. Neste site você pode encontrar todos os plugins jQuery: http://jquery.com/ BAIXAR PLUGIN JQUERY 1 – Acesse o site: http://jquery.com/.

2 â&#x20AC;&#x201C; Clicando no menu Plugins observe que vai lhe trazer vĂĄrios tipos de projeto.

3 â&#x20AC;&#x201C; Clique no menu jQuery e sem seguida clique no menu Download, vai trazer uma lista de bibliotecas jQuery.

4 – Vamos baixar a versão 1.3.1, clique no link selecionado.

5 – Clique no link: jquery – 1.3.1.js

6 – Basta baixar em seu computador.

Esse procedimento pode ser feito para qualquer plugin que deseja utilizar em suas criações.

JQUERY SINTAXE

Com jQuery você selecionar (query) elementos HTML e executar "ações" sobre eles. jQuery Syntax Exemplos $ (this). hide () Demonstra a esconder jQuery () método, escondendo-se o elemento atual HTML. $ ("# test"). hide () Demonstra a esconder jQuery () método, escondendo o elemento com id = "teste". $ ("p"). hide () Demonstra a esconder jQuery () método, escondendo todos os elementos <p>. $ (". test"). hide () Demonstra a esconder jQuery () método, escondendo todos os elementos com class = "teste". A sintaxe jQuery é feito sob medida para a seleção de elementos HTML e executar alguma ação sobre o elemento (s). Sintaxe básica é: $ (seletor) action (). * Um sinal de dólar para definir jQuery * A (seletor) para "consulta (ou encontrar)" elementos HTML * A ação jQuery () para ser realizada no elemento (s) exemplos: $ (this) hide () - esconde elemento atual $ ("p") hide () -. esconde todos os parágrafos $ ("p.test") hide () -. esconde todos os parágrafos com class = "test" $ ("# teste") hide () -. esconde o elemento com id = "teste" jQuery usa uma combinação de XPath e sintaxe CSS selector. A Função Documento Pronto: $ (document). ready (function () { / / Funções jQuery ir aqui ... });

Isso é para evitar qualquer código jQuery de correr antes que o documento terminar de ser carregado (está pronto). Aqui estão alguns exemplos de ações que podem falhar se as funções são executadas antes que o documento está totalmente carregada: * Tentando esconder um elemento que não existe * Tentando obter o tamanho de uma imagem que não é carregado

CRIAR NOSSO PRIMEIRO JQUERY

Para se usar o jQuery é necessário um conhecimento básico em JavaScript e HTML. Crie um arquivo em HTML, faça a referência à biblioteca jQuery neste caso a mesma que acabamos de baixar (usando o mesmo comando para se fazer referência à um arquivo .js qualquer). 1 - Abra Um Editor Neste Caso Pode Ser O Dreamweaver. <script src="jquery-1.3.1.min.js" type="text/javascript"></script>

2 – Crie Um Novo Arquivo Em Javascript, Vamos Deixar Feito A Chamada Em Nosso Arquivo Html.

Vamos criar uma função que irá exibir na tela uma mensagem ao clique do link.

$(document).ready(function () { alert(“Iped cursos de informática online”); }); E salve com nome de: meu_javascript.js.

Veja que foi feita a chamada de ambos os arquivos, a biblioteca + seu javascript.

3 – Agora iremos mudar um pouco nosso javascript, vamos acrescentar mais 3 linhas simples de comandos. $(document).ready(function () { $(“a”).click(function() { alert(“Iped cursos de informática online”); }); }); 4 – Em nosso arquivo html vamos adicionar nosso link que irá chamar a mensagem .

Salve seu arquivo html como: index.html dentro da mesma pasta que se encontra seus arquivos javascript.

5 â&#x20AC;&#x201C; Veja como ficou sua estrutura agora:

6 â&#x20AC;&#x201C; Vamos abrir o arquivo index.html.

7 – Agora clique no link e veja a sua mensagem sem exibida no browser.

ESTE SCRIPT FOI EXECUTADO UTILIZANDO A VERSÃO DO BROWSER OPERA MAIS O MESMO FUNCIONA EM OUTROS BROWSERS COMO INTERNET EXPLORER, FIREFOX. OBS. O BOM DO JQUERY QUE VOCÊ PODE ACRESCENTAR NOVAS FUNÇÕES DENTRO DE SEU JAVASCRIPT.

JQUERY COM CSS Usando alguns comandos em jQuery, é possível alterar a aparência dos documentos, podemos adicionar uma clasee que haja em nossos arquivos CSS, ou até mesmo adiciona o CSS de modo inline, ou seja como atributo style da tag. jQuery tem um método importante para a manipulação de CSS: css () O método css () tem três sintaxes diferentes, para realizar diferentes tarefas. * Css (nome) – Alterar o valor da propriedade CSS * Css (nome, valor) - Defina a propriedade CSS eo valor * Css ({propriedades}) - Conjunto várias propriedades CSS e valores ALTERAR O VALOR DA PROPRIEDADE CSS

Use css (nome) para retornar o valor da propriedade especificado CSS do primeiro elemento encontrados: Veremos um exemplo: $(this).css("background-color"); 1 – Crie uma pasta chamada: jquery_css e vamos utilizar o pacote de biblioteca direto do servidor: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js http://www.google-analytics.com/urchin.js

2 – Abra seu editor e vamos adicionar o seguinte código: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Exemplo 1</title> <style type="text/css"> p {cursor:pointer} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function (){ $("p").click(function () { alert("Altorizado pela equipe da IPED"); $("body").css("background","red"); //alterar a cor de fundo para vermelho dentro do corpo }); }); </script> </head> <body> <p>Clique aqui para alterar a cor de fundo</p> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> /*<![CDATA[*/ _uacct = "UA-294778-1"; urchinTracker(); /*]]>*/ </script> </body> </html>

3 â&#x20AC;&#x201C; Salve com nome exemplo1.html e em seguida abra no seu navegador.

Clique no local informado.

Veja que a cor de fundo da pรกgina foi alterada de acordo com a cor escolhida. CONJUNTO DE PROPRIEDADES CSS E VALOR

Use css (nome, valor) para definir a propriedade CSS especificado para todos os elementos encontrados: Veremos um exemplo: $("p").css("background-color","yellow");

1 â&#x20AC;&#x201C; Baixe a seguinte biblioteca dentro deste link: http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/

Clique no link Minified.

2 â&#x20AC;&#x201C; Salve a biblioteca na mesma pasta que se encontra a outra biblioteca baixada anteriormente. Vamos manter tudo na mesma pasta.

3 – Digite o código abaixo no seu editor: <html>

Chamar biblioteca.

<head> <script type="text/javascript" src="jquery-1.6.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","yellow"); }); }); </script> </head> <body>  <h2>Este e um titulo</h2> <p>Este e um paragrafo.</p> <p>Este e um paragrafo.</p> <button>Agora clique aqui!</button> </body> </html>

4 – Salve com nome de: exemplo2.html dentro da mesma pasta.

5 – Abra seu arquivo exemplo2.html no seu navegador e faça o teste.

6 – Clique no botão Agora clique aqui e veja o resultado.

CONJUNTO DE MÚLTIPLAS CSS PROPRIEDADE / VALOR

Use css ({propriedades}) para definir uma ou mais propriedades CSS / valor pares para os elementos selecionados: Vamos alterar dentro do mesmo arquivo e depois salvar com outro nome $("p").css({"background-color":"yellow","font-size":"200%"});

1 – Digite o seguinte código no editor: <html> <head> <script type="text/javascript" src="jquery-1.6.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"}); }); }); </script> </head> <body>  <h2>Este e um titulo</h2> <p>Este e um paragrafo.</p> <p>Este e um paragrafo.</p> <button>Agora clique aqui!</button> </body> </html>

2 â&#x20AC;&#x201C; Salve com nome de: exemplo3.html dentro da mesma pasta e em seguida abra no navegador.

3 â&#x20AC;&#x201C; Abra agora o arquivo exemplo3.html no navegador em seguida clique no botĂŁo e veja o resultado.

PALAVRA DESTACADA COM CSS

Neste exemplo iremos utilizar uma biblioteca direto do servidor do Jquery, apenas fazer uma chamada, vamos destacar uma palavra clicado no parágrafo. 1 – Abra seu editor e vamos digitar nosso código: <!DOCTYPE html> <html> <head> <style> p { color:blue; font-weight:bold; cursor:pointer; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p> Iped cursos online de informática Temos outros cursos também Venha conhecer nosso sistema De palestras online. </p> <script> var words = $("p:first").text().split(" "); var text = words.join("</span> <span>"); $("p:first").html("<span>" + text + "</span>"); $("span").click(function () { $(this).css("background-color","yellow"); }); </script> </body> </html>

2 â&#x20AC;&#x201C; Salve com o nome de: exemplo4.html e depois abra no navegar.

Clique nas palavras do texto e veja que as mesmas serĂŁo destacadas.

DESTACAR AO PASSAR O CURSOR COM CSS

Neste exemplo veremos o uso do cursor do mouse onde irá fazer um efeito sobre o texto dentro do paragrafo ao passar o cursor sobre o mesmo.a biblioteca Jquery direto do servidor: http://code.jquery.com/jquery-latest.js Como fizemos no exemplo anterior, estamos utilizando 1 – Digite o código no editor: <!DOCTYPE html> <html> <head> <style> p { color:green; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <p>Passe o cursor sobre este texto.</p> <p>Passe aqui tambem.</p> <script> $("p").hover(function () { $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'}); }, function () { var cssObj = { 'background-color' : '#ddd', 'font-weight' : '', 'color' : 'rgb(0,40,244)' } $(this).css(cssObj); }); </script> </body> </html>

2 â&#x20AC;&#x201C; Salve com nome de: exemplo5.html e depois abra no navegador.

Passe o cursor do mouse sobre os textos e veja o resultado.

BOTÃO DE ILUMINAR COM JQUERY CSS

Sempre quis adicionar um pouco de brilho ou brilho aos botões do seu CSS? Talvez, você quer atrair mais a atenção para os seus botões e caixas de texto, tornando-se destacar ou iluminar. Bem, com o jQuery iluminar um plug-in fantastico, você pode fazer exatamente isso. Infelizmente, este plug-in não é totalmente compatível com o Firefox versão 4 ou superior. O plug-in vai funcionar, no entanto, não o outerGlow ser mostrado com Firefox 4 ou superior. 1 – Crie uma pasta chamada botao, depois vamos fazer o download do plugin iluminar, acesse esta pagina: http://www.tonylea.com/2011/jquery-illuminate/

Clique nesta opção.

Clique no botão Salvar, e salve na pasta botão.

2 - Antes de começar é preciso incluir todos os arquivos necessários javascript. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.illuminate.0.7.min.js"></script>

3 – Vamos criar o objeto CSS / HTML <div id="button" style="background:#98cb00">Botao IPED</div> 4 – Vamos iluminar o objeto CSS / HTML <script type="text/javascript"> $(document).ready(function(){ $('#button').illuminate(); }); </script> 5 – Opções para iluminar jQuery iluminar tem várias opções que permitem personalizar o efeito de iluminação. 6 - Para adicionar uma ou várias opções de iluminar, o código ficaria da seguinte forma: <script type="text/javascript"> $(document).ready(function(){ $('#button').illuminate({ 'intensity': '0.3', 'color': '#98cb00', 'blink': 'true', 'blinkSpeed': '1200', 'outerGlow': 'true', 'outerGlowSize': '30px', 'outerGlowColor': '#98cb00' }); }); </script>

7 – Seu código vai ficar assim: <html> <head> <title>Efeito botao iluminar - IPED CURSOS ONLINE</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jqueryui.min.js"></script>  <script type="text/javascript" src="jquery.illuminate.0.7.min.js"></script> <style type=text/css> body{ color: #CCCCCC;} a{ color:#FFFFCC} #button{ background:#98cb00; width:auto; display:inline-table; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color:#ffffff; font-size:18px; font-family: Helvetica, Arial; padding:10px; margin-left:50px; margin-top:50px; } </style> <script type="text/javascript"> $(document).ready(function(){ $('#button').illuminate({ 'intensity': '0.5', 'color': '#ffcb00' }); }); </script> </head> <body style="background:#232323;"> <div id="button">Botao IPED</div><br> <br> </body> </html>

8 â&#x20AC;&#x201C; Salve dentro da pasta botao com nome de: exemplo6.html e depois abra no navegador firefox 3.6 e veja seu botĂŁo brilhando.

CRIANDO MOOTOOLS COLOR PICKER

O Color Picker JavaScript é uma característica-rico seletor de cores que suporta muitas opções. O Color Picker exibe uma seleção de Hue bar caixa de seleção de Saturação / Valor, campos de texto para entrar HSV e campos RGB. A caixa de diálogo para o selecionador de cores é capaz de arrastar e há muitas ações que você pode anexar as chamadas de função, a fim de permitir que seu aplicativo para responder a eventos no Color Picker. O tamanho do Bar Hue eo Box SV pode ser ajustado para qualquer tamanho usando opções. Os elementos do Color Picker pode ser denominado para combinar com o design do seu site. O Color Picker usa muitos recursos da MooTools assim que você vai precisar baixar mootools deles. 1 – Crie uma pasta chamada color em seguida acesse: www.novorumo.t5.com.br/IPED/COLOR_PICKER.rar e baixe todas bibliotecas usadas neste exemplo, descompacte todos os arquivos e salve em sua pasta color.

Não se esqueça de salvar dentro de sua pasta color.

2 - Browser que suportam esse plugin: FireFox 2.0, IE 7.0, and Opera 9.10 3 – Características: * HueBar: Permite a seleção de Hue com o mouse. * SVBox: Permite a seleção de Saturação e Valor (brilho), com o mouse. * Caixa de cor seleccionada: Exibe a cor atualmente selecionada. * Caixa de visualização Cor: Apresenta a cor do mouse está sobre. * Entrada de texto HSV: Permite que o usuário insira os valores HSV. * Entrada de texto RGB: Permite ao usuário inserir valores RGB. * Barra de Título: Permite que o diálogo para ser arrastado e fechado. 4 – Abra seu editor e vamos entrar com o seguinte código: <html> <head> <title></title> <style type="text/css"> .cpDialog { background-color:#aaaaaa !important; border: none 5px #ff0000 !important; color: #000000; } .cpTitleBar{ } .cpHueBar{ } .cpSVBox{ } .cpColorInfoContainer{ } .cpSelectedColor{ } .cpPreviewColor{ } .cpsInput{ }

.cphInput{ } .cpvInput{ } .cprInput{ } .cpgInput{ } .cpbInput{ } .cpokInput{ } .cpcancelInput{ } </style> <script type="text/javascript" src="mootools-release-1.11.js" language="javascript"></script> <script type="text/javascript" src="colorpicker1.0.2_compressed.js" language="javascript"></script> <script type="text/javascript" language="JavaScript"> myColorPicker = null; function init(){ myColorPicker = new ColorPicker({left: "30px", top:"20px", initialState: "Closed", previewSwatch: true, hueBarWidth: 25, hueBarHeight:360, svBoxWidth:360, svBoxHeight:360}); } function ChangeDivBorderColor(){ $("ColorDiv").setStyle("border-color", myColorPicker.CurColor); myColorPicker.close(); } function ChangeDivBackground(){ $("ColorDiv").setStyle("background-color", myColorPicker.CurColor); myColorPicker.close(); }

<p id="ColorDiv" style="border-style: solid; border-color: #000000; padding: 5px">jQuery &eacute; uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML. Ela foi lan&ccedil;ada em janeiro de 2006. </p> </body> </html> OBS. VocĂŞ pode lincar seu estilo css. 5 â&#x20AC;&#x201C; Salve dentro da pasta color com nome de: exemplo7.html.

6 – Dê um duplo clique em exemplo7 e veja o resultado no navegador.

Basta clicar nos botões e interagir com o recurso.

Mude a cor de fundo, a cor da borda e do texto.

JQUERY COM TEXTO Um dos efeitos mais empregados em desenvolvimento com uso da biblioteca jQuery é aquele que proporciona ao usuário a escolha de exibir e esconder conteúdos. Veremos um exemplo bem simples. Sintaxe: $(selector).hide(speed,callback) O hide () método oculta todas visível, elementos selecionados. Este método altera o elemento de altura, largura, margem de enchimento, e opacidade do visível ao oculto. OCULTAR E EXIBIR TEXTO

1 – Crie uma pasta chamada texto, copie para dentro desta pasta nossa biblioteca que baixamos lá no inicio do curso: jquery-1.3.1.js.

2 – Agora abra seu editor e digite o código: <html> <head> <script type="text/javascript" src=" jquery-1.3.1.js "></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").hide(); }); $(".btn2").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>IPED CURSOS ONLINE.</p> <button class="btn1">OCULTAR</button> <button class="btn2">EXIBIR</button> </body> </html>

3 – Salve dentro de sua pasta texto com nome de; exemplo8.html e depois abra em seu navegador.

Clique no botão OCULTAR.

EFEITO EM TEXTO

Neste exemplo iremos abordar os tipos de efeitos que é possível se criar utilizando a biblioteca jquery: jMagnify. 1 – Vamos baixar o pacote da biblioteca jmagnify e salvar na pasta texto, não esqueça de descompactar a pasta js. Acesse o link para baixar: http://www.novorumo.t5.com.br/IPED/jmagnify/js.rar

Não esqueça de descompactar a pasta js que contem toda biblioteca.

Pasta js com a biblioteca jquery.

2 – Abra seu editor de texto e digite o código abaixo: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Iped cursos online</title> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/jquery.jMagnify.js" ></script> <script type="text/javascript"> $().ready(function() { $('#first').jMagnify(); $('#second').jMagnify({ centralEffect: {'color': 'yellow'}, lat1Effect: {'color': 'orange'}, lat2Effect: {'color': 'red'}, lat3Effect: {'color': 'magenta'}, resetEffect: {'color': 'black'} }); $('#third').jMagnify({ centralEffect: {'background-color': '#FFFF00'}, lat1Effect: {'background-color': '#FFFF44'}, lat2Effect: {'background-color': '#FFFF88'}, lat3Effect: {'background-color': '#FFFFCC'}, resetEffect: {'background-color': 'white'} }); $('#fourth').jMagnify({ centralEffect: {'border': '4px solid red', 'font-size': '200%'}, lat1Effect: {}, lat2Effect: {}, lat3Effect: {}, resetEffect: {'border': '0', 'font-size': '100%'} }); $('#double').jMagnify({ centralEffect: {'border-bottom': '4px solid red'}, lat1Effect: {'border-bottom': '3px solid red'}, lat2Effect: {'border-bottom': '2px solid red'}, lat3Effect: {'border-bottom': '1px solid red'}, resetEffect: {'border': '0'} }); }); </script> </head> <body> <h2>Demo 1 - Efeito padrao</h2> <p><span id="result_box" lang="pt" xml:lang="pt"></span></p> <div style='font-size: 26px; height: 100px; color: green; background-color: #FAFAF0;'>

<p id='first'>jQuery jMagnify, Iped cursos online!</p> </div> </body> </html> 3 â&#x20AC;&#x201C; Salve dentro da pasta texto com nome de: exemplo9.html e depois abra no navegador.

Abra no navegar o arquivo exemplo9.

Experimente passar o cursor do mouse sobre o texto e veja o efeito.

4 – Retorne para seu código e vamos adicionar mais um texto com link e com efeito também. Iremos acrescentar essa parte de código: <h2>Demo 2 - jMagnify texto colorido</h2> <a href='http://www.iped.com.br' id='second' style='font-size: 22pt; color: black;'>Clique aqui para ver o website Iped cursos online!</a> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Iped cursos online</title> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/jquery.jMagnify.js" ></script> <script type="text/javascript"> $().ready(function() { $('#first').jMagnify(); $('#second').jMagnify({ centralEffect: {'color': 'yellow'}, lat1Effect: {'color': 'orange'}, lat2Effect: {'color': 'red'}, lat3Effect: {'color': 'magenta'}, resetEffect: {'color': 'black'} }); $('#third').jMagnify({ centralEffect: {'background-color': '#FFFF00'}, lat1Effect: {'background-color': '#FFFF44'}, lat2Effect: {'background-color': '#FFFF88'}, lat3Effect: {'background-color': '#FFFFCC'}, resetEffect: {'background-color': 'white'} }); $('#fourth').jMagnify({ centralEffect: {'border': '4px solid red', 'font-size': '200%'}, lat1Effect: {}, lat2Effect: {}, lat3Effect: {}, resetEffect: {'border': '0', 'font-size': '100%'} }); $('#double').jMagnify({ centralEffect: {'border-bottom': '4px solid red'}, lat1Effect: {'border-bottom': '3px solid red'}, lat2Effect: {'border-bottom': '2px solid red'}, lat3Effect: {'border-bottom': '1px solid red'}, resetEffect: {'border': '0'} }); });

</script> </head> <body> <h2>Demo 1 - Efeito padrao</h2> <p><span id="result_box" lang="pt" xml:lang="pt">Hover texto abaixo para ver jMagnify em ação!</span></p> <div style='font-size: 26px; height: 100px; color: green; background-color: #FAFAF0;'> <p id='first'>jQuery jMagnify, Iped cursos online!</p> </div> <h2>Demo 2 - jMagnify texto colorido</h2> <a href='http://www.iped.com.br' id='second' style='font-size: 22pt; color: black;'>Clique aqui para ver o website Iped cursos online!</a> </body> </html> 5 – Apenas salve o arquivo e depois abra novamente no navegador e veremos o resultado.

Vamos atualizar nossa página para ver novo efeito.

Veja que o texto fica colorido conforme vocĂŞ passa o cursor do mouse sobre o mesmo, ĂŠ um texto com link.

EFEITO ABRIR E FECHAR TEXTO PROFISSIONAL

Neste efeito abrir e fechar texto, segue a mesma linha do exibir e ocultar porém este exemplo é um pouco mais profissional onde iremos primeiro criar nosso estilo css a parte para ser lincado na página e depois iremos chamar nossa jquery usando a biblioteca de API do google. Lembrando que não é porque o conteúdo dentro da div foi entregue de forma dinâmica, eu não sabia o quanto de texto não haveria. Por exemplo, se houvesse apenas uma única linha de texto, mas a altura mínima foi definida para um valor mais do que o texto, o efeito iria falhar definitivamente. Para evitar isso, tenho que verificar para garantir a altura padrão foi maior do que a altura mínima. Se ele veio acima do short, não haveria nenhum efeito slide e apenas o texto seria exibido. Apenas para entender: a - Vamos colocar nosso texto usando Xhtml. b – Vamos finalizar nossa jquery: $(function(){ var slideHeight = 75; // px var defHeight = $('#wrap').height(); if(defHeight >= slideHeight){ $('#wrap').css('height' , slideHeight + 'px'); $('#read-more').append('<a href="#">Click to Read More</a>'); $('#read-more a').click(function(){ var curHeight = $('#wrap').height(); if(curHeight == slideHeight){ $('#wrap').animate({ height: defHeight }, "normal"); $('#read-more a').html('Close'); $('#gradient').fadeOut(); }else{ $('#wrap').animate({ height: slideHeight }, "normal"); $('#read-more a').html('Click to Read More'); $('#gradient').fadeIn(); } return false; }); } });

c – Criar nossos estilos (CSS).

1 – Vamos salvar uma pasta já com as imagens usadas neste exemplo dentro de nossa pasta texto. Acesse o link: http://www.novorumo.t5.com.br/IPED/abrir/images.rar E salve a pasta images dentro da pasta texto, não esqueça de descompactar a pasta images.

Sua pasta texto deve conter esses arquivos, os usados em exemplos anteriores mais a pasta images.

2 – Abra seu editor padrão e vamos criar nossa classe de estilos CSS. /* IPED CURSOS */ html,body,div,h2,p {margin:0;padding:0;} html { font:1em Arial, Helvetica, sans-serif; color:#444; } a {color:#0087f1;} p {margin-bottom:5px;} #container { margin:0 auto; width:600px; } #container h2 { font-size:20px; color:#0087f1; } #wrap { position: relative; padding: 10px; overflow: hidden; } #gradient { width:100%; height:35px; background:url(images/bg-gradient.png) repeat-x; position:absolute; bottom:0; left:0; } #read-more { padding:5px; border-top:4px double #ddd; background:#fff; color:#333; } #read-more a { padding-right:22px; background:url(images/icon-arrow.gif) no-repeat 100% 50%; font-weight:bold; text-decoration:none; } #read-more a:hover {color:#000;} 3 – Salve dentro da pasta texto com nome de: style.css.

4 – Crie um novo arquivo no seu editor e entre com o código abaixo, o mesmo foi dividido em 3 partes porém uma seguida da outra apenas para que você compreenda seu funcionamento, no momento de criar não precisa digitar os textos Parte1, Parte2, Parte3 ok. PARTE1 (CHAMAR BIBLIOTECA E ESTILO CSS) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Exibir e Ocultar Texto profissional</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></scri pt> PARTE2 (CÓDIGO JQUERY) <script type="text/javascript"> $(function(){ var slideHeight = 75; // px var defHeight = $('#wrap').height(); if(defHeight >= slideHeight){ $('#wrap').css('height' , slideHeight + 'px'); $('#read-more').append('<a href="#">Saiba mais</a>'); $('#read-more a').click(function(){ var curHeight = $('#wrap').height(); if(curHeight == slideHeight){ $('#wrap').animate({ height: defHeight }, "normal"); $('#read-more a').html('Fechar'); $('#gradient').fadeOut(); }else{ $('#wrap').animate({ height: slideHeight }, "normal"); $('#read-more a').html('Clique para continuar lendo'); $('#gradient').fadeIn(); } return false; }); } }); </script>

</head> <body> PARTE3 (CONTEÚDO XHTML) <div id="container"> <h1>Iped cursos online <h2>Sobre nossa empresa</h2> <div id="wrap"> <div> <p>Fundada em 2001 e posicionada no mercado como uma verdadeira empresa de educação, o iPED - Instituto Politécnico de Ensino a Distância - investe na formação de valores morais e sociais. A empresa tem a missão de promover a educação de maneira democrática levando ao mercado mais de 500 cursos, em 30 áreas e presente em mais de 60 países. </p> <p>O Grupo iPED, que já formou mais de 800 mil alunos ao longo de sua história, se consolida como um dos principais meios de educação online do Brasil. </p> <h2>Estrutura</h2> <br> <p>O grupo é formado pelas seguintes unidades de negócios: Cursos Profissionalizantes, Cursos para Crianças, Cursinho Preparatório para Vestibular, Cursos Preparatórios para Concursos Públicos e planos Corporativos. Um grande diferencial no mercado de ensino a distância é a tecnologia de ponta, já que o servidor se encontra em um dos maiores Data Center do país. O material didático oferecido para os alunos é elaborado por conteudistas, professores e pesquisadores das mais renomadas instituições, em diversas regiões do Brasil.</p> </div> <div id="gradient"></div> </div> <div id="read-more"></div> </div> </body> </html>

5 – Salve dentro da pasta texto com nome de: exemplo10.html.

Dê um duplo clique no exemplo10.

Clique no link: Clique para continuar lendo.

Veja que o conteúdo escondido é exibido na tela ao se abrir.

Depois é só Fechar o mesmo.

TRABALHANDO COM TABELAS CSS3 O objetivo era ter uma versão cross browser compatível que parecia bom no Chrome, Firefox, IE8, IE7 e IE6. Internet Explorer não oferece suporte CSS3 cantos arredondados, gradientes ou sombras, mas ainda é agradável e funcional. O striping zebra parecia essencial para todos os navegadores, de modo que foi realizada através jquery. Aqui está o que parece que no IE6: Navegadores Firefox e Webkit cada um tem suas peculiaridades próprias ao implementar CSS3 técnicas. Que demorou um pouco para descobrir é porque os cantos arredondados olhou bem no Firefox, mas eram quadradas no Chrome. Este post explica como raios de fronteira são prestados de forma diferente e sugeriu que a melhor solução era para arredondar os elementos interiores que as cores de fundo foram aplicados no adicional para o elemento pai. Então é por isso que você vê canto arredondado CSS aplicadas a mesa e cada um dos canto td ou TH. Internet Explorer (7,6) não querem reconhecer as cores de fundo em elementos de linha (tr) em tudo, assim backgrounds foram classificados para o respectivo td e th em seu lugar. CRIAR TABELA JQUERY E CSS3

PARTE JQUERY Vamos usar jquery para fazer o striping zebra. Aplicando a classe ao estranho elementos numerados tr. Também usaremos jquery para a classe da primeira coluna e da última coluna, de modo que poderemos ter alinhamentos de texto diferentes e fronteiras. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></scri pt> <script type="text/javascript"> $(function() { /* Cor zebrada */ $("table tr:nth-child(odd)").addClass("odd-row"); /* Texto alinhamento */ $("table td:first-child, table th:first-child").addClass("first"); /* Remover borda */ $("table td:last-child, table th:last-child").addClass("last"); }); </script>

PARTE CSS3 A CSS deve ser bastante simples, mas ser avisado sobre CSS redefine. Eu usei um bem bĂĄsico aqui, mas a maioria usa border-collapse para os elementos da tabela. Quando vocĂŞ fizer isso, a fronteira vai desaparecer da mesa. Infelizmente, isso significa que vocĂŞ precisa para ir com uma linha cellspacing = "0" na tabela da vez. html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { margin:0; padding:0; font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif; color: #555; background:#f5f5f5; } a {color:#666;} #content {width:65%; max-width:690px; margin:6% auto 0;} /* Estilo tabelas */ table { overflow:hidden; border:1px solid #d3d3d3; background:#fefefe; width:70%; margin:5% auto 0; -moz-border-radius:5px; /* FF1+ */ -webkit-border-radius:5px; /* Saf3-4 */

border-radius:5px; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); } th, td {padding:18px 28px 18px; text-align:center; } th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;} td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;} tr.odd-row td {background:#f6f6f6;} td.first, th.first {text-align:left} td.last {border-right:none;} /* Fundo gradiente. */ td { background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9); background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); } tr.odd-row td { background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1); background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6)); } th { background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed); background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb)); } tr:first-child th.first { -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; /* Saf3-4 */ } tr:first-child th.last { -moz-border-radius-topright:5px;

-webkit-border-top-right-radius:5px; /* Saf3-4 */ } tr:last-child td.first { -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; /* Saf3-4 */ } tr:last-child td.last { -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; /* Saf3-4 */ } PARTE MARKUP E finalmente a marcação. <div id="content"> <table cellspacing="0"> <tr> <th>Curso IPED</th> <th>Progresso</th> <th>Visualizar</th> </tr> <tr> <td>Jquery</td> <td>100%</td> <td>Sim</td> </tr> <tr> <td>HTML5</td><td>100%</td> <td>Sim</td> </tr> <tr> <td>Excel av. 2007</td><td>50%</td> <td>Sim</td> </tr> <tr> <td>Sem desc</td><td>0%</td> <td>Nao</td> </tr> <tr> <td>Sem desc</td><td>0%</td> <td>Nao</td> </tr> </table> </div>

1 â&#x20AC;&#x201C; Crie uma pasta chamada tabela e com seu editor aberto digite o seguinte cĂłdigo abaixo: <!DOCTYPE html> <html lang="en"> <head> <title>Tabela simples</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { /* Cor zebrada */ $("table tr:nth-child(odd)").addClass("odd-row"); /* Texto alinhamento */ $("table td:first-child, table th:first-child").addClass("first"); /* Remover borda */ $("table td:last-child, table th:last-child").addClass("last"); }); </script> <style type="text/css"> html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { margin:0; padding:0; font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif; color: #555; background:#f5f5f5; } a {color:#666;}

#content {width:65%; max-width:690px; margin:6% auto 0;} /* Estilo tabelas */ table { overflow:hidden; border:1px solid #d3d3d3; background:#fefefe; width:70%; margin:5% auto 0; -moz-border-radius:5px; /* FF1+ */ -webkit-border-radius:5px; /* Saf3-4 */ border-radius:5px; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); } th, td {padding:18px 28px 18px; text-align:center; } th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;} td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;} tr.odd-row td {background:#f6f6f6;} td.first, th.first {text-align:left} td.last {border-right:none;} /* Fundo gradiente. */ td { background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9); background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); } tr.odd-row td { background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1); background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6)); } th { background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);

background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb)); } tr:first-child th.first { -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; /* Saf3-4 */ } tr:first-child th.last { -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; /* Saf3-4 */ } tr:last-child td.first { -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; /* Saf3-4 */ } tr:last-child td.last { -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; /* Saf3-4 */ } </style> </head> <body> <div id="content"> <table cellspacing="0"> <tr> <th>Curso IPED</th> <th>Progresso</th> <th>Visualizar</th> </tr> <tr> <td>Jquery</td> <td>100%</td> <td>Sim</td> </tr> <tr> <td>HTML5</td><td>100%</td> <td>Sim</td> </tr> <tr> <td>Excel av. 2007</td><td>50%</td> <td>Sim</td> </tr>

<tr> <td>Sem desc</td><td>0%</td> <td>Nao</td> </tr> <tr> <td>Sem desc</td><td>0%</td> <td>Nao</td> </tr> </table> </div> </body> </html> 2 â&#x20AC;&#x201C; Salve dentro da pasta tabela com nome de: exemplo11.html e depois abra em seu navegador.

TABELA COM FILTRO

Este plugin jQuery é uma maneira rápida de permitir que as colunas da tabela podem ser filtrada pelo usuário. Ele irá adicionar caixa de texto para o topo de cada coluna em uma tabela, digitando na caixa de texto é que você pode reduzir o número de linhas na tabela para baixo para aqueles que correspondem à sua pesquisa de texto. Ele permite a wild cards e um operador NOT (ou seja, mostrar-me tudo o que não coincide com o meu texto de pesquisa). Sintaxe Jquery: $('#filterTable').columnFilters(); Cada tabela que você aplicar o script deve ser bem formada, contendo pelo menos uma tbody e um thead. O roteiro ainda não compensa quaisquer células que têm um colspan maior que 1. 1 – Vamos baixar os script do jquery e salvar em nossa pasta tabela, acesse o link: http://www.novorumo.t5.com.br/IPED/tabela/tabela.rar

Baixe tudo e depois descompacte o conteúdo e coloque na pasta tabela.

2 – Abra seu editor e vamos digitar o código abaixo: OBS. Preste bem atenção no código pois qualquer erro que seja mínimo, pode ocorrer erro na execução. <html> <head> <title>Tabela com filtro</title> <script language="JavaScript" src="jquery-1.3.2.min.js"></script> <script language="JavaScript" src="jquery.columnfilters.js"></script> <style type="text/css"> table tr th { background-color: #d3DADE; padding: 3px; } table tr.rowb { background-color:#EAf2FD; } table tr.filterColumns td { padding:2px; } body { padding-bottom:150px; } .style1 {color: #FFFFFF} </style> </head> <body> <h1>IPED - Exemplo tabela com filtro</h1> <xmp></xmp>

<table id="filterTable1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>Nome</th><th>Sobrenome</th><th>Cidade</th><th>RG</th> </tr> </thead> <tfoot></tfoot> <tbody> <tr> <td>Tom</td><td>Coote</td><td>United Kingdom</td><td>1234</td> </tr> <tr> <td>Bob</td><td>Edwards</td><td>Australia</td><td>15876</td> </tr> <tr> <td>Eddy</td><td>Hornblower</td><td>France</td><td>1234</td> </tr> <tr> <td>Steve</td><td>Blode</td><td>USA</td><td>9835</td> </tr> <tr> <td>Jeffrey</td><td>Gnome</td><td>Switzerland</td><td>0159</td> </tr> <tr> <td>Terry</td><td>Winkleman</td><td>Canada</td><td>023</td> </tr> </tbody> </table>

<span class="style1"> <script> $(document).ready(function() { $('table#filterTable1').columnFilters({alternateRowClassNames:['rowa','rowb']}); $('table#filterTable2').columnFilters({alternateRowClassNames:['rowa','rowb'], excludeColumns:[2,3]}); $('table#filterTable3').columnFilters({caseSensitive:true}); $('table#filterTable4').columnFilters({minSearchCharacters:3}); $('table#filterTable5').columnFilters({wildCard:'#',notCharacter:'?'}); }); </script> <br /> </span> <h1 class="style1">Defaults</h1> <span class="style1"> <xmp> wildCard: "*", notCharacter: "!",

caseSensitive: false, minSearchCharacters: 1, excludeColumns: [], alternateRowClassNames: [], underline: false </xmp> More script and css style :</span> </body> </html> 3 â&#x20AC;&#x201C; Salve na pasta tabela com nome de: exemplo12.html.

4 – Abra o arquivo exemplo12 no navegador.

5 – Faça um filtro, no campo nome experimente digitar a letra T e veja o resultado, serão exibidos apenas os nomes que começam com a letra T.

TRABALHANDO COM FORMULARIO Formulários HTML são antigas, e um pouco desajeitado, e navegadores variam muito na forma como eles lidam com eles. No entanto, graças a JavaScript, essas formas se tornaram a base para alguns incrivelmente fresca aplicações web. Como sempre, se pode fazê-lo JavaScript, jQuery pode torná-lo divertido! Nós sabemos o que fazer até agora: elementos de formulário são elementos DOM, de modo jQuery é grande em manipulá-los. Mas elementos de formulário não são seus elementos típicos DOM, para que haja são um punhado de truques jQuery especiais para lidar com eles, mais especificamente. Nós visto muito poucos deles ao longo do livro, até agora, mas agora é hora de se concentrar em -los um pouco mais de perto. Validação de formulário simples Validação de formulário é essencial, mesmo que muitas vezes parece chato. No entanto, adequada, bem formas concebido e implementado pode fazer ou quebrar como os usuários percebem a sua site. Quem não teve a experiência de desistir de um site por causa de um particularlarmente forma frustrante? Do lado do servidor validação de formulário Do lado do cliente validação de formulário com jQuery só deve ser usado para ajudar seus usuários no preenchimento de um formulário, e nunca deve ser invocado para impedir certos tipos de dados que estão sendo enviados para o servidor. Usuários com o JavaScript desactivado será unhindered pela sua validação jQuery, para que eles possam apresentar os valores que eles querem. por causa de isso, se há algum risco de segurança dos usuários enviar dados maliciosos através de seu formas, que os dados precisam ser cuidadosamente validada no lado do servidor. Embora jQuery evita lidar com o amarga da questão da validação de formulário, que faz fornecer alguns métodos convenientes para acessar e configurar formação de valores e isso é metade da batalha! Você pode selecionar os campos do formulário, como qualquer outro elemento, mas há algumas filtros extras para tornar seu código mais eficiente e legível. A: filtro de entrada, por exemplo, seleciona todos os elementos que são insumos, caixas de seleção, textareas, ou botões. Você usá-lo como faria com qualquer filtro. Aqui está como nós daria todos os elementos do nosso formulário de um fundo de limão linda chiffon: $('#myForm:input').css('background-color', 'lemonchiffon')

Depois de selecionar seus elementos, é hora de encontrar os seus valores para que você possa validá-los contra seus requisitos. Nós já usou a função val o suficiente para saber o que ele faz: ele retorna o valor de um campo de formulário. Podemos agora realizar alguns testes simples validação vamos ver se as caixas de texto em um formulário estão vazios: $(':submit').click(function(e) { $(':text').each(function() { if ($(this).val().length == 0) { $(this).css('border', '2px solid red'); } }); e.preventDefault(); }); A ação val trabalha para caixas de seleção e botões de rádio também. Como exemplo, vamos alertar o valor de botão de rádio quando o usuário muda a seleção: $(':radio[name=sex]').change(function() { alert($(this).val()); });

VALIDAR UM FORMULARIO

O truque é muito simples: após o usuário pressionar o botão de inscrição, a validação ocorre e todos os campos que são inválidos são abalados um pouco. Eles têm formato web muito simples. 1 – Crie uma pasta chamada: form em seguida vamos baixar as imagens utilizadas, acesse: http://www.novorumo.t5.com.br/IPED/form/form.rar baixe a pasta form e descompacte a mesma dentro de sua pasta criada form.

Deixe as imagens soltas dessa forma como na imagem acima.

2 â&#x20AC;&#x201C; Digite assim dentro de seu editor: <html> <head> <title>VALIDAR FORM - IPED</title>  <style type="text/css"> body { font-family:Arial, Sans-Serif; font-size:0.85em; } img { border:none; } ul, ul li { list-style-type: none; margin: 0; padding: 0; } ul li.first { border-top: 1px solid #DFDFDF; } ul li.last { border: none; } ul p { float: left; margin: 0; width: 310px; } ul h3 { float: left; font-size: 14px; font-weight: bold; margin: 5px 0 0 0; width: 200px; margin-left:20px; } ul li { border-bottom: 1px solid #DFDFDF;

padding: 15px 0; width:600px; overflow:hidden; } ul input[type="text"], ul input[type="password"] { width:300px; padding:5px; position:relative; border:solid 1px #666; -moz-border-radius:5px; -webkit-border-radius:5px; } ul input.required { border: solid 1px #f00; } </style>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#signup").click(function() { resetFields(); var emptyfields = $("input[value=]"); if (emptyfields.size() > 0) { emptyfields.each(function() { $(this).stop() .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100) .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100) .animate({ left: "0px" }, 100) .addClass("required"); }); } }); }); function resetFields() { $("input[type=text], input[type=password]").removeClass("required"); } </script> </head> <body> <h1>IPED CURSOS ONLINE</h1> <p><img src="header.png" alt="Dados de acesso" /></p>

<ul> <li class="first"> <h3>NOME</h3> <p> <input type="text" value="" id="name" name="name" /></p> </li> <li> <h3>Email</h3> <p> <input type="text" value="" name="email" /></p> </li> <li> <h3>SENHA</h3> <p> <input type="password" name="passwd" /></p> </li> <li> <h3>CONFIRMAR SENHA</h3> <p> <input type="password" name="passwd_conf" /></p> </li> <li> <h3>LOGIN</h3> <p> <input type="text" id="userName" name="user_name" /> </p> </li> <li class="last"> <a id="signup" href="#"><img src="button.png" alt="Botao de acesso" style="vertical-align:middle;" /></a><img src="clickhere.png" alt="" style="vertical-align:middle;" /> </li> </ul> </body> </html>

3 – Salve dentro da pasta form com nome de: exemplo13.html.

4 – Abra o arquivo exemplo13 no navegador e vamos testar nosso formulário.

5 – Clique no botão sem preencher os campos e veja o resultado.

Note que todos os campos em branco são destacados na tela.

FORMULÁRIO DE AUTENTICAR CSS3

Neste exemplo iremos criar um form de acesso usando estilo CSS3, veremos como fica bacana o design desse formulário. 1 – Abra seu editor e vamos digitar o código abaixo: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Formulario de autenticar - IPED</title>  <style type="text/css"> *{ margin: 0px; padding: 0px;outline: none; } body { background: #4E0085; } form { border: 1px solid #270644; width: 250px; -moz-border-radius: 20px; -webkit-border-radius: 20px; background: -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085)); margin:50px auto; padding: 20px; -moz-box-shadow:0px -5px 300px #270644; -webkit-box-shadow:0px -5px 300px #270644; } label { font-size: 12px; font-family: arial, sans-serif; list-style-type: none; color: #fff; text-shadow: #000 1px 1px; margin-bottom: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;

display: block; } input { -webkit-transition-property: -webkit-box-shadow, background; -webkit-transition-duration: 0.25s; padding: 6px; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 1px solid #ad64e0; -moz-box-shadow: 0px 0px 2px #000; -webkit-box-shadow: 0px 0px 2px #000; margin-bottom: 10px; background: #8a33c6; width: 230px; } input.submit { -webkit-transition-property: -webkit-box-shadow, background; -webkit-transition-duration: 0.25s; width: 100px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9)); background: -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6); color: #fff; text-transform: uppercase; text-shadow: #000 1px 1px; border-top: 1px solid #ad64e0; margin-top: 10px; } input.submit:hover { -webkit-box-shadow: 0px 0px 2px #000; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9)); background: -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6); } input.submit:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#963AD6)); background: -moz-linear-gradient(19% 75% 90deg,#963AD6, #781bb9); } input:hover { -webkit-box-shadow: 0px 0px 4px #000; background: #9d39e1; } </style>

</head> <body>  <form action=""> <label>Username:</label> <input type="text" name="username" /> <label>Password:</label> <input type="password" name="password" /> <input type="submit" value="Submit" name="submit" class="submit" /> </form> </body> </html> 2 â&#x20AC;&#x201C; Salve dentro da pasta form com nome de: exemplo14.html.

3 â&#x20AC;&#x201C; Abra o arquivo exemplo14 e veja como ficou bacana com estilo CSS3 seu form de acesso.

Ao clicar dentro dos campos, os mesmos tem efeitos de brilho dentro.

CONTROLE DE FORMULARIO

Spin-inteligente é um plugin jQuery botão de rotação que imita o muito comum janelas controle botão de rotação. Giro inteligente permite que você selecione um valor entre os valores mínimo e máximo usando o mouse ou o teclado. Você também pode inserir um valor via teclado. Giro inteligente contém uma caixa de texto e "up" "down" botões, ele também suporta "mascaramento" (texto que aparece quando o controle perde o foco). Clicando no botão "up" faz com que o valor de incrementar de valor do passo (valor do passo é configurável, o padrão é 1), enquanto clica no botão "para baixo" faz com que o valor para diminuir o valor por etapa. Clicando teclas up / down e segurando o botão esquerdo do mouse faz com que os valores a mudar mais rapidamente. Giro inteligente agora suporta botão scroll do mouse, você pode alterar o valor usando a roda do mouse também. 1 – Crie uma pasta chamada: controle em seguida vamos baixar as imagens mais as bibliotecas jquery, e salvar todo o conteúdo dentro da pasta controle http://www.novorumo.t5.com.br/IPED/controle/controle.rar

Descompacte todo conteúdo dentro da pasta controle.

2 – Abra seu editor mãos a obra, vamos entrar com os códigos: <html> <head> <title>CONTROLE FORM - IPED</title>  <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="smartspinner.js" type="text/javascript"></script> <link href="smartspinner.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { var s = $('#red').spinit({ height: 30, width: 125, min: 0, initValue: 40, max: 255, callback: onred, mask: 'Vermelho', callback: onred }); $('#green').spinit({ height: 30, width: 125, min: 0, initValue: 40, max: 255, callback: onred, mask: 'Verde', callback: ongreen }); $('#blue').spinit({ height: 30, width: 100, min: 0, initValue: 40, max: 255, callback: onred, mask: 'Azul', callback: onblue }); var r = 40, g = 40, b = 40; function onred(val) { r = val; changeColor(); } function ongreen(val) { g = val; changeColor(); } function onblue(val) { b = val; changeColor(); } function byte2Hex(n) { var nybHexString = "0123456789ABCDEF"; return String(nybHexString.substr((n >> 4) & 0x0F, 1)) + nybHexString.substr(n & 0x0F, 1); } function RGB2Color(r, g, b) { return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b); } function changeColor() { var color = RGB2Color(r, g, b); $('body').css('background-color', color); }

}); </script>  <style type="text/css"> <!-.style1 { color: #000000; font-size: 24px; } --> </style> </head> <body>  <div style="position: relative; width: 500px; height: 100%; margin: auto;" id="canvas"> <div style="width: 100%; height: 100px; padding-top: 50px; padding-left: 20px"> <div align="center" class="style1"> <h1>IPED CURSOS</h1> </div> </div> <div style="padding-left: 70px;"> <input type="text" id="red" class="smartspinner" /> <input type="text" id="green" class="smartspinner" /> <input type="text" id="blue" class="smartspinner" /> </div> <p>&nbsp;</p> </div> </body> </html>

3 â&#x20AC;&#x201C; Salve dentro da pasta controle com nome de: exemplo15.html.

Abra o arquivo exemplo15 em seu navegador.

4 â&#x20AC;&#x201C; Altere o valor de cada controle e veja que o fundo da tela irĂĄ mudar de cor, recurso muito usado em sites de acessibilidade.

JQUERY EFEITO ANIMADO Definição e uso O método animate () executa uma animação personalizada de um conjunto de propriedades CSS. Este método altera um elemento de um estado para outro com estilos CSS. O valor da propriedade CSS é alterado de forma gradual, para criar um efeito animado. Apenas valores numéricos podem ser animados (como "margin: 30px"). Valores de cadeia não pode ser animado (como "background-color: red"). Nota: Use "+=" or "-=" for relative animations. Example "Animar" um elemento div, mudando a sua altura: $("#btn1").click(function(){ $("#box").animate({height:"300px"}); }); Sintaxe (selector).animate({styles},speed,easing,callback)

Parametro

Descrição

Style

Necessário. Especifica uma ou mais propriedades CSS para animar, e os valores para animar. Nota: Os estilos são definidos com nomes DOM (como "fontSize"), e não nomes de CSS (como "font-size"). Os estilos possíveis CSS são: • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •

Speed

backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent

Opcional. Especifica a velocidade da animação. Padrão é "normal"

Valores possíveis: • • • •

Easing

milliseconds (like 1500) "slow" "normal" "fast"

Opcional. Especifica uma função de atenuação que define a velocidade em diferentes pontos da animação. Built-in facilitando funções são: • •

Callback

SINTAXE ALTERNATIVA (selector).animate({styles},{options})

swing linear

Opcional. A função a ser executada após a animação completa.

CRIAR EFEITO ANIMADO COM JQUERY

1 – Vamos criar uma pasta chamada: animar em seguida copie para dentro dessa pasta nossa biblioteca da qual havíamos baixado no inicio do curso: jquery-1.6.3.min.js

CASO NAO TENHA OU TENHA PERDIDO, VOCÊ PODE BAIXAR ESTE MESMO PLUGIN DE JQUERY NO SITE: http://jquery.com/

2 – Abra o seu editor e digite o código abaixo: <html> <head> <script type="text/javascript" src=" jquery-1.6.3.min.js "></script> <script type="text/javascript"> $(document).ready(function() { $("#btn1").click(function(){ $("#box").animate({height:"300px"}); }); $("#btn2").click(function(){ $("#box").animate({height:"100px"}); }); }); </script> </head> <body> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> <button id="btn1">Animar</button> <button id="btn2">Resetar</button> </body> </html>

3 â&#x20AC;&#x201C; Salve dentro da pasta animar com nome de: exemplo16.html em seguida execute a mesma no navegador.

Clique no botĂŁo Animar.

CRIAR NOVO EFEITO ANIMADO JQUERY

1 â&#x20AC;&#x201C; Vamos apenas alterar apenas as linhas do jquery. <html> <head> <script type="text/javascript" src=" jquery-1.6.3.min.js "></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").animate({fontSize:"3em"}); }); $(".btn2").click(function(){ $("p").animate({fontSize:"1em"}); }); }); </script> </head> <body> <p>Texto que sera aumentado - IPED.</p> <button class="btn1">Animar</button> <button class="btn2">Resetar</button> </body> </html>

2 â&#x20AC;&#x201C; Salve dentro da pasta animar com nome de: exemplo17.html e depois abra no navegador.

Clique no botĂŁo Animar.

Para voltar ao tamnho de antes, clique em Resetar.

TRABALHANDO COM IMAGENS 1 - Vamos criar um efeito bem bacana utilizando jquery com imagens, primeiramente crie uma pasta chamada: imagens e depois baixe todas as imagens utilizadas mais a jquery mais o estilo csss, acesse o website: http://www.novorumo.t5.com.br/IPED/iped.rar

2 â&#x20AC;&#x201C; Descompacte a pasta iped e depois salve a mesma na pasta que acabamos de criar imagens.

3 – Abra o editor e vamos digitar o código: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Uso Imagens - IPED</title> <link rel="stylesheet" href="iped/css/styles.css" /> </head> <body> <header> <h1>Meu portifólio</h1> </header> <nav id="filter"></nav> <section id="container"> <ul id="stage"> <li data-tags="Print Design"><img src="iped/img/mini/1.jpg" alt="Illustration" /></li> <li data-tags="Logo Design,Print Design"><img src="iped/img/mini/2.jpg" alt="Illustration" /></li> <li data-tags="Web Design,Logo Design"><img src="iped/img/mini/3.jpg" alt="Illustration" /></li> <li data-tags="Web Design,Print Design"><img src="iped/img/mini/4.jpg" alt="Illustration" /></li> <li data-tags="Logo Design"><img src="iped/img/mini/5.jpg" alt="Illustration" /></li> <li data-tags="Web Design,Logo Design,Print Design"><img src="iped/img/mini/6.jpg" alt="Illustration" /></li> <li data-tags="Logo Design,Print Design"><img src="iped/img/mini/7.jpg" alt="Illustration" /></li> <li data-tags="Web Design"><img src="iped/img/mini/8.jpg" alt="Illustration" /></li> <li data-tags="Web Design,Logo Design"><img src="iped/img/mini/9.jpg" alt="Illustration" /></li> <li data-tags="Web Design"><img src="iped/img/mini/10.jpg" alt="Illustration" /></li> <li data-tags="Logo Design,Print Design"><img src="iped/img/mini/11.jpg" alt="Illustration" /></li> <li data-tags="Logo Design,Print Design"><img src="iped/img/mini/12.jpg" alt="Illustration" /></li> <li data-tags="Print Design"><img src="iped/img/mini/13.jpg" alt="Illustration" /></li>

<li data-tags="Web Design,Logo Design"><img src="iped/img/mini/14.jpg" alt="Illustration" /></li> <li data-tags="Print Design"><img src="iped/img/mini/15.jpg" alt="Illustration" /></li> <li data-tags="Logo Design"><img src="iped/img/mini/16.jpg" alt="Illustration" /></li> <li data-tags="Web Design,Logo Design,Print Design"><img src="iped/img/mini/17.jpg" alt="Illustration" /></li> <li data-tags="Web Design"><img src="iped/img/mini/18.jpg" alt="Illustration" /></li> <li data-tags="Web Design,Print Design"><img src="iped/img/mini/19.jpg" alt="Illustration" /></li> <li data-tags="Logo Design,Print Design"><img src="iped/img/mini/20.jpg" alt="Illustration" /></li> <li data-tags="Web Design,Logo Design"><img src="iped/img/mini/21.jpg" alt="Illustration" /></li> <li data-tags="Print Design"><img src="iped/img/mini/22.jpg" alt="Illustration" /></li> <li data-tags="Logo Design,Print Design"><img src="iped/img/mini/23.jpg" alt="Illustration" /></li> </ul> </section> <footer> </footer> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></scri pt> <script src="iped/js/jquery.quicksand.js"></script> <script src="iped/js/script.js"></script> </body> </html> PRESTE MUITA ATENÇÃO NOS CÓDIGOS DIGITADOS PARA QUE NADA SAIA ERRADO.

3 â&#x20AC;&#x201C; Salve na pasta imagens com nome de: exemplo18.html e depois abra no navegador.

Basta clicar nos menus acima e ver o resultado.

EFEITO LIGTHBOX

jQuery lightbox, Não é só o apoio de imagens, mas também suporte para vídeos, flash, YouTube, iframes e ajax. É uma completa coleção de mídia queimado. É muito fácil de configurar, mas muito flexível, se você quiser personalizá-lo um pouco. Além disso, o script é compatível em todos os principais navegadores, mesmo IE6. Ele também vem com APIs útil para prettyPhoto pode ser lançado a partir de praticamente qualquer lugar (sim, que inclui Flash)! 1 – Crie uma pasta chamada: box em seguida baixe todo conteúdo utilizado no desenvolvimento: http://www.novorumo.t5.com.br/IPED/box.rar

2 – Salve tudo dentro da pasta box.

Entendendo a estrutura: PASTA CSS (Todo estilo utilizado para esta galeria de fotos) PASTA IMAGES (Imagens utilizadas dentro do jquery tipo botão Next, Stop...) PASTA JS (Biblioteca jquery para criar efeito ligthbox) PASTA PHOTOS (Imagens que fazem parte da galeria)

2 – Digite o código: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>LightBox - IPED</title> <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <style type="text/css"> #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> </head> <body> <h2 id="example">Galeria de fotos</h2> <p>Clique nas imagens abaixo:</p> <div id="gallery"> <ul> <li> <a href="photos/image1.jpg" title="Iped foto1"> <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />

</a> </li> <li> <a href="photos/image2.jpg" title="Iped foto2"> <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image3.jpg" title="Iped foto3"> <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image4.jpg" title="Iped foto4"> <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /> </a> </li> <li> <a href="photos/image5.jpg" title="Iped foto5"> <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /> </a> </li> </ul> </div> </body> </html>

ENTENDENDO O CÓDIGO: Link estilo CSS <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" /> Incluir biblioteca jquery <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> Função jquery <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script>

Estilo CSS direto na pĂĄgina <style type="text/css"> #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> ReferĂŞncia para entender o ligthbox no caso o Jquery do efeito <div id="gallery">

3 â&#x20AC;&#x201C; Salve dentro da pasta box com nome de: exemplo19.html e depois abra no navegador.

Clique em qualquer imagem e veja o efeito.

UPLOAD COM PHP E JQUERY Fazer upload às vezes pode ser uma tarefa um tanto chata quando não se tem a opção de upload de vários arquivos de uma única vez, o upload múltiplo, mas em alguns casos os upload múltiplos possuem muitas caixas de entrada de arquivo se torna um pouco tedioso e demorado. Claro que existem outras opções incluindo upload múltiplo com apenas uma caixa de entrada, mas isso não vem ao caso no momento. Nosso objetivo aqui é usarmos o Ajax Upload Link externo usando a Jquery que torna essa tarefa mais fácil também. A estrutura HTML O formulário de upload vai ser intuitivo, não usaremos a caixa de entrada de arquivo. Então, primeiro de tudo criar o botão de upload na qual o usuário irá clicar para abrir o diálogo File Selection. <div id="upload">Upload File</div> Aplicamos alguns estilos básicos dessa div de id="upload", aplique qualquer estilo de maneira a torná-la mais atraente. Importamos nosso .js <script type="text/javascript" src="js/jquery-1.6.1.min.js" ></script><br> <script type="text/javascript" src="js/ajaxupload.3.5.js" ></script> Estrutura CSS #upload{ margin:30px 200px; padding:15px; font-weight:bold; font-size:1.3em; font-family:Arial, Helvetica, sans-serif; text-align:center; background:#f2f2f2; color:#3366cc; border:1px solid #ccc; width:150px; cursor:pointer !important; -moz-border-radius:5px; -webkit-border-radius:5px; } .darkbg{ background:#ddd !important; } #status{ font-family:Arial; padding:5px; } ul#files{ list-style:none; padding:0; margin:0; }

ul#files li{ padding:10px; margin-bottom:2px; width:200px; float:left; marginright:10px;} ul#files li img{ max-width:180px; max-height:150px; } .success{ background:#99f099; border:1px solid #339933; } .error{ background:#f0c6c3; border:1px solid #cc6622; } Também foi acrescentado um elemento span junto ao botão de upload para mostrar várias mensagens durante o processamento. E para mostrar os arquivos enviados para o usuário, eu adicionei uma lista desordenada ao lado do botão. Abaixo está o código completo html.  <div id="upload" >Upload File</div><span id="status" ></span>  <ul id="files" ></ul> Código PHP Para fazer o upload dos arquivos para o servidor, usaremos o script em PHP onde a mensagem "success" exibe se o arquivo foi enviado com sucesso caso contrário "error" é exibida. upload-file.php <?php // Pasta para onde iremos fazer o upload $uploaddir = './uploads/'; $file = $uploaddir . basename($_FILES['uploadfile']['name']); if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) { echo "success"; } else { echo "error"; } ?> Lembrando que nosso objetivo aqui não é redimencionar imagem, verificar se já existe no servidor, renomear a imagem.

O código JavaScript $(function(){ var btnUpload=$('#upload'); var status=$('#status'); new AjaxUpload(btnUpload, { action: 'upload-file.php', //Nome da caixa de entrada do arquivo name: 'uploadfile', onSubmit: function(file, ext){ if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // verificar a extensão de arquivo válido status.text('Somente JPG, PNG ou GIF são permitidas'); return false; } status.text(Enviando...'); }, onComplete: function(file, response){ //Limpamos o status status.text(''); //Adicionar arquivo carregado na lista if(response==="success"){ $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success'); } else{ $('<li></li>').appendTo('#files').text(file).addClass('error'); } } }); }); Nunca esqueça de fazer a validação dos arquivos do lado do servidor, neste caso online, assim você garante uma melhor segurança do que será enviado.

1 – Crie uma pasta upload dentro de seu servidor apache depois acesse: http://www.novorumo.t5.com.br/IPED/upload.rar Baixe e descompacte todo o coteudo dentro da pasta upload.

2 – Digite o código: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>IPED - Upload com PHP e jQuery</title> <script type="text/javascript" src="js/jquery-1.6.1.min.js" ></script> <script type="text/javascript" src="js/ajaxupload.3.5.js" ></script> <link rel="stylesheet" type="text/css" href="./styles.css" /> <script type="text/javascript" > $(function(){ var btnUpload=$('#upload'); var status=$('#status'); new AjaxUpload(btnUpload, { // Arquivo que fará o upload action: 'upload-file.php', //Nome da caixa de entrada do arquivo name: 'uploadfile', onSubmit: function(file, ext){ if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // verificar a extensão de arquivo válido status.text('Somente JPG, PNG ou GIF são permitidas'); return false; }

status.text('Enviando...'); }, onComplete: function(file, response){ //Limpamos o status status.text(''); //Adicionar arquivo carregado na lista if(response==="success"){ $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success'); } else{ $('<li></li>').appendTo('#files').text(file).addClass('error'); } } }); }); </script> </head> <body> <div id="mainbody" > <h3>&raquo;IPED</h3> <div id="upload" ><span>Upload File<span></div><span id="status" ></span> <ul id="files" ></ul> </div> </body> </html> 3 – Salve com nome de: exemplo20.html dentro da pasta upload no servidor apache, agora faça o teste, preferencialmente em um servidor web devido às permissões de pasta.

Clique no botĂŁo Upload File, selecione uma imagem.

Aguarde enquanto a imagem ĂŠ enviada...

Pronto, veja que a sua imagem ĂŠ exibida na tela, a mesma tambĂŠm foi adicionada na pasta upload dentro da pasta upload.

FORMULARIO COM PHP E JQUERY Vamos criar um mini formulário com apenas 2 campos onde iremos validar estes campos com o uso do jquery e em seguida caso os campos sejam preenchidos corretamente iremos enviar os dados na tela com o uso do php. Neste exemplo vamos utilizar a biblioteca jquery via url. 1 – Crie uma pasta com nome: form dentro de seu servidor apache. 2 – Abra seu editor e digite o seguinte código: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Exemplo formulario uso PHP e JQUERY</title> <script type="text/javascript" src="http://code.jquery.com/jquery1.4.2.min.js"></script> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></ script> <script type="text/javascript"> $(document).ready(function(){ $("#myform").validate({ debug: false, rules: { name: "required", email: { required: true, email: true } }, messages: { name: "Por favor preencha o campo nome.", email: "Preencha o campo com email valido.", }, submitHandler: function(form) { // do other stuff for a valid form $.post('process.php', $("#myform").serialize(), function(data) { $('#results').html(data); }); } }); }); </script> <style>

label.error { width: 250px; display: inline; color: red;} </style> </head> <body> <form name="myform" id="myform" action="" method="POST"> <label for="name" id="name_label">Name</label> <input type="text" name="name" id="name" size="30" value=""/> <br> <label for="email" id="email_label">Email</label> <input type="text" name="email" id="email" size="30" value=""/> <br> <input type="submit" name="submit" value="Submit"> </form>  <div id="results"><div> </body> </html> 3 – Salve este arquivo com nome: index.php dentro da pasta form criada anteriormente. 4 – Crie um novo arquivo em seu editor, e digite o código abaixo: <?php /* O PHP irá processor os dados e em seguida vai exibir na tela de seu navegador. */ print "Formulario enviado com sucesso!: <br>Seu nome é: <b>". $_POST['name']."</b> e seu email é: <b>".$_POST['email']."</b><br>"; ?> 5 – Salve com nome de: process.php dentro da pasta form, este mesmo arquivo esta sendo chamado no index.php. 6 – Execute em seu navegador e faça o teste.

Agora veja o resultado. a) Formulario sem preencher os campos.

b) Tentando enviar formulรกrio sem preencher os campos.

c) Resultado do formulรกrio depois de tudo preenchido.