Introduktion til jquery Mobile. Collection Editor: Lars Johnsen

Introduktion til jquery Mobile Collection Editor: Lars Johnsen

Introduktion til jquery Mobile Collection Editor: Lars Johnsen Authors: Stig Egdal Jensen Dinna Hornshøj-Schierbeck Mick Lyngø Stefani Recht Stefan Skjerning Bodil Skov Online: < http://cnx.org/content/col11460/1.1/ > C O N N E X I O N S Rice University, Houston, Texas

This selection and arrangement of content as a collection is copyrighted by Lars Johnsen. It is licensed under the Creative Commons Attribution 3.0 license (http://creativecommons.org/licenses/by/3.0/). Collection structure revised: December 7, 2012 PDF generated: January 31, 2013 For copyright and attribution information for the modules contained in this collection, see p. 16.

Table of Contents 1 Om jquery Mobile................................................................................ 1 2 jquery Mobile - Strukturering af sider......................................................... 3 3 jquery Mobile - Theming........................................................................ 5 4 Hvordan linker man til sider i jquery Mobile.................................................. 7 5 Sådan laver du navigeringsknapper.............................................................. 9 6 Her kan du lmere om JQuery Mobile.......................................................... 13 Index................................................................................................ 15 Attributions......................................................................................... 16

iv

Chapter 1 Om jquery Mobile 1 1.1 Om jquery none none 1.2 Frameworket none 1 This content is available online at <http://cnx.org/content/m45313/1.3/>. 1

2 CHAPTER 1. OM JQUERY MOBILE

Chapter 2 jquery Mobile - Strukturering af sider 1 2.1 Introduktion Når sider skal struktureres i jquery Mobile er det naturligvis vat have for øje at struktur og standard skal have konsistens. Det er altså vigtigt at strukturen afspejler at indholdet skal bruges på en mobilenhed, hvilket i sagens natur, både har styrker og svagheder. 2.2 Kolonner Kolonner er i mange tilkke en god løs, når det kommer til brug på mobileenheder, fordi kolonnebredden typisk er en udfordring for den mobile enhed. Alligevel kan der vtilf, hvor brugen af kolonner alligevel er nødvendig. I dette eksempel vises et eksempel på, hvordan der udarbejdes en 2 x 1 kolonne. <div id="fs-id1168018077308" class="ui-grid-a"> <div id="fs-id1168002938576" class="ui-block-a"><strong>i'm Block A</strong> and text inside will wrap</div> <div id="fs-id1168018086627" class="ui-block-b"><strong>i'm Block B</strong> and text inside will wrap</div> </div><! /grid-a > 2.3 Folde-sammen-og-rulle-ud-menu Idet indholdet på siden skal vtilpasset mobile enheder kan det ven god idé umiddelbart at skjule indhold for modtageren for at bevare overskueligheden. En af måderne at gøre det på er via en rullemenu, som brugeren kan klikke på for at synliggøre nyt indhold. Den kan laves med nedenstående kode: <div data-role="collapsible"> <h3>i'm a header</h3> <p>i'm the collapsible content. By default I'm closed, but you can click the header to open me. </p> </div> Du kan også lave en menu, som automatisk folder ud når siden er indl. attributen: Det gør du ved hjaf tilføje > <div data-role="collapsible" data-collapsed="false" > 1 This content is available online at <http://cnx.org/content/m45294/1.1/>. 3

4 CHAPTER 2. JQUERY MOBILE - STRUKTURERING AF SIDER

Chapter 3 jquery Mobile - Theming 1 3.1 Themes Med jquery Mobile kan man benytte temaer, der giver mulighed for at tilpasse farveskemaer og visse CSSaspekter. Man kan bruge jquery Mobile ThemeRoller applikationen for at tilpasse temaerne. Efter at have udviklet et tema i ThemeRoller applikationen, kan man hente en brugerdeneret CSS-l og indlejre den i sit projekt og på den måde bruge de brugerdenerede tema. Hvert tema kan indeholde op til 26 unikke "farveprøver", som hver består af en header bar, en body, og knapper. Kombinationen af de forskellige farveprøver giver mulighed for at skabe en bredere vifte af visuelle eekter, end man ville vi stand til med kun en farveprøve per tema. Skift mellem forskellige farveprøver i et tema er så simpelt som at tilføje en attribut kaldet "data-tema" til sine HTML-elementer. jquery Mobile standardtema har fem forskellige farveskemaer: "a", "b", "c", "d", og "e". På den måde, kan man let skifte mellem forskellige temaer ved blot at bogstavet i koden. (Kilde:Wikipedia) 1 This content is available online at <http://cnx.org/content/m45293/1.4/>. 5

6 CHAPTER 3. JQUERY MOBILE - THEMING Temaer Figure 3.1 Man kan få mere at vide om temaer her 2. <div data-role="content" data-theme="c"> <p>herman boede i Horsens, men engang var han ude at rejse. 2 http://en.wikipedia.org/wiki/jquery_mobile

Chapter 4 Hvordan linker man til sider i jquery Mobile 1 Når du laver interne links på en hjemmeside lavet med jquery Mobile, skal du tage højde for, at koden adskiller sig lidt ift. almindelig HTML-kodning. Herunder kan du se et eksempel på, hvordan href og id skal bruges til at linke i jquery Mobile. Kort forklaring: I den tekst, du linker fra, skal der indgå et href-tag. Dette tag skal så indeholde et havelåge-tegn og det id, som du har deneret i den side, der linkes til. Eksempel I følgende eksempel vil vi linke til side 1. Først angiver vi teksten "Side 1" i et href-tag, da vi skal linke fra denne tekst. href-tagget indeholder et #side1, hvilket henviser til id'et på den side, som vi linker til. <p><a href="#side1">side 1</a></p> I nedenstående kode er selve sidens id (side1) deneret. <div data-role="page" id="side1" data-title="side 1" > <div data-role="header"> <h1>side 1</h1> I jquery Mobile kan du også tilføje overgange mellem siderne. eksemplet nedenfor. Det gør du ved hjaf data-transition - se <p><a data-transition="slide" href="#side1">side 1</a></p> Video-eksempel Herunder kan du se, hvordan koder skal laves og indsi jquery Mobil, hvis du vil linke til interne sider. Links på jquery Mobile-sider This media object is a Flash object. Please view or download it at <http://www.youtube.com/v/oqlpp70xnvy?version=3&hl=en_us> Figure 4.1 1 This content is available online at <http://cnx.org/content/m45312/1.3/>. 7

8 CHAPTER 4. HVORDAN LINKER MAN TIL SIDER I JQUERY MOBILE

Chapter 5 Sådan laver du navigeringsknapper 1 5.1 Sådan laver du navigeringsknapper Knapper er centrale elementer i Jquery Mobile. Der ndes to typer af knapper på jquery Mobile: Formknapper der laves med "input" eller "button" tags og navigeringsknapper der laves med et a-tag, hvorefter Jquery Mobile automatisk optimerer knapperne til brug på mobile enheder for at give en ensartet og optimal brugeroplevelse, på tvaf mobile enheder. Example 5.1 Et link vil eksempelvis blive til en navigeringsknap ved at tilføje atributten data-role="button" <a href="index.html" data-role="button">link button</a> Dette vil give følgende resultat: Example 5.2 Figure 5.1 tip: Både navigationsknap og form knap kan styles med fx. tekst, ikoner, placering mv. 5.2 Mini version af navigeringsknap Det er også muligt at lave en mini version af navigationsknappen til brug fx i menubarer eller hvor pladsen er trang. Dette gøres ved at tilføje data-mini="true" Dette giver en knap der afviger fra en standard knap ved at vmere kompakt og med mindre font størrelse. 1 This content is available online at <http://cnx.org/content/m45314/1.3/>. 9

10 CHAPTER 5. SÅDAN LAVER DU NAVIGERINGSKNAPPER Exercise 5.1: Lav korrekt kode (Solution on p. 11.) Hvordan skal koden se ud, for at lave en mere kompakt version af en navigationsknap? important: Tilføjelsen af data-mini="true" kan også bruges på form knapper der ønskes i en mere kompakt version. 5.3 Prøv selv Hvis du selv vil prøve at lave navigationsknapper i jquery Mobile kan du se mere på http://jquerymobile.com/demos/1.2.0/docs/buttons/index.html 2 2 http://jquerymobile.com/demos/1.2.0/docs/buttons/index.html

11 Solutions to Exercises in Chapter 5 Solution to Exercise 5.1 (p. 9) <a href="index.html" data-role="button" data-mini="true" >Link button</a>

12 CHAPTER 5. SÅDAN LAVER DU NAVIGERINGSKNAPPER

Chapter 6 Her kan du lmere om JQuery Mobile 1 Introduktion På JQuery Mobiles egen hjemmeside jquerymobile.com 2 kan du nde dokumentation, demos, tutorials m.m. samt lister med ressourcer til bl.a. artikler, frameworks, apps, vøjer, extensioner og plugins. Hvis du vil vide mere om JQuery Mobile kan du desuden nde referencer til bøger, blogs og videoer i de nedenstående lister. Bøger Bai, Giulio (June 23, 2011). jquery Mobile First Look (1st ed.). Packt Publishing. p. 216. ISBN 1-84951-590-5. Reid, Jon (July 7, 2011). jquery Mobile (1st ed.). O'Reilly Media. p. 130. ISBN 1-4493-0668-3. David, Matthew (September 21, 2011). HTML5 Mobile Websites: Turbocharging HTML5 with jquery Mobile, Sencha Touch, and Other Frameworks (1st ed.). Focal Press. p. 250. ISBN 0-240-81813-X. Broulik, Brad (November 30, 2011). Pro jquery Mobile (1st ed.). Apress. p. 350. ISBN 1-4302-3966-2. Doyle, Matt (December 16, 2011). Master Mobile Web Apps with jquery Mobile (2nd ed.). Elated Communications Ltd. p. 446. ISBN 978-0-9569218-4-0. Dutson, Phil (July 13, 2012). Sams Teach Yourself jquery Mobile in 24 Hours (1st ed.). Sams. p. 475. ISBN 0-672-33594-8. Holzner, Steven E. (January 2, 2012). Sams Teach Yourself jquery Mobile in 10 Minutes (1st ed.). Sams. p. 240. ISBN 0-672-33557-3. Firtman, Maximiliano (January 31, 2012). jquery Mobile: Up and Running (1st ed.). O'Reilly Media. p. 250. ISBN 1-4493-9765-4. de Jonge, Adriaan, Dutson, Phillip (November 2, 2012). jquery, jquery UI, and jquery Mobile: Recipes and Examples (1st ed.). Addison-Wesley Professional. p. 400. ISBN 978-0-321-82208-6. Videoer Building Great Mobile Websites Quickly with jquery Mobile 3 jquery Mobile Dynamic Pages, Links, the back button 4 jquery Mobile Toolbars Navigation Menus 5 Going Deeper with jquery Mobile 6 Blogs 1 This content is available online at <http://cnx.org/content/m45311/1.1/>. 2 http://jquerymobile.com/ 3 http://www.youtube.com/watch?v=4xvf2jfxq4s 4 http://www.youtube.com/watch?v=3alvl7huwqe 5 http://www.youtube.com/watch?v=jtnp0ckizio 6 http://www.youtube.com/watch?v=xsmulz89ayc 13

14 CHAPTER 6. HER KAN DU LMERE OM JQUERY MOBILE Mobile App Design/Dev: Beginner's Guide to jquery Mobile 7 10 handy jquery mobile tips and snippets to get you started 8 50 jquery Mobile Development Tips 9 Creating a Website Using JQuery Mobile, Part 1 10 Example 6.1: Eksempel på video-tutorial jquery Mobile tutorial: Creating custom icons Figure 6.1 7 http://www.hongkiat.com/blog/build-websites-apps-jquery-mobile/ 8 http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/ 9 http://www.jquery4u.com/mobile/50-jquery-mobile-development/ 10 http://miamicoder.com/2011/creating-a-website-using-jquery-mobile-part1/

INDEX 15 Index of Keywords and Terms Keywords are listed by the section with that keyword (page numbers are in parentheses). Keywords do not necessarily appear in the text of the page. They are merely associated with that section. Ex. apples, Ÿ 1.1 (1) Terms are referenced by the page they appear on. Ex. apples, 1 A About, Ÿ 1(1) D Design, Ÿ 1(1) J jquery, Ÿ 1(1), Ÿ 3(5) jquery Mobile, Ÿ 2(3), Ÿ 5(9), Ÿ 6(13) jquery Mobile, link, linking, Ÿ 4(7) L Link, Ÿ 5(9) M Mobile, Ÿ 1(1) Q qqyerymobile, Ÿ 2(3) R Referencer, Ÿ 6(13) S Structure, Ÿ 2(3) Struktur, Ÿ 2(3) T Theming, Ÿ 3(5) W Web app, Ÿ 6(13) webapps, Ÿ 3(5) N Navigeringsknapper, Ÿ 5(9)

16 ATTRIBUTIONS Attributions Collection: Introduktion til jquery Mobile Edited by: Lars Johnsen URL: http://cnx.org/content/col11460/1.1/ License: http://creativecommons.org/licenses/by/3.0/ Module: "Om jquery Mobile" By: Stig Egdal Jensen URL: http://cnx.org/content/m45313/1.3/ Page: 1 Copyright: Stig Egdal Jensen License: http://creativecommons.org/licenses/by/3.0/ Module: "jquery Mobile - Strukturering af sider" By: Mick Lyngø URL: http://cnx.org/content/m45294/1.1/ Page: 3 Copyright: Mick Lyngø License: http://creativecommons.org/licenses/by/3.0/ Module: "jquery Mobile - Theming" By: Bodil Skov URL: http://cnx.org/content/m45293/1.4/ Pages: 5-6 Copyright: Bodil Skov License: http://creativecommons.org/licenses/by/3.0/ Module: "Hvordan linker man til sider i jquery Mobile" By: Stefan Skjerning URL: http://cnx.org/content/m45312/1.3/ Page: 7 Copyright: Stefan Skjerning License: http://creativecommons.org/licenses/by/3.0/ Module: "Sådan laver du navigeringsknapper" By: Dinna Hornshøj-Schierbeck URL: http://cnx.org/content/m45314/1.3/ Pages: 9-11 Copyright: Dinna Hornshøj-Schierbeck License: http://creativecommons.org/licenses/by/3.0/ Module: "Her kan du lmere om JQuery Mobile" By: Stefani Recht URL: http://cnx.org/content/m45311/1.1/ Pages: 13-14 Copyright: Stefani Recht License: http://creativecommons.org/licenses/by/3.0/

Introduktion til jquery Mobile En lille samling af moduler, der giver en introduktion jquery Mobile og til, hvordan jquery Mobile kan bruges til at udvikle web apps About Connexions Since 1999, Connexions has been pioneering a global system where anyone can create course materials and make them fully accessible and easily reusable free of charge. We are a Web-based authoring, teaching and learning environment open to anyone interested in education, including students, teachers, professors and lifelong learners. We connect ideas and facilitate educational communities. Connexions's modular, interactive courses are in use worldwide by universities, community colleges, K-12 schools, distance learners, and lifelong learners. Connexions materials are in many languages, including English, Spanish, Chinese, Japanese, Italian, Vietnamese, French, Portuguese, and Thai. Connexions is part of an exciting new information distribution system that allows for Print on Demand Books. Connexions has partnered with innovative on-demand publisher QOOP to accelerate the delivery of printed course materials and textbooks into classrooms worldwide at lower prices than traditional academic publishers.