Dag 9 : Programpakker Jquery og JQuery Mobile

1. Dag 9: ProgrampakkerJquery og JQuery Mobile Screen-broadcast – gå til www.123beam.com- Indtast mødenummer 903-205-973- Vælg html-viewer- Klik Join session • Billedgalleri fra i går: raffinering af kode(funktioner, eventlisteners, ekstern js-fil) • JQuery og JQuery mobile – eksempel på programpakke • Mobiltelefonen som medie • Jquery på billedgalleriet • Simpelt mobil-website: grundstruktur • Links og knapper • Folde-lister • Test for medie (er det en mobil, en tablet eller en desktop?)

2. Billedgalleri fra fredag: bedre kode http://helf.monline.dk/gallerito.html • Læg handlinger fra eventhandlers til funktioner • Lav eventlisteners i javascript-koden i stedet for eventhandlers i html-kodenEksempel: document.getElementById("tilbage").addEventListener('click',tilbage, false) • Brug ekstern js-filEksempel:<script type="text/javascript" src="script.js"> </script> (skal stå nederst i body-tag)

3. JQuery Problemer med javascript: Besværlig kode Browserforskelle Løsning: jquery Programmeret i javascript For at køre jquery skal man hente jquery-biblioteket ned: <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"> </script> Eksempel: var tabel= document.getElementById('galleri'). getElementsByTagName('div') var tabel=$('#galleri div') Mange gode jquery-ressourcer på nettet – bl.a. til gallerier. Vi skal se på Jquery Mobile til mobil-websider

4. Mobiltelefon som mediefor websider Fordele Kan være i lommen Tændt med det samme Bruges i nogle sammenhænge, hvor desktoppen ikke bruges Ulemper Lille skærm Lille computer Langsomt internet Mobilwebsider: Indhold, som netop kan bruge i den særlige mobil-situation Indhold, som fylder så lidt som muligt Indhold, som kræver så få downloads som muligt

5. Jquery mobile på billedgalleriet Eksempel: Billedgalleriet på mobiltelefon Billedmateriale skal være super-optimeret: resize til lille skærm, billedkvalitet så lav som acceptabelt Jquery-mobile: Læg bibliotekerne ind: <script src="http://code.jquery.com/jquery-1.4.3.min.js"> </script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> <link rel="stylesheet" href= "http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> Læg en div-boksmed data-role="page“ udenomhelegalleri-koden<div data-role="page">….</div> For at fåknappernetil at liggepåsammelinje, lægattributten: data-inline="true"ind på de to input-elementer Style evt. billederne, så deres width er 100%

6. Simpelt mobil-website i JQuery: grundstruktur Et lille website kan vhaJquery sammenbygges i én html (eller php) -side Jeres opgave i dag og i morgen: lav en lille mobil-udgave af jeres website, og læg det på én side. Html-koden struktureres, så hver ”underside” får sin egen div-boks med attributten data-role="page” og en id-attribut. F.eks: <divid="forside" data-role="page">forside</div> <div id="dag1" data-role="page">dag1</div> <div id="dag2" data-role="page">dag2</div> <div id="dag3" data-role="page">dag3</div> <div id="dag4" data-role="page">dag4</div> I hver div-boks lægges to div-bokse: én til header med sideoverskrift og én til contents: <div data-role="header"> <h1>Photoshopbilleder</h1> </div> <div data-role="content">indhold</div>

7. Links og knapper I forsidens content-div-boks, kan man lægge links, der fører til de andre undersider: <div id="forside" data-role="page"> <div data-role="header"> <h1>Photoshopbilleder</h1> </div> <div data-role="content"> <a href=“#dag1">Dag 1</a> <a href=“#dag2">Dag 2</a> <a href=“#dag3">Dag 3</a> <a href=“#dag4">Dag 4</a> </div></div> Links kan gøres til knapper med data-role="button” Vandret liggende knapper med data-inline="true” Vandret, sammenhængende menu-bar ved at omgive med: <div data-role="controlgroup" data-type="horizontal"></div> Drop-down menu ved at omgive med: <div data-role="collapsible" data-state="collapsed"> <h1>Overskrift</h1> …..indhold….. </div

8. Styling Tre forskellige styles at vælge mellem data-theme="a"…. data-theme="e” Ændring af grundfarver: Baggrundsfarve på siden body{background:green} (forsidens baggrundsfarve – og undersider med samme theme Farver på top (a-theme): .ui-bar-a {background: red; color: white; font-weight: bold; text-shadow: 0 -1px 1px red; } .ui-bar-a:hover {background-color:yellow}

9. Test skærmdimensioner Man ønsker typisk én url-adresse til sitet Sitet skal afgøre, om det er en mobil, en tablet eller en desktop Javascript: screen.width Mulighed: Sitets index.html (eller .php) indeholder udgaven til mobil. På siden tablet.html ligger en udgave til websitet til tablets (f.eks. iPad) På siden desktop.html ligger forside til desktop-udgaven. Et javascript ligger i bunden af body: <script type="text/javascript"> if(screen.width>500 && screen.width<800) location.href="tablet.html" if(screen.width>=800) location.href="desktop.html" </script>