BlogBlogs.Com.Br
Clique aqui para assinar o Feed
Participe da comunidade TheCodeBr no Orkut
Siga o TheCodeBr no Twitter

quinta-feira, 29 de abril de 2010

Tutorial JQuery - Manipulando CSS


Neste tutorial vamos estudar como modificar o css dos nossos elementos html, aprenderemos como modificar uma ou mais proriedades, remover e adicionar classes.

  

Para você que não conhece o JQuery, clique aqui e leia o tutorial de introdução.

Com o nosso querido JQuery, podemos manipular por completo os estilos dos nosso elementos com uma facilidade enorme, utilizando de forma criativa, podemos fazer coisas incriveis, apenas com algumas linhas de código.

VEJA AQUI O RESULTADO FINAL DESTE TUTORIAL

Vamos ao que interessa, ao tutorial, clique no leia mais para ler o post por completo.

Tutorial:

Como vocês já sabem estruturar um arquivo html para receber o código em JQuery, não vou entrar em detalhes nestes passos (para ver como isso funciona clique aqui).

Vamos a mágica, copie ou escreva o código abaixo em seu arquivo HTML.

<html>
<head>
<title>.:: thecodebr.blogspot.com -
Tutorial JQuery - Manipulando CSS</title>

<script src="jquery-1.4.2.min.js" type="text/javascript">
</script>

<script type="text/javascript">

$(document).ready(function () {

    //Adiciona evento click ao item cor texto
    $("#cor").click(function () {

        //Adiciona evento click ao item tamanho do texto
        $("#conteudo").css("color", "#66FF00");

    });



    //Variavel setando valor incial do tamanho do texto
    var sTamanhoTexto = 10;

    //Adiciona evento click ao item tamanho do texto
    $("#tamanho").click(function () {

        //Seta variavel com o valor dela mesma + 1
        sTamanhoTexto = sTamanhoTexto + 1;

        //Modifica o css do texto, .css("PROPRIEDADE", " VALOR")
        $("#conteudo").css("font-size", sTamanhoTexto + "px");

    });



    //Adiciona evento click ao item corfundo
    $("#fundo").click(function () {

        //Modifica o css do body, .css("PROPRIEDADE", " VALOR")
        $("body").css("background-color", "#FF6600");

    });


    //Adiciona evento click ao remove classe
    $("#remove").click(function () {

        //Remove classe
        $("#conteudo").removeClass("texto");

    });




    //Adiciona evento click ao adiciona classe
    $("#add").click(function () {

        //adiciona classe
        $("#conteudo").addClass("texto");

    });


});
    
</script>


<style type="text/css">     
    body
    {
        background-color: #003366;
        color: #FFFFFF;
        font-family: Verdana;
        font-size: 10px;
    }
        
    #controles span
    {
        cursor: pointer; 
    }
        
    #controles
    {
        width: 500px;
        margin-top: 20px;
        text-align:left;
        background-color: #0B152B;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 15px;  
    }
        
    .texto
    {
        font-family: Verdana;            
        font-weight: bold;
        color: #FFFFFF;
        line-height: 200%;
        margin-top: 30px;
        width: 500px;
        text-align: justify;  
    }
</style>    

</head>
<body>
<center>
<h1>Lorem Ipsum is simply dummy</h1>
<div id="conteudo" class="texto">
Text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard 
dummy text ever since the 1500s,
when an unknown printer took a galley of type 
and scrambled it to make a type specimen book. 
It has survived not only five centuries, 
but also the leap into electronic typesetting, 
remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets 
containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker 
including versions of Lorem Ipsum. text of the printing and 
typesetting industry.
<br />
<br />
Lorem Ipsum has been the industry's standard dummy text 
ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. 
It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset
sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including 
versions of Lorem Ipsum.
</div>
<div id="controles">
<h3>Controles:<br />
<br />
</h3>
<span id="cor">- Cor Texto</span>
<br /><br />
<span id="tamanho">- Tamanho Texto</span>
<br /><br />
<span id="fundo">- Cor Fundo</span>
<br /><br />
<span id="remove">- Remover Classe do texto</span><span id="add"> - Adicionar Classe ao texto</span>
</div>
</center>    
</body>
</html>     


Não vou comentar aqui no texto linha por linha, pois o que nos interessa já está comentado no código.

Viu como é facil ? Prático não ?

Até a próxima, abraços á todos, qualquer duvida comentem.


Nenhum comentário:

Postar um comentário


----------------------------------------------------

About me (+)

Jonatas Freitas

Este blog surgiu da minha necessidade de passar meu conhecimento adiante e tornar esta web ainda mais bonita e funcional.

Meus artigos serão direcionados ao desenvolvimento web em geral.
Tutoriais, dicas, notícias e boas práticas sobre: Html, css, JQuery, action script, c# e outros.

Boa sorte nos estudos.

E-mail:
jonatas.freitas@live.com

----------------------------------------------------


Download:


----------------------------------------------------


----------------------------------------------------

Chat Rápido:


----------------------------------------------------

Contador:

Free Hit Counter
----------------------------------------------------

Tools:

Parceria.info - Divulgue seu Site
Technology Blogs

Free SEO Tools

{thecodebr} 2010 {/thecodebr}