Cargar hojas de estilo dinámicamente usando MooTools 1.2 - » HostIN
La tematización se ha convertido en una gran parte de la revolución…
- HostIN
- Programación
- Cargar hojas de estilo dinámicamente usando MooTools 1.2 -
Cargar hojas de estilo dinámicamente usando MooTools 1.2 -
La tematización se ha convertido en una gran parte de la revolución Web 2.0. Afortunadamente, también se tiene más en cuenta la semántica y los estándares CSS. Si crea sus páginas utilizando un buen código XHTML, cambiar un archivo CSS puede hacer que su sitio web se vea completamente diferente. Usando un breve fragmento de MooTools, puede cargar dinámicamente hojas de estilo primarias modificadas con solo un clic.
Índice de contenidos
Paso 1: el XHTML
pa href="https://soloprogramadores.top/cargar-hojas-de-estilo-dinamicamente-usando-mootools-1-2/?theme=black" rel="load-stylesheet/black.css"Cargar hoja de estilo negro/abr /br /a href="?theme=red" rel="load-stylesheet/red.css"Cargar hoja de estilo roja/abr /br /a href="?theme=blue" rel="load-stylesheet/blue.css"Cargar hoja de estilo azul /abr /br //p
Arriba hay tres enlaces a tres temas. Se agrega la clase load-css y el atributo rel contiene la ruta al archivo CSS por el bien de MooTools. Si el usuario no tiene JavaScript, agregué un atributo href para permitir que la página cambie el tema usando métodos del lado del servidor al cargar una nueva página.
Paso 2: el CSS
/* negro.css */body { fondo:#000; color:#fff; }a{ color:#ccc; }/* azul.css */body { fondo:#00f; color:#fff; }a{ color:#fff; }/* red.css */body { fondo:#f00; color:#fff; }a{ color:#fff; }
Arriba puede ver el contenido de tres archivos de hojas de estilo. Estos pueden actuar como tres temas diferentes, por así decirlo.
Paso 3: JavaScript de MooTools
window.addEvent('domready', function () {//para cada ancla con la clase "load-css"...$$('.load-css').each(function(el) {//agrega un haga clic en el evento para agregar la hoja de estiloel.addEvent('click', function() {//obtener el archivo. El archivo se basa en el atributo rel del anclavar css = new Asset.css(el.get('rel'), { }) ;});});});
El fragmento de JavaScript de MooTools es muy simple. Para cada enlace con la clase load-css, se agrega un detector de eventos de clic para cargar la hoja de estilo especificada. Una vez que se ha inyectado una hoja de estilo en la página, no se realizan más llamadas a archivos; una vez cargada, se carga.
- Cargas de página AJAX usando MooTools Fx.Explode -
- Cargando plantillas estáticas para pruebas internas -
Te podría interesar...
Cómo ganar dinero en Internet: 13 formas de empezar Agregar controles al calendario PHP - Agregar eventos a Agregar eventos en MooTools - Los servicios de diseño gráfico, alojamiento web y motores de búsqueda pueden llevar su negocio en línea a nuevas alturas Flux lanza una plataforma de alojamiento de WordPress descentralizada en versión beta cerrada Cómo optimizar su sitio de WordPress para dispositivos móviles 4 razones para consolidar el alojamiento de WordPress Alojamiento gratuito en el exterior: ¿está al alcance de la mano? Cómo los líderes de I&O pueden adoptar la informática de alto rendimiento para impulsar la innovación
Deja una respuesta Cancelar la respuesta
Lo siento, debes estar conectado para publicar un comentario.