Dag 9: Programpakker Jquery 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?)

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-koden Eksempel: document.getElementById("tilbage").addEventListener('click',tilbage, false) Brug ekstern js-fil Eksempel: <script type= "text/javascript" src="script.js"> </script> (skal stå nederst i body-tag)

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

Mobiltelefon som medie for 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

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-boks med data-role="page“ udenom hele galleri-koden <div data-role="page">….</div> For at få knapperne til at ligge på samme linje, læg attributten: data-inline="true" ind på de to input-elementer Style evt. billederne, så deres width er 100%

Simpelt mobil-website i JQuery: grundstruktur Et lille website kan vha Jquery 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: <div id="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>

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

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}

Test medie - hvilke 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. Øverst ligger et javascript, som tester på screen.width: if (screen.width>500 && screen.width<800) location.href="tablet.html" if(screen.width>=800) location.href="desktop.html"