Katja Kontio

Förr fanns det webbsidor som bara var anpassat till datorskärmar. Men nu det senaste 10 åren har det blivit allt vanligare med att webbsidor ska vara responsiv. Ute på marknaden finns det flera sätt att utveckla en app eller mobilanpassad webbsida på. Ett känt verktyg som många företag använder är jQuery. Kortfattat är jQuery ett Javascripts-bibliotek som förenklar användningen av HTML, CSS och Javascript. Man kan helt enkelt göra olika typer av funktioner genom att använda JQuery. <!–more–>


Inom jQuery finns det något som kallas för jQuery mobile som är ett komplett ramverk som är till för att utveckla en app. Denna OER:en kommer att handla om jQuery mobile.

Dessa delar kommer att tas upp.
– Vad är jQuery mobile
– Varför jQuery mobile?
– Hur man bygger en simpel jQuery app
– En jQuery mobile övning

Vad är jQuery mobile?
JQuery är ett Javascripts-bibliotek som utvecklare kan använda sig av för att koda en webbsida. Men det jQuery mobile gör är att underlätta utvecklingen av en mobilapp. I jQuerys bibliotek finns det olika typer av funktioner som man också kan använda i jQuery mobile. Men i jQuery mobile är allt mobilanpassat.

Varför jQuery mobile?
Det finns en del fördelar med att använda sig av jQuery mobile när det kommer till att utveckla en mobilapp.

Ett komplett komponent-bibliotek
Inom jQuery mobile finns det ett färdigt komponent-bibliotek som man kan använda för att utveckla sin app. Det finns komponenter såsom buttons, table, datepicker, slider och mycket mer. Detta gör att man inte behöver använda något annat ramverk till exempel bootstrap, utan jQuery har ett eget.

Touch-vänliga komponenter
JQuery mobiles olika komponenter är “touch-vänliga” vilket betyder att det är lätt för mobilanvändarna att använda då det är lätt att trycka på rätt saker. Här är ett exempel på hur Checkbox-komponenten kan se ut.

Det som gör att denna komponenten är “touch-vänlig” är att man kan trycka på hela kolumnen och inte bara på själva checkboxen. Detta gör att det blir smidigare att utveckla appen då komponenterna redan är “touch-vänliga” och då krävs det oftast bara små justeringar för att ändra utseendet (Creative Bloq Staff, 2013).

Här är några andra exempel på jQuery mobile komponenter som är “touch-vänliga”:

Knappar
Knapp-komponenterna är redan väldigt breda vilket dom oftast är i en mobilanpassad miljö.



Slider
En slider där kvadraten är större så det blir lättare att ta tag i den.

Responsiv
Komponenterna som man kan använda i jQuery-mobile är redan responsiva vilket är en stor fördel. Detta gör att det är lättare att appen anpassas till flera upplösningar. Till exempel ifall man kodar en app som är anpassad till iphone 8 så är det inte stora ändringar som krävs för att appen ska fungera på en iphone 8 plus. Den färdiga responsiviteten sparar väldigt mycket tid (Creative Bloq Staff, 2013).

Hur bygger man en enkel jQuery app?
Steg 1: Doctype/Head-taggen
För att komma igång med en jQuery mobile app så behöver man först lägga till koden som står här under.

<!DOCTYPE html>

<html>

<head>

    <title>My Page</title>

    <meta name=“viewport” content=“width=device-width, initial-scale=1”>

    <link rel=“stylesheet” href=“http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css” />

    <script src=“http://code.jquery.com/jquery-1.8.3.min.js”></script>

    <script src=“http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js”></script>

</head>

I head-taggen har vi jQuerys egna css och scripts som behöver användas för att jQuery ska fungera. Meta name=”viewport” tagen som gör att själva layouten passar på olika enheter. Om man inte har name=”viewport” taggen, kommer allt presses ut längst hela webbläsaren och allt ser konstigt och fult ut (Walter, 2012).

Steg 2: Body
Denna mallen är en “basic page template” som man kan utgå ifrån när man ska börja göra en jQuery mobile app (Quick start jQuery mobile).

<body>

 <div data-role=“page”>

    <div data-role=“header”>

     <h1>My Title</h1>

   </div><!– /header –>

    <div data-role=“content”> 

     <p>Hello world</p>    

   </div><!– /content –>

  </div><!– /page –>

  </body>

 
En jQuery mobile app är oftast byggd med en “header” “content” och en “footer”. I body-mallen finns ett attribut som heter “data-role=”. jQuery mobile är uppbyggda av “data-role” attribut som ger en tydlig struktur i koden. Header, content och footer är inget krav att man måste använda för att det ska fungera. Dock är “data-role=page” ett måste för att navigationssystemet ska fungera (Introduction jQuery mobile).

Här kan ni kopiera hela mallen:

<!DOCTYPE html>

<html>

<head>

    <title>My Page</title>

    <meta name=“viewport” content=“width=device-width, initial-scale=1”>

    <link rel=“stylesheet” href=“http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css” />

    <script src=“http://code.jquery.com/jquery-1.8.3.min.js”></script>

    <script src=“http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js”></script>

</head>

<body>

<div data-role=“page”>

    <div data-role=“header”>

        <h1>My Title</h1>

    </div><!– /header –>


<div data-role=“content”>   

        <p>Hello world</p>      

    </div><!– /content –>

</div><!– /page –>

</body>

</html>

 
Steg 3: Komponenter
Efter man har kopierat in mallen kan man börja skapa innehållet. Man kan använda sig av vanlig html, css och javascript. Men för att göra det enklare kan man använda sig av dem färdiga komponenter. Här är en länk till komponent biblioteket:
https://demos.jquerymobile.com/1.4.5/

I den vänstra menyn på sidan finns alla komponenter Det finns till exempel en knapp-komponent. Det är bara att gå in på den och klicka på “view source” och då kommer koden upp. Med den koden är det bara att kopiera och klistra in den där man önskar att knappen ska vara. Till exempel såhär:

    <div data-role=“content”>   

           <button class=“ui-btn primary-button”>Button</button>

   </div><!– /content –>


Steg 4: Länka mellan sidor
För att länka ihop två html-sidor behöver man först lägga till ett id tillsammans med sin “data-role=”page”. Det ska vara olika ID på de olika html-sidorna.
Exempelvis:


Första html-sidan

<div data-role=“page” id=”page1”>

Andra html-sidan

<div data-role=”page” id=”page2”>

När html-filerna har unika ID på hela sidan så kan man börja lägga länka ihop sidorna. För att länka ihop två sidor behöver href-taggen. Här är ett exempel som du kan lägga till i page1 html sidan:

<a href=”#page2”>Tryck här för att komma till andra sidan</a>

 (jQuery Mobile Lesson 2 – Linking pages, 2014)


Steg 5: Ändra utseende (css)
Ändra utseendet på komponenterna
För att ändra utseendet på dem färdiga komponenterna behöver man antingen lägga till sina egna klasser i koden där man vill ändra css:en. Om det inte fungerar behöver man ändra den befintliga css-klassen som jQuery mobile själva att utsatt. Till exempel om man vill lägga till en knapp och ändra css:en: 

<button class=“ui-btn primary-button”>Button</button>

Här har “primary-button” classen lagts till och då får man testa först ifall det går att ändra utseendet genom att använda den klassen. Om det inte fungerar som man vill, kan man börja experimentera med ui-btn klassen istället. (Walter, 2012).

Men det är även i många fall som man behöver gå in på inspektera-läge i webbläsaren för att hitta dem “gömda” klasserna som inte är skrivna i html-koden.

Ändra utseendet i globala css:en
I vissa tillfällen vill man ändra de övriga delarna i appen, till exempel header-området. Då måste man ändra jQuerys mobiles egna css genom att använda deras css-klasser och skriva över deras satta css-kod. För att komma åt deras egna css så kan man få fram dem genom att inspektera sin egna app i någon webbläsare.

Genom att inspektera header-sektionen så kan man få fram att namnet på klassen är ui-header. Med ui-header klassen kan man nu ändra header sektionen (Walter, 2012).

Här är en bild som visar vart man kan hitta det:


För att ändra om utseendet på en jQuery mobile app behöver man testa mycket själv och leta reda efter rätt klass. Funkar det inte att sätta ut sin egna klass, då är ett tips att söka igenom inspektera-läge i webbläsaren.

Komma igång övning

1: Skapa en html-filer och en css-fil i en mapp. Ni kan döpa filerna till vad ni vill.

2: Kopiera jQuery mobile mallen som har nämnts ovan och klistra in i html-filen.

4. Glöm inte att länka din css-fil i html-filen!

3: Testa ändra utseendet på både headern och footern. Till exempel ändra background-färgen. (Tips, börja inspektera i webbläsaren för att hitta de olika klasserna)

4: Börja leta efter slider komponenten och klistra in den i koden.


5: Ändra reglerings-cirkeln så att den blir röd. (tips, inspektera för att hitta rätt klass för cirkeln)

Så här kan resultatet se ut:


Referenser
Creative bloq Staff (2013). Five reasons to use jQuery mobile. Creativebloq, [Blogg] 2013-04-19. Tillgänglig: https://www.creativebloq.com/jquery/five-reasons-use-jquery-mobile-4135691 . [2019-11-10]

Demos (2019). Introduktion, [Elektroniskt]. Tillgänglig: https://demos.jquerymobile.com/1.2.1/docs/about/getting-started.html. [2019-11-10]

Demos (2019). jQuery Demos, [Elektroniskt]. Tillgänglig: https://demos.jquerymobile.com/1.4.5/. [2019-11-10] 

Demos (2019). Quick start Guide, [Elektroniskt]. Tillgänglig: https://demos.jquerymobile.com/1.2.1/docs/about/getting-started.html. [2019-11-10]

Karate & Padawan Vlogs (2015). jQuery Basics – What is jQuery?. [Video online] Tillgänglig: https://www.youtube.com/watch?v=U4UZVbQ8md0  [2019-11-10]

Sam Cogan (2014). jQuery Mobile Lesson 2 – Linking pages. [Video online] Tillgänglig: https://www.youtube.com/watch?v=-IkjcER0lyU  [2019-11-10]

Walter, S (2012). jQuery Mobile Tutorial: Creating a restaurant Picker Web App. Jotform, [Blogg] 2012-03-08. Tillgänglig: https://www.jotform.com/blog/jquery-mobile-tutorial-creating-a-restaurant-picker-web-app/  . [2019-11-10]

Walter, S (2012). jQuery Mobile Tutorial: Creating a restaurant Picker Web App Page 2. Jotform, [Blogg] 2012-03-08. Tillgänglig: https://www.noupe.com/jquery-mobile-tutorial-creating-a-restaurant-picker-web-app-page-2  . [2019-11-10]