Giraffe1 Posted September 4, 2008 Posted September 4, 2008 Akkor ahogy ígértem, röviden bemutatnék egy egyszerű megoldást arra, hogyan engedjük meg az oldalra látogatóknak, hogy ők állíthassák be a nekik kényelmes betűméretet. Először is szükség van természetesen magára az oldalra: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Az oldal címe</title> <link href="cikk.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="cikk.js" ></script> </head> <body> <div id="header"> <h1>Az oldal címe</h1> </div> <div id="toolbar"></div> <div id="menu"> <ul> <li><a href="#">Menü 1</a></li> <li><a href="#">Menü 2</a></li> <li><a href="#">Menü 3</a></li> <li><a href="#">Menü 4</a></li> <li><a href="#">Menü 5</a></li> <li><a href="#">Menü 6</a></li> </ul> </div> <div id="content"> <h2>A cikk címe</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque justo. Nulla ut mi quis metus bibendum mattis. ...</p> <h3>Alcím</h3> <p>Nullam blandit, sapien ac molestie sagittis, tellus enim blandit purus, quis eleifend tellus eros nec massa. ...</p> <ul> <li>Maecenas eleifend diam et orci feugiat imperdiet.</li> <li>Ut dignissim faucibus dui.</li> <li>Ut varius malesuada quam.</li> <li>Vestibulum scelerisque lobortis sapien.</li> <li>Phasellus facilisis pharetra augue.</li> </ul> <p>Donec lacinia sapien sit amet risus. Curabitur adipiscing purus in odio. Duis sollicitudin. In pellentesque porta odio. ...</p> </div> <div id="footer"> Ide jön a lábléc </div> </body> </html> Ebben - főleg azoknak, akik szorgalmasan olvassák Balázs sorozatát - sok meglepő nem lesz. A HTML-hez a fejlécben csatoltunk egy CSS-t és egy JavaScriptet, valamint létrehoztunk egy üres DIV-et az "eszközsávunknak". Ezt az oldalt egy kicsit megformázzuk (ez lesz ugyebár a cikk.css): body { margin: 5px; color: #000000; background: #ffffff; font-family: arial, verdana, helvetica; font-size: 12px; } #header { height: 30px; padding: 4px 0; text-align: center; background: #66e; } #header h1 { margin: 0; font-size: 16px; } #toolbar { position: absolute; top: 28px; right: 5px; } #toolbar a { margin: 0 5px; color: #fff; font-weight: bold; text-decoration: none; } #footer { clear: both; margin-top: 4px; padding: 2px 0; text-align: center; color: #fff; background: #33e; } #menu { float: left; width: 7%; margin-top: 4px; padding: 4px 10px; border: 2px solid #33e; } #menu ul { list-style: none; margin: 0; padding: 0; } #menu li a { color: #028; font-weight: bold; text-decoration: none; } #menu li a:hover { color: #208; text-decoration: underline; } #content { float: left; width: 83%; margin: 4px 5px 0 10px; font-size: 12px; } #content h2 { margin: 0; font-size: 160%; } #content h3 { margin: .5em 0; font-size: 120%; } #content p { margin: 0; } #content ul { margin: 1em 0 1em 1.5em; } #content li { font-size: 90%;} Ebben sincsen sok "varázslat" - mondhatni minimalart stílusú lett oldalunk. Amit érdemes kiemelni, hogy a content DIV elemeinél a betűméretet százalékosan adjuk meg, de ha valakinek szimpatikusabb, például a 120% helyett írhat 1.2em-et is, a végeredmény ugyanaz lesz. És akkor most jön maga a lényeg, azaz a cikk.js: var fontpx = 12; // alapértelmezés szerint ekkora betűkkel írunk var minpx = 10; // a legkisebb fontméret var maxpx = 18; // a legnagyobb fontméret function changeFont(dif) { var obj; var newpx = fontpx + dif; if (newpx >= minpx && newpx <= maxpx) { obj = document.getElementById("content"); if (obj) obj.style.fontSize = newpx + "px"; fontpx = newpx } } function initPage() { // kitesszük a két "gombot" var tb = '<a title="Betűméret növelése" href="#" onclick="changeFont(+1);">A+</a>' tb += '<a title="Betűméret csökkentése" href="#" onclick="changeFont(-1);">A–</a>' document.getElementById("toolbar").innerHTML = tb; } window.onload = initPage; Visszafele haladva a kódban: 1. Megkérjük a böngészőt, hogy az oldal betöltődését követően indítsa el az initPage függvényt; 2. Ez a függvény összerak egy nagyon egyszerű HTML-kódrészletet, ami nem más mint két link, amelyek közül az egyik +1, a másik -1 paraméterrel hívja meg a changeFont függvényt; 3. Ezt a kis kódot szépen belehelyezzük az erre fenntartott toolbar DIV-be - ami ettől ugyanúgy fog működni, mintha eleve odaírtuk volna ezt a HTML-részletet; 4. A changeFont nem csinál mást, mint ellenőrzi, hogy nem mennénk-e ki a minpx-maxpx tartományból, és ha nem, akkor content DIV-nek megváltoztatja a fontSize (amit CSS-ben font-size-nak írunk) tulajdonságát, majd magának is felírja, hogy mennyi is az aktuális méret. A függvényt hívó kódot azért nem a HTML-be írjuk be eleve, mert így egyrészt szépen elkülönítjük a három réteget (tartalom, kinézet, működés), másrészt nem zavarjuk össze a felhasználót esetlegesen nem kívánatos eszközökkel. Hiszen ha a JavaScript nála nem működik, akkor az eszközsávból eleve semmi nem fog látszódni. És mindez nagyon szépen működik IE (6/7 biztosan), Firefox, Safari, Opera és Chrome alatt is.
Fujitsu Posted September 4, 2008 Posted September 4, 2008 var maxpx = 18; // a legkisebb fontméret A "maxpx" nem a legnagyobb betûméretet jelöli?
Giraffe1 Posted September 5, 2008 Author Posted September 5, 2008 A Copy-Paste elõnyei és hátrányai fejezet újabb szép példáját láthattuk. Szerencsére ettõl még mûködik. De azért javítottam, kösz!
Giraffe1 Posted September 5, 2008 Author Posted September 5, 2008 Így olyan szépen egyforma hosszúak lesznek a sorok. Ráadásul (valamivel) könnyebb áttekinteni. Bezzeg a szép diszkrét JS megoldásért már meg sem dicsérsz. ír:
payskin Posted September 7, 2008 Posted September 7, 2008 Hát pont ezen háborodtam fel, hogy ez így nem diszkrét, ha tagbe írunk eseményvezérlést. Igaz, hogy kívülrõl írjuk bele... fél piros, fél fekete pont.
Giraffe1 Posted September 7, 2008 Author Posted September 7, 2008 Miután eleve JS-bõl illesztem be a kódot, lehetne, de szerintem felesleges létrehozni egy sima SPAN-t, és annak eseményére definiálni a funkciót. De akkor azzal külön foglalkozni kellene a CSS-ben is (legyen olyan színû, mint a linkek, az egér alakja változzon stb.). Ha nincs JS, úgysem jelenik meg a link, így nem kavar be a felesleges "eszközsáv". Szerintem a "diszkréció" és a kizárólag DOM-on keresztüli vezérlés nem kizárólagos kapcsolat. De csak a Te kedvedért, holnap átírom.
payskin Posted September 7, 2008 Posted September 7, 2008 Jó, akkor definiáljuk a diszkréció fogalmát, mert a spant végképp nem értem. Én arról beszélek, hogy eseményt is csak külsõ JS-bõl vezérlünk, nem pedig tagben. (Tehát annak a két a-nak adtam volna valami class-t vagy valahogy másképp megcímeztem volna DOM-ból, és rájuk aggattam volna az onclick vezérlõt.) Mivel a taget is kívülrõl rakjuk bele, ezért ez olyan félig jó, félig nem jó megoldás. Nem mondom, hogy rossz, mert jó, csak nem (elég) szép.
Giraffe1 Posted September 8, 2008 Author Posted September 8, 2008 Mindent az esztétikáért : function initPage() { // kitesszük a két "gombot" var tb = '<a href="#" id="fontinc" title="Betûméret növelése">A+</a>' tb += '<a href="#" id="fontdec" title="Betûméret csökkentése">A–</a>' document.getElementById("toolbar").innerHTML = tb; document.getElementById("fontinc").onclick=function() { changeFont(+1); return false; } document.getElementById("fontdec").onclick=function() { changeFont(-1); return false; } }
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now