Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje24-06-2011, 02:35 (UTC)    
Título del mensaje: [Jquery] Cambiar hoja de estilo CSS en vivo

Hace mucho, antes de que se creara la mejor libreria de javascript (jquery), se hizo un codigo para que solo dieras click y cambiar la hoja de el diseño, el estilo.

Dando un ejemplo pequeño, yo tengo todo mi diseño de un color, por ejemplo azul, y ese diseño lo tengo en un solo archivo incrustado, bueno, hize de ese mismo diseño azul, rojo, verde y de mas, entonces quiero que los usuarios de mi pagina seleccionen el color de la web a su preferencia, antes habia un codigo javascript muy largo… pero ahora gracias al jquery se puede hacer mas facil, aqui les dejo un codigo de cosecha propia muy facil de usar y muy corto… :D

Primero añadimos la libreria de jquery y tambien un plugin para esta el cual es de cookies
Código:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://plugins.jquery.com/files/jquery.cookie.js.txt"></script>


Si ya tienes añadido el de jquery, pero no el plugin de cookies solo añade este
Código:
<script type="text/javascript" src="http://plugins.jquery.com/files/jquery.cookie.js.txt"></script>


Ya lo tienes? ahora por enciama de la pagina añade este codigo SIN EDITAR, si lo deseas hazlo pero no es necesario

Código:
<script type="text/javascript">
/* PROGRAMADO POR http://dedydamy.com*/
$(document).ready(function(){
    var cual = $.cookie("diseno");
    var esta = $("a[name=default]").attr("title");
    if(cual == "default" || cual == "" || cual == null || cual == 0){$("link[title=ddcss]").attr("href",esta); }else{ $("link[title=ddcss]").attr("href",cual);}
    $("a[href=#ddcss]").click(function(){
        $.cookie("diseno", null);
        var quetiene = $(this).attr("name");
        if (quetiene == "default"){$.cookie("diseno","default");$("link[title=ddcss]").attr("href",esta);}else{$.cookie("diseno",quetiene);$("link[title=ddcss]").attr("href",quetiene);}
    });
});
/* PROGRAMADO POR http://dedydamy.com*/
</script>
<link title="ddcss" rel="stylesheet" type="text/css" href="" />


Ahora ya que tienes eso ya terminaste, solo añade donde quieras esto editando lo que necesitas


Cita:
<a name="default" title="URL DE CSS DEFAULT" href="#ddcss">Default, AQUI PUEDES AÑADIR TEXTO O IMAGEN</a><br>
<a name="URL DE OTRO CSS" href="#ddcss">OTRO, AQUI PUEDES AÑADIR TEXTO O IMAGEN</a><br>


Si deseas añadir mas solo agrega este codigo las veces que quieras...

Cita:
<a name="URL DE OTRO CSS" href="#ddcss">OTRO 2 ,AQUI PUEDES AÑADIR TEXTO O IMAGEN</a><br>


FUENTE: http://dedydamy.com/jquery-cambiar-hoja-de-estilo-css-en-vivo/
UPLOAD PARA TUS CSS: http://up.dedydamy.com/

No sufras, que ya lleva rata andando :D

Estadisticas escribió:
Tenemos 459 archivos subidos
378 Script's
81 PHP's

______________
PWG me vio nacer en desarrollo web, ahora estoy estudiando programacion en la universidad gracias a ti, GRACIAS PWG!


Ultima edición por dedydamy0 el Jue Jun 23, 2011 10:41 pm; editado 2 veces
Mensaje24-06-2011, 02:39 (UTC)    
Título del mensaje:

Buen post Dedy, gracias por traerlo.
______________
Off
Mensaje24-06-2011, 13:33 (UTC)    
Título del mensaje:

Excelente aporte dedy. La verdad muy buena informacion!

Saludos!
Mensaje24-06-2011, 13:42 (UTC)    
Título del mensaje:

Gracias me sirvió mucho dedydamy0
______________

Mensaje24-06-2011, 15:44 (UTC)    
Título del mensaje:

muy bueno dedy, ya había uno pero no estaba en jquery y no usaba cookies
Mensaje24-06-2011, 16:08 (UTC)    
Título del mensaje:

Hola muy buen aporte dedy
______________
http://img.webme.com/pic/a/ayuda031/firma012221.png imagen redimensionada por exceso de tamaño
Mensaje24-06-2011, 17:46 (UTC)    
Título del mensaje:

Muchas gracias por los comentarios, y esto se puede lograr con este script:

http://up.dedydamy.com/files/indexe85f.html

es muy sencillo, pero espero que les de algunas ideas :P
______________
PWG me vio nacer en desarrollo web, ahora estoy estudiando programacion en la universidad gracias a ti, GRACIAS PWG!
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group