Tags: css

31.10.08

jQuery: Criando efeitos de "troca" de imagens

Issue time03:19:00, por mrxrsd Email 3677 visualizações
Categorias: jquery, design, css

Empolgado com a ultima lição de jQuery, vi uma técnica chamada spriteNav e resolvi fazer uma implementação usando jQuery, depois vou ver se faço um plugin para facilitar o uso.

Leia mais »

Tags: css, design, jquery
Deixe seu comentário Envie um trackback
30.10.08

jQuery: Aprenda o Básico - Lição 5

Issue time03:27:29, por mrxrsd Email 625 visualizações
Categorias: javascript, jquery, design, css

Nós vimos nas lições anteriores como se seleciona um objeto, altera seu posicionamento e seus atributos, hoje iremos ver como se faz para adicionar eventos aos elementos. Cada browser trata o evento de uma forma e nisso que o jQuery nos facilita, ele proporciona uma api cross-browser para tratamento de eventos.

Leia mais »

Tags: css, design, javascript, jquery
Deixe seu comentário Envie um trackback
20.10.08

jQuery: Criando um banner com efeitos de transição imagens

Issue time06:16:20, por mrxrsd Email 7006 visualizações
Categorias: javascript, jquery, design, css





Além das diversas funcionalidades que o jQuery nos proporciona ele conta com vários plugins, acredito que seja por isso que ele se tornou tão interessante como é hoje.

Um desses plugins é o InnerFade, que é capaz de criar transições de elementos css, podemos arrumar diversas utilidades pra isso, irei mostrar como criar um banner de transição de imagens.

Leia mais »

Tags: css, design, javascript, jquery
7 comentários Envie um trackback
17.10.08

jQuery: Adicionando dicas de preenchimento nos formulários

Issue time05:33:52, por mrxrsd Email 624 visualizações
Categorias: javascript, jquery, design, css



O uso de formulários é a forma mais comum de interação e troca de dados entre usuário-página, porém o formulário sempre obedece certos padrões e tipo de dados e quando isso não é tratado de forma eficiente podemos ter inconsistência na nossa base de dados e erros nos aplicativos.

Leia mais »

Tags: css, design, javascript, jquery
Deixe seu comentário Envie um trackback
10.10.08

jQuery: Aprenda o Básico - Lição 3

Issue time07:58:05, por mrxrsd Email 327 visualizações
Categorias: javascript, jquery, design, css

Recapitulando...

Na lição 1 aprendemos sobre o operador $ e coleções de elementos da página, na lição 2 nós vimos como podiamos iterar sobre os elementos e alterar seus atributos.

Hoje iremos ver como alterar o conteudo de um elemento.

Leia mais »

Tags: css, design, javascript, jquery
Deixe seu comentário Envie um trackback
07.10.08

jQuery: Aprenda o Básico - Lição 2

Issue time13:02:48, por mrxrsd Email 499 visualizações
Categorias: javascript, jquery, design, css

Como vimos na Lição 1, o jQuery através do operador $ retorna uma coleção de elementos, assim como nas linguagens OO, podemos iterar sobre essa coleção.

Leia mais »

Tags: css, design, javascript, jquery
Deixe seu comentário Envie um trackback
06.10.08

JQuery: Melhore o visual das suas tabelas

Issue time04:25:56, por mrxrsd Email 634 visualizações
Categorias: javascript, jquery, design, css

Vamos começar com uma tabela simples.

HTML:

<table border="1" width="200px" cellspacing="0">
        <tr>
                <td colspan="2">
                        Titulo
                </td>
        </tr>
        <tr>
                <td>
                        a
                </td>
                <td>
                        b
                </td>
        </tr>
        <tr>
                <td>
                        a
                </td>
                <td>
                        b
                </td>
        </tr>
</table>

Ela vai ter essa aparencia:

Vamos melhorar um pouco o visual colocando uma imagem gradiente no titulo.

CSS:

.linhaTitulo {
                 background-image: url(bg_titulo_tbl.jpg);
                 color: #FFF;
                 text-align:center;
        }

Não podemos esquecer de adicionar o class="linhaTitulo" na linha da tabela. O visual ficou um pouco melhor, uma outra idéia interessante é colocar para mudar a cor da linha quando o mouse tiver em cima, obtendo o visual abaixo.

Iremos obter esse efeito com a ajuda do JQuery e CSS. Para adicionar o JQuery:

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

E depois fazemos o javascript responsável pelo onmouseover

Javascript:

<script type="text/javascript">
                $(function(){
                        $( 'tbody tr' )
                                .mouseover(function(){
                                        $(this).addClass('over');
                                })
                                .mouseout(function(){
                                        $(this).removeClass('over');
                                });
                });
        </script>

E tambem é necessário adicionar a classe css com as novas cores quando se passa o mouse.

CSS:

.over {
                background: #0BF;
        }

Código Final:

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
        <script type="text/javascript">
                $(function(){
                        $( 'tbody tr' )
                                .mouseover(function(){
                                        $(this).addClass('over');
                                })
                                .mouseout(function(){
                                        $(this).removeClass('over');
                                });
                });
        </script>
       
    <style type="text/css">
        tr {
                background: #FFF;
        }

        .over {
                background: #0BF;
        }
               
        .linhaTitulo {
                 background-image: url(bg_titulo_tbl.jpg);
                 color: #FFF;
                 text-align:center;
        }
       
        table {
                border: 1px solid;
        }
        </style>



<table border="1" width="200px" cellspacing="0">
        <tr class="linhaTitulo">
                <td colspan="2">
                        Titulo
                </td>
        </tr>
        <tr>
                <td>
                        a
                </td>
                <td>
                        b
                </td>
        </tr>
        <tr>
                <td>
                        a
                </td>
                <td>
                        b
                </td>
        </tr>
</table>

Página de teste: clique aqui

Tags: css, design, jquery
Deixe seu comentário Envie um trackback

Busca

Categorias

.net ajax arquitetura asp.net banco de dados c# csharp css design dicas dotnet framework ide java javascript jquery js linq mootools mvc news padroes de projeto php sql sql server tecnologia tools vb visual studio xml zend zend framework

Assine nosso Blog

Fazemos parte do Grupo

Hot Topics