Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

08 Nov Posted by in CSS, Javascript, Jquery | 4 comments

Alterando layout e estilo da página usando CSS e jQuery.

Alterando layout e estilo da página usando CSS e jQuery.
 

O seu site não precisa ter somente um estilo, você pode fazer vários arquivos .css (arquivos de estilo) e deixar seu usuário escolher qual prefere com apenas um clique!

Como podemos fazer isto?

Simples, trocamos o arquivo .css pela jQuery sem atualizar a página e gravamos o arquivo escolhido pelo usuário no cookie. Assim, toda vez que entrar no site, será exibido o layout escolhido por ele.

PÁGINA DE EXEMPLO DA TROCA DE CSS


Arquivo HTML

Abaixo um arquivo html de exemplo para trocarmos o layout de nossa pagina

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
  <head>
    <title>Alterar Layout página com css e jQuery</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/default.js"></script>
    <link rel='stylesheet' type='text/css' href='css/style1.css' media='screen' />
  </head>
  <body>
    <div id="general">
      <div id="menu">
				<ol>
					<li><a href="#" class="switchCss" rel="style1.css">Css 1</a></li>
					<li><a href="#" class="switchCss" rel="style2.css">Css 2</a></li>
					<li><a href="#" class="switchCss" rel="style3.css">Css 3</a></li>
				</ol>
			</div>

			<div id="middle">
				<p>
               		Alterando layouts e estilos da página usando CSS e jQuery.
            	</p>
			</div>

			<div id="footer">
				<p>Developed by <a target="_blank" href="http://www.ronieneubauer.com/blog/">Ronie Neubauer</a></p>
			</div>
        </div>
    </body>
</html>

HTML explicado:

Neste arquivo HTML foi adicionado 3 arquivos em javascript:

  • Jquery
  • Jquery.Cookie – Plugin para gravar no cookie usando jQuery
  • default.js – Arquivo contendo nosso código de configuração
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/default.js"></script>

Além dos arquivos “js”, adicionamos um arquivo inicial de estilo, chamado style1.css

<link rel='stylesheet' type='text/css' href='css/style1.css' media='screen' />

No html, colocamos uma lista ordenada (ol) contendo 3 links. Ao clicar em cada link, o layout da página será alterado, através da troca de arquivos .css.

<ol>
   <li><a href="#" class="switchCss" rel="style1.css">Css 1</a></li>
   <li><a href="#" class="switchCss" rel="style2.css">Css 2</a></li>
   <li><a href="#" class="switchCss" rel="style3.css">Css 3</a></li>
</ol>

Repare que cada link possui um parâmetro REL. Nele, colocaremos o respectivo nome de arquivo de estilo (.css) que desejamos modificar na página. Todos eles possuem a classe switchCss que iremos usar no default.js

Vamos ao nosso arquivo default.js


function init()
{
   if($.cookie('css')) {
      $('link[rel=stylesheet]').attr('href', 'css/' + $.cookie('css'));
   }

   $('.switchCss').click(function() {
      $('link[rel=stylesheet]').attr('href' , 'css/' + $(this).attr('rel'));
      $.cookie('css',$(this).attr('rel'), {expires: 7, path: '/'});
      return false;
   });
}

// Quando a pagina estiver carregada chama a funcao init.
$(document).ready(init);

Função init explicada:

Linha 03 Verifica se já existe o nome de algum css no cookie.
Linha 04 Caso exista, iniciamos o html com o arquivo de estilo do cookie escolhido inicialmente pelo usuário
Linha 07 Escuta o click em qualquer um dos links que contenha o nome dos css a serem trocados. Mapeamos eles pela classe switchCss do HTML.

– Caso o link seja clicado para alterar o arquivo .css:
Linha 08 Troca o css da página pelo nome do css que está dentro da tag REL do link clicado.
OBS: antes do conteudo da tag REL, coloquei ‘css/’ + pois meu arquivo css está dentro da pasta chamada css.
Linha 09 Grava nome do css no cookie. Configura para expirar em 7 dias. Utilizamos “/” para que funcione em todas as páginas.
Linha 10 Retornamos false para desabilitar o click do link, evitando assim que o “#” apareça na URL da página.

ARQUIVO COMPLETO DO EXEMPLO PARA DOWNLOAD.


  1. Rety17:07:59 08/11/2010

    Bem simples e funcional! Muito bom!

  2. Natan Miranda19:01:54 07/02/2011

    Muito bom mesmo, funciona! Porém, não consegui usar porque após inserir o script, o browser só lê o primeiro arquivo CSS no cabeçalho, e no meu caso, são várias folhas de estilo …. não consegui fazer nada para arrumar :/

  3. Alexandre00:02:38 12/11/2011

    Era tudo o que eu precisava!
    Muito obrigado ronieneubauer, encontrei muito dinamismo na sua proposta, caiu como uma luva.

  4. spcl21:00:10 20/06/2012

    genial

Leave a Reply