Style switcher
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Style switcherStyle switcher

 

Style switcher

Google       Google       10. 6. 2006       12 801×

Na rôznych diskusných fórach k PHP sa často objavuje dotaz na to, ako docieliť zmenu vzhľadu stránky po kliknutí na odkaz. Je to pomerne jednoduché, a tak vám to v krátkosti predvediem.

Reklama
Reklama

Treba si uvedomiť, že vzhľad stránky je tvorený pomocou CSS súboru, a teda náš skript má za úlohu docieliť len zmenu linku na .css súbor. Preto si treba pripomenúť, že pokiaľ chcete meniť vzhľad celej stránky, musí byť celá štýlovaná v CSS a všetky štýly musia byť robené na jedno HTML (čí XHTML) telo stránky.

Predstavme si názorovú situáciu. Ako hlavnú stránku webu máme napríklad main.php a k nej máme napísaných pár CSS súborov predstavujúcich zelený, modrý a kvetinkový dizajn: style-zeleny.css style-modry.css a style-hippies.css. Pre naše účely vytvoríme k týmto štyrom ešte jeden dokument load_style.php, ktorého úlohou bude uložiť do cookies hodnotu predstavujúcu daný dizajn.

Vo vašom menu na stránke, kde máte odkazy, si pripojíte odkazy na štýly v takomto tvare:


<a href="load_style.php?style=zelene_ako_trawicka" >Zelený štýl</a>
<a href="load_style.php?style=modre_nebo" >Modrý štýl</a>
<a href="load_style.php?style=hippies_rulez" >Kvetinkový štýl</a>
//pravdaže hodnoty premennej style si nadefinujte ako vám to vyhovuje ;)

Teraz po kliknutí na odkaz cestuje naša premenná style k súboru load_style.php, ktorý by ju mal spracovať veľmi jednoduchým spôsobom, a to uložiť jej hodnotu do cookies užívateľa. Názorný kratučký príklad, pre vás špeciálne s komentárom:



Poslednou časťou príkladu by, ako ste sa iste dovtípili aj sami, malo byť načítavanie cesty k CSS súboru pomocou načítania hodnoty z cookies. Nasledujúci príklad by ste mali umiestniť do main.php medzi tagy <head> a </head> namiesto linku k CSS súboru. Myslím, že všetko potrebné k vysvetleniu skriptíku nájdete v komentároch, ktoré tam pripíšem:


";
//a samotný vygenerovaný html tag pre načítanie zvoleného dizajnu ;)
?>

Tak to by bolo všetko ohľadne „meniča css štýlov“.

Doposiaľ som videl veľa rôznych style switcherov, no obvykle bývajú jeden ako druhý a líšia sa len minimálne. Ak ste náhodou niečo podobné potrebovali, dúfam, že so vám pomohol. Všetky otázky, ale aj prípadné pripomienky v diskusii pod článkom ;).

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

4 názory  —  4 nové  
Hlasování bylo ukončeno    
0 hlasů
Google
Autor programuje v PHP, MySQL a Javě.

Nové články

Obrázek ke článku RAD Studio a Windows Store

RAD Studio a Windows Store

RAD Studio je první vývojové prostředí se zabudovanou podporou balení aplikací typu Win32 a Win64 pro jejich umístění a šíření prostřednictvím Windows 10 Store.

Reklama
Reklama
Obrázek ke článku Testujte na 2 400+ Android a iOS zařízení

Testujte na 2 400+ Android a iOS zařízení

V dnešní době, kdy většina softwaru pro mobilní aplikace je tvořena a distribuována průběžně, mnohdy do celého světa je třeba zajistit také průběžnou automatizaci testování mobilního softwaru. V případě mobilních aplikací pro Android a iOS začíná být problém, jak testovat na obrovském množství kombinací HW variant, rozměrů, edic operačních systémů různých výrobců v různých částech světa na reálných zařízení. Simulátory a emulátory nejsou většinou to pravé. Pokud již testuji, jak si udělat vlastní beta distribuci opravdovým reálným testerům napříč platformami?

Obrázek ke článku Funkcie main vo Windows API

Funkcie main vo Windows API

V tretej časti seriálu o Windows API budeme hovoriť o funkčných prototypoch main. Funkčný prototyp je tvorený názvom funkcie a typom signatúry, pričom sa vynecháva telo funkcie. 

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý