• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Vad är JQuery Mobile - Blixttal Mallis 2011
 

Vad är JQuery Mobile - Blixttal Mallis 2011

on

  • 912 views

In Swedish

In Swedish

Statistics

Views

Total Views
912
Views on SlideShare
878
Embed Views
34

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 34

http://paper.li 33
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Över 96% av alla handhållna enheter har bra stöd för HTML5/CSS3

Vad är JQuery Mobile - Blixttal Mallis 2011 Vad är JQuery Mobile - Blixttal Mallis 2011 Presentation Transcript

    • Vad är JQuery Mobile
  • Jquery Mobile är inte en anpassning av Jquery för handhållna enheter
  • Vad är JQuery Mobile Programmeringsspråk C# Java   Javascript
  • Vad är JQuery Mobile Programmeringsspråk Domänramverk C# Asp.net Java JEE  Javascript Jquery
  • Vad är JQuery Mobile Programmeringsspråk Domänramverk Webbapp ramverk C# Asp.net Web Forms Java JEE  JavaServer Faces Javascript Jquery Jquery Mobile
  • I korta drag
    • Mobilt ramverk som bygger på JQuery
    • Cross browser/cross platform
    • Webbappar med ”native” känsla
    • Markup-baserad. Ingen javascript-kod för att komma igång
    • Progressive enhancement, graceful degradation
  • Markup baserat? C# Java JQuery Mobile <form runat=&quot;server&quot;> <h:form> <div data-role=&quot;page&quot;>
  • Markup baserat? C# Java JQuery Mobile <form runat=&quot;server&quot;> <h:form> <div data-role=&quot;page&quot;> < asp : Repeater   runat =&quot;server&quot;   ID =&quot;MinLista&quot;>          < HeaderTemplate > < ul > </ HeaderTemplate >          < ItemTemplate > < li > <% =  Eval( &quot;Titel&quot; ) %> </ li > </ ItemTemplate >          < FooterTemplate > </ ul > </ FooterTemplate >      </ asp : Repeater > <ui:repeat value = &quot;#{model}&quot; var = &quot;listItem&quot; > <div>       <h:outputText value = &quot;#{listItem}&quot; /> </div> </ui:repeat> <ul data-role = &quot;listview“ data-inset = &quot;true“ data-theme=&quot;a&quot; >   <li> Alt. 1 </li>   <li> Alt. 2 </li>   <li> Alt. 3 </li> </ul>
  • En enkel sida
  • Resultat
  • Formulärelement
    • < input   type =&quot;text&quot;   name =&quot;textbox&quot;   id =&quot;textbox&quot;   value =&quot;&quot;    />
    • < input   type =&quot;search&quot;   name =&quot;search&quot;   id =&quot;search&quot;   value =&quot;&quot;/>  
    • < input   type =&quot;range&quot;   name =&quot;range&quot;   value =&quot;0&quot;   min =&quot;0&quot;   max =&quot;10&quot;   />  
    < select   name =&quot;slider&quot;   id =&quot;slider&quot;   data-role =&quot;slider“> < option   value =&quot;0&quot;> Off </ option > < option   value =&quot;1&quot;> On </ option > </ select >
    • < fieldset   data-role =&quot;controlgroup&quot;> < legend > Checklist: </ legend > < input   type =&quot;checkbox&quot;   name =&quot;checkbox1&quot;   id =&quot;checkbox1&quot;   /> < label   for =&quot;checkbox1&quot;> HTML </ label > < input   type =&quot;checkbox&quot;   name =&quot;checkbox2&quot;   id =&quot;checkbox2&quot;   /> < label   for =&quot;checkbox2&quot;> CSS </ label > </ fieldset >
  • Teman
    • < fieldset   class =&quot;ui-grid-a&quot;> < div   class =&quot;ui-block-a&quot;> < button   type =&quot;submit&quot;   data-theme =&quot;c&quot;> Cancel </ button > </ div > < div   class =&quot;ui-block-b&quot;> < button   type =&quot;submit&quot;   data-theme =&quot;b&quot;> Submit </ button > </ div > </ fieldset >
  • Länkar laddas via AJAX
    • Alla sidladdningar inom samma domän laddas via AJAX-anrop
    • Förutsatt att nästa sida följer Jquery mobile standard
    • Och att AJAX stöds
    • Om misslyckas ges ett fint felmeddelande
    • Länkar till andra domäner hanteras som en vanlig sidladdning
    • För att göra en riktig GET, sätt rel=“external”
    • < a   href =&quot;/index.html&quot;   data-icon =&quot;grid&quot;   class =&quot;ui-btn-right&quot;   rel =&quot;external&quot;> Hem </ a >
  • Dialoger
    • < a   href =&quot;#pop.html&quot;   data-rel =&quot;dialog&quot;> Pop up! </ a >  
  • Utökning av JQuerys API
    • Event
    • Metoder
  • API – Events (urval)
    • Touch
        • Tap
        • Taphold
        • Swipe
        • swipeleft/right
    • Scroll
        • start/stop
    • Orientation
        • orientationChange
    • Page init
        • pageInit() > $(document).ready()
        • Pagecreate/pagebeforecreate
    • Page load
        • Pageload/Pagebeforeload
        • Pageloadfail
    • Pagechange
        • Pagechange/pageBeforeChange
        • pageChangeFail
    • Page Transition
        • pageBeforeShow/hide
        • pageShow/hide
  • API – Metoder (urval)
    • $.mobile.ajaxLinksEnabled =  false ;
    • $.mobile.silentScroll();
    • $.mobile.activePage;
    • $.mobile.changePage();
    • $.mobile.loadPage();
    • jqmData(), jqmRemoveData() > data(), removeData()
  • Bra att använda - Media queries
    • < link   rel ='stylesheet'   media ='screen and (max-width: 700px)'   href ='css/narrow.css'   /> < link   rel ='stylesheet'   media ='screen and (min-width: 701px) and (max-width: 900px)'   href ='css/medium.css'   />
  • Framtiden