Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Cómo crear un increíble conmutador de estilo jQuery

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Juan Pablo Diaz Cuartas (you can also view the original English article)

En este tutorial, le mostraré cómo crear un selector de estilo usando jQuery y PHP. El resultado final será un conmutador de estilo dinámico discreto y totalmente degradable que será rápido y fácil de implementar.




Paso 1: El HTML

Primero, necesitamos crear nuestro archivo HTML básico y guardarlo como index.php:

Verás que hay algo de PHP justo debajo del atributo de título en el encabezado. Es muy simple: todo lo que hace es buscar una cookie llamada "estilo"; si existe, la asigna a la variable local (también llamada "estilo") y si la cookie no existe, asigna el tema predeterminado ( "día") a la variable de $estilo . Esta variable se repite dentro del atributo href del elemento de enlace  (href="css/ <?php echo $style ?>.css").

Verás que el div style-switcher se incluye arriba en nuestro HTML. No es necesario agregar esto usando JavaScript porque el método que estamos usando permitirá que el selector de estilo funcione cuando JavaScript esté desactivado. Los dos enlaces (noche y día) llevan al usuario a un archivo llamado style-switcher.php con una cadena de consulta adjunta que especifica el tema correspondiente (por ejemplo, href = "style-switcher.php? Style = day").

También llamé al complemento jQuery llamado styleSwitcher. Esto aún no se ha desarrollado (bueno, lo tendrá cuando lo lean), ¡así que esperen! ... Escribiremos este complemento en el paso 4 de este tutorial.

Paso 2: El CSS

Ahora, necesitamos crear un par de CSS StyleSheets para nuestro HTML. He decidido crear solo dos hojas de estilo: una tendrá el tema de "Día" y la otra tendrá el tema de "Noche" y las he nombrado de forma adecuada. (day.css y night.css)

El tema del día:

Night Theme

El tema de la noche:

Night Theme

Lo mejor es comenzar con un estilo y luego copiar a través de todos los selectores a la hoja de estilos alternativa, y entonces todo lo que necesita cambiar son las diversas reglas y declaraciones de CSS. Obviamente, puede tener tantas hojas de estilo como desee, pero en este tutorial usaremos dos con fines ilustrativos. ¡Además, la noche y el día van bien juntos como un dúo!

day.css:

night.css:

Esto no es realmente un tutorial de CSS, así que no profundizaré en ninguno de los anteriores, pero si tiene alguna pregunta, no dude en preguntar en la sección de comentarios. Y sí, sé que el ancho mínimo no es compatible en navegadores más antiguos. ;)

Paso 3: style-switcher.php

Aquí es donde escribimos la funcionalidad principal del selector de estilo. En realidad, se trata de unas pocas líneas de código PHP muy básico. Debería crear un nuevo archivo llamado "style-switcher.php" y copiar lo siguiente en él:

Entonces, lo que hace el código anterior es asignar la variable GET "style" a una variable de $estilo  local. En otras palabras, tomará el valor de la propiedad de estilo dentro de la cadena de consulta (style-switcher.php? Style = day). Luego establece una cookie (por una semana) llamada "estilo": podremos recuperar esta cookie en nuestro index.php principal con el código que se muestra en el paso 1 (¿recuerdas ese pequeño trozo de PHP en la head?). Luego, verifica si se agrega "js" a la cadena de consulta. Si es así, sabremos que JavaScript (que todavía tenemos que escribir) ha solicitado este script PHP. La condición else ocurre cuando un usuario no tiene habilitado JavaScript y redirige al usuario a la referencia (es decir, la página de la que acaba de salir). ¡Esto se volverá más claro una vez que hayamos escrito las cosas de jQuery!

Paso 4: Las cosas de jQuery

¡Puedes, si quieres, detenerte aquí! ... La solución hasta ahora funcionará perfectamente, pero como dije en la introducción vamos a hacerlo aún más genial con un jQuery asombroso! No solo vamos a permitir que el usuario cambie su tema sin refrescar la página, sino que también agregaremos un efecto de desvanecimiento realmente genial ... Quiero decir, ¿qué tipo de tutorial de jQuery sería si no hubiera desvanecimiento?!?

Obviamente, todo esto es posible sin tener que crear un complemento, pero pensé que sería una buena experiencia de aprendizaje para todos ustedes, además de que nos permite adaptar o transferir el código de forma rápida y sencilla.

Primero, creemos un archivo llamado "styleswitcher.jquery.js".

Hacer un nuevo complemento en jQuery es extremadamente simple; todo lo que necesita es el siguiente código:

Entonces, primero queremos especificar qué sucede cuando se hace clic en uno de los enlaces de StyleSheet (dentro de div # style-switcher):

loadStyleSheet:

Ahora necesitamos escribir la función loadStyleSheet:

Espero que los comentarios lo explicaron lo suficiente. El más atento de ustedes habrá notado que estamos llamando a una función actualmente no definida (cssDummy.check ()). No te preocupes porque ese es el siguiente paso ...

cssDummy:

Necesitamos una forma de comprobar si se ha cargado una StyleSheet. Si se ha cargado, podemos hacer desaparecer el div superpuesto, pero si no lo hemos hecho, debemos seguir comprobando hasta que se cargue. Hice un poco de búsqueda en la red y encontré una manera confiable de probar tal cosa. Implica probar el ancho calculado de un elemento ficticio. El ancho de este elemento se definirá en el CSS, por lo que el ancho calculado del elemento solo será igual al ancho definido en el CSS cuando se haya cargado la hoja de estilos. Espero que entiendas por qué tuvimos que incluir esa regla de "elemento ficticio" en cada archivo CSS ...

Asi que aqui esta:

Y, justo al final de nuestro complemento, llamaremos a la función cssDummy.init:

¡Terminamos! El complemento completo ahora se ve así:

Ahora podemos llamar al plugin jQuery así:

¡Terminado!

Si no está seguro acerca de la estructura del archivo, descargue los archivos src para echar un vistazo. Espero que hayan disfrutado leyendo este tutorial. Como siempre, si tiene alguna pregunta, ¡siéntase libre de preguntar a continuación! Si disfrutaste esta publicación, por favor Digg it!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.