JQuery PHP, Zend_Framework, Doctrine, PHPUnit, JavaScript, Ajax,...

http://tiagobutzke.wordpress.com/category/jquery/

PHP, Zend_Framework, Doctrine, PHPUnit, JavaScript, Ajax, Acessibilidade, SEO Troca de informaes sobre desenvolvimento WEB

Incio Tiago Batista Butzke Contato Posts Comentrios PHP Zend Framework Banco de dados Doctrine JQuery JavaScript CSS Ajax Outras Mac Os

19 19UTC agosto 19UTC 2010 por tiagobutzke 4 comentrios Boa noite pessoal, entramos ento na semana do ajax. UrruLL. Hoje vou mostrar como fazer uma lista onde muda-se a ordem dos itens. Atualizando no banco de dados. Para isso vamos utilizar a biblioteca ui do Jquery que pode ser baixada aqui. O cdigo HTML (pagina.php):
01 02 03 04 05 06 07 08 09 10 11 12 <pre> <pre><script language="text/javascript" src="js/jquery-1.4.2.min.js"></script></pre> </pre> <script language="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> <div id="demo"></div> <ul id="sortable"> <?php foreach($usuarios as $usuario) { ?><li id="usuarioId_<?php print $usuario['usuarioId'];?>"><?php print $usuario["nome"]; ?></li><?php } ?> </ul>

O cdigo JavaScript (javascript.js):

1 2 3 4 5 6 7 8 9 $(function() { $("#sortable").sortable({ update: function() { var order = $('#sortable').sortable('serialize'); $("#info").load("processo.php?usuarioId/"+order); } }); $("#sortable").disableSelection(); });

1 de 6

01/10/2010 15:51

JQuery PHP, Zend_Framework, Doctrine, PHPUnit, JavaScript, Ajax,...

http://tiagobutzke.wordpress.com/category/jquery/

O cdigo PHP (processo.php), demonstrarei com o cdigo mais simples possvel pra facilitar o entendimento:
1 2 3 4 5 6 7 8 9 $stringUsuarioId = str_replace("&", "", $_GET["usuarioId"]); $arrayUsuarioId = array_slice(explode("usuarioId[]=", $stringUsuarioId), 1); $count = 1; foreach($arrayUsuarioId as $usuarioId) { mysql_query("UPDATE usuarios SET position = $count WHERE usuarioId = $usuarioId"); $count++; } print "Lista atualizada com sucesso!";

Pronto, isso pessoal. Espero que tenham intendido. Qualquer dvida/sugesto ou agradecimento deixe um comentrio. NO DEIXE DE COMENTAR. Abraos! Arquivado em Ajax, JQuery, PHP Etiquetado comoBanco de dados, Banco, lista, javascript, editar, ajax, Mudar, div, JQuery, drag, and, drop, drag and drop, drag & drop, mover, posio, &

10 10UTC agosto 10UTC 2010 por tiagobutzke Deixe um comentrio Boa tarde pessoal, esta ser a semana do JQuery. E hoje vou postar algo bem simples que como mudar uma propriedade css de um elemento utilizando JQuery (Se voc esta querendo fazer isso por javascript puro mesmo click aqui): O objeto do JQuery usado pra isso o .css(); e funciona da seguinte forma .css(propriedade, atributo); ex: .css(color, red);. Darei um exemplo de uso: - Pgina HTML:
1 2 3 4 5 <ul> <li>Item 1<li> <li>Item 2<li> <li>Item 3<li> </ul>

- Cdifo JavaScript:
1 $("li").css("color", "red");

Este exemplo pintar de vermelho todos os elementos li. Observando que ele pega todos os <li>`s e no apenas um. Depois farei um post sobre os seletores JQuery. Abaixo segue uma tabela com as propriedades css e suas equivalentes pro JQuery: Propriedade CSS background background-attachment background-color background-image background-position background-repeat Referncia JavaScript background backgroundAttachment backgroundColor backgroundImage backgroundPosition backgroundRepeat

2 de 6

01/10/2010 15:51

JQuery PHP, Zend_Framework, Doctrine, PHPUnit, JavaScript, Ajax,...

http://tiagobutzke.wordpress.com/category/jquery/

border border-bottom border-bottom-color border-bottom-style border-bottom-width border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-width border-width clear clip color cursor display filter font font-family font-size font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top overflow padding padding-bottom padding-left padding-right padding-top page-break-after

border borderBottom borderBottomColor borderBottomStyle borderBottomWidth borderColor borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRight borderRightColor borderRightStyle borderRightWidth borderStyle borderTop borderTopColor borderTopStyle borderTopWidth borderWidth clear clip color cursor display filter font fontFamily fontSize fontVariant fontWeight height left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop overflow padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter

3 de 6

01/10/2010 15:51

JQuery PHP, Zend_Framework, Doctrine, PHPUnit, JavaScript, Ajax,...

http://tiagobutzke.wordpress.com/category/jquery/

page-break-before position float text-align text-decoration text-decoration: blink text-decoration: line-through text-decoration: none text-decoration: overline text-decoration: underline text-indent text-transform top vertical-align visibility width z-index

pageBreakBefore position styleFloat textAlign textDecoration textDecorationBlink textDecorationLineThrough textDecorationNone textDecorationOverline textDecorationUnderline textIndent textTransform top verticalAlign visibility width zIndex

Espero que tenham gostado. Qualquer coisa deixe um comentrio. Arquivado em CSS, JQuery Etiquetado comocomo, javascript, Muda, CSS, Mudar, propriedade, cor, JQuery, Biblioteca

9 09UTC agosto 09UTC 2010 por tiagobutzke Deixe um comentrio Bom dia pessoal, andei meio sem tempo pra postar mas consegui uma brecha hoje e estou eu aqui. Vou falar hoje sobre os efeitos em JQuery. Existem vrios efeitos faclimos de se aplicar vou listar alguns a seguir junto com sua demonstrao de uso: .show() -> Revela o seletor JQuery.
1 $('#div').show(1500); // 150 a velocidade com que ser revelado o elemento

.hide() -> Contrrio do show ele esconde o elemento selecionado:

1 $("#div").hide(1500);

.toogle() -> Cria um efeito de alternncia de visibilidade entre o elemento selecionado. Quando escondido revela e quando revelado esconde:
1 $("#div").toogle();

.slideDown() -> Revela suavemente o elemento escondido por meio do aumento gradativo da altura do seletor JQuery (de cima para baixo):
1 $("#div").slideDown(1500);

.slideUp() -> Esconde o elemento suavemente de baixo pra cima.

1 $("#div").slideUp(1500);

.slideToogle() -> Revesa entre o slideDown e o slideUp, revelando quem se encontra escondido e

4 de 6

01/10/2010 15:51

JQuery PHP, Zend_Framework, Doctrine, PHPUnit, JavaScript, Ajax,...

http://tiagobutzke.wordpress.com/category/jquery/

escondendo quem se encontra revelado.

1 $("div").slideToogle(1500);

.fadeIn() -> Revela o elemento por meio de aumento gradativo de opacidade:

1 $("#div").fadeIn(1500);

.fadeOut() -> Esconde o elemento selecionado por meio de diminuio de opacidade:

1 $("div").fadeOut(1500);

.fadeTo() -> Alterna entre visvel e invisvel usando os efeitos de fadeIn() e fadeOut():
1 $("#div").fadeTo(1500);

.animate() -> Permite criar animaes personalizadas para o elemento selecionado:

1 2 3 4 $("#div").animate( {opacity: "toogle", width:"hide"}, {duration: "2000"} );

.stop() -> Permite que voc interrompa a animao em andamento:

1 $("#div").stop();

Deixem um recado, por mais que seja pra xingar o artigo. Abraos! Arquivado em JQuery, JavaScript Etiquetado comoAnimao, Animar, Biblioteca, como, Efeito, Efeitos, Exemplo, javascript, JQuery

20 20UTC junho 20UTC 2010 por tiagobutzke Deixe um comentrio Bom dia pessoal, essa semana resolvi me aprofundar um pouco em JQuery. Hoje vou postar uma funo pra manipular AJAX via JQuery. Impressionante como o JQuery diminui o tamanho e organiza os cdigo JavaScript. Segue a funo:
01 02 03 04 05 06 07 08 09 10 11 12 13 function processaJavaScript(parametro) { //Abre a funo javascript $.ajax( //chama o elemento ajax do jquery { type: "POST", //define como sero passados os parametros pra URL url: "ajax.php", //url na qual se encontra o cdigo PHP data: "parametro=" + parametro, //parametros beforeSend: function() {}, //depois que enviar a funo success: function(txt) { //quando for um sucesso $('#idDivResultado').html(txt); //insere o resultado na div de id="idDivResultado" }, error: function(txt) {} //caso retorne erro } );}

Simples assim. Crditos pro Marcelio Leal que me passou essa funo, antes de eu comear a estudar JQuery.

5 de 6

01/10/2010 15:51

JQuery PHP, Zend_Framework, Doctrine, PHPUnit, JavaScript, Ajax,...

http://tiagobutzke.wordpress.com/category/jquery/

Abraos. Qualquer dvida/sugesto/agradecimento s deixar um comentrio. Arquivado em Ajax, JQuery, PHP Etiquetado comoPHP, javascript, ajax, manipula, JQuery Publicidade @tiagobutzke Top 10 aplicaes em AIR e FLEX http://is.gd/fEIvo 1 hour ago Hehehe, era Russo. RT @LuisaFerreira: @tiagobutzke isso Neozelandes seladoo 4 hours ago Como que eu vou ler isso? Algum traduz? Ou pelo menos sabe que lngua essa pra o Google Translate me ajudar? http://is.gd/fEhGD 5 hours ago Material online bom sobre design patterns em PHP http://www.fluffycat.com/PHP-Design-Patterns/ 7 hours ago FUI! 15 hours ago Notificao por e-mail Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Blogroll Doctrine PHP-GTK Site muito bom sobre programao Site oficial onde voc encontra tudo sobre a linguagem PHP Zend Framework Blog no WordPress.com. Tema: Enterprise por StudioPress.

6 de 6

01/10/2010 15:51