Your SlideShare is downloading. ×
Vad är JQuery Mobile - Blixttal Mallis 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Vad är JQuery Mobile - Blixttal Mallis 2011

696
views

Published on

In Swedish

In Swedish

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
696
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Över 96% av alla handhållna enheter har bra stöd för HTML5/CSS3
  • Transcript

    • 1.
      • Vad är JQuery Mobile
    • 2. Jquery Mobile är inte en anpassning av Jquery för handhållna enheter
    • 3. Vad är JQuery Mobile Programmeringsspråk C# Java   Javascript
    • 4. Vad är JQuery Mobile Programmeringsspråk Domänramverk C# Asp.net Java JEE  Javascript Jquery
    • 5. Vad är JQuery Mobile Programmeringsspråk Domänramverk Webbapp ramverk C# Asp.net Web Forms Java JEE  JavaServer Faces Javascript Jquery Jquery Mobile
    • 6. 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
    • 7. Markup baserat? C# Java JQuery Mobile <form runat=&quot;server&quot;> <h:form> <div data-role=&quot;page&quot;>
    • 8. 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>
    • 9. En enkel sida
    • 10. Resultat
    • 11. 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 >
    • 12.
      • < 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 >
    • 13. 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 >
    • 14. 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 >
    • 15. Dialoger
      • < a   href =&quot;#pop.html&quot;   data-rel =&quot;dialog&quot;> Pop up! </ a >  
    • 16. Utökning av JQuerys API
      • Event
      • Metoder
    • 17. 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
    • 18. API – Metoder (urval)
      • $.mobile.ajaxLinksEnabled =  false ;
      • $.mobile.silentScroll();
      • $.mobile.activePage;
      • $.mobile.changePage();
      • $.mobile.loadPage();
      • jqmData(), jqmRemoveData() > data(), removeData()
    • 19. 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'   />
    • 20. Framtiden