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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Vad är JQuery Mobile - Blixttal Mallis 2011

  • 686 views
Published

In Swedish

In Swedish

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
686
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
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