0
<ul><li>Vad är JQuery Mobile </li></ul>
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 Java...
I korta drag <ul><li>Mobilt ramverk som bygger på JQuery </li></ul><ul><li>Cross browser/cross platform </li></ul><ul><li>...
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 : R...
En enkel sida
Resultat
Formulärelement <ul><li>< input   type =&quot;text&quot;   name =&quot;textbox&quot;   id =&quot;textbox&quot;   value =&q...
<ul><li>< fieldset   data-role =&quot;controlgroup&quot;> < legend > Checklist: </ legend > < input   type =&quot;checkbox...
Teman <ul><li>< fieldset   class =&quot;ui-grid-a&quot;>   < div   class =&quot;ui-block-a&quot;>   < button   type =&quot...
Länkar laddas via AJAX <ul><li>Alla sidladdningar inom samma domän laddas via AJAX-anrop </li></ul><ul><li>Förutsatt att n...
Dialoger <ul><li>< a   href =&quot;#pop.html&quot;   data-rel =&quot;dialog&quot;> Pop up! </ a >    </li></ul>
Utökning av JQuerys API <ul><li>Event </li></ul><ul><li>Metoder </li></ul>
API – Events (urval) <ul><li>Touch </li></ul><ul><ul><ul><li>Tap </li></ul></ul></ul><ul><ul><ul><li>Taphold </li></ul></u...
API – Metoder (urval) <ul><li>$.mobile.ajaxLinksEnabled =  false ; </li></ul><ul><li>$.mobile.silentScroll(); </li></ul><u...
Bra att använda - Media queries <ul><li>< link   rel ='stylesheet'   media ='screen and (max-width: 700px)'   href ='css/n...
Framtiden
Upcoming SlideShare
Loading in...5
×

Vad är JQuery Mobile - Blixttal Mallis 2011

723

Published on

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
723
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Över 96% av alla handhållna enheter har bra stöd för HTML5/CSS3
  • Transcript of "Vad är JQuery Mobile - Blixttal Mallis 2011"

    1. 1. <ul><li>Vad är JQuery Mobile </li></ul>
    2. 2. Jquery Mobile är inte en anpassning av Jquery för handhållna enheter
    3. 3. Vad är JQuery Mobile Programmeringsspråk C# Java   Javascript
    4. 4. Vad är JQuery Mobile Programmeringsspråk Domänramverk C# Asp.net Java JEE  Javascript Jquery
    5. 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. 6. I korta drag <ul><li>Mobilt ramverk som bygger på JQuery </li></ul><ul><li>Cross browser/cross platform </li></ul><ul><li>Webbappar med ”native” känsla </li></ul><ul><li>Markup-baserad. Ingen javascript-kod för att komma igång </li></ul><ul><li>Progressive enhancement, graceful degradation </li></ul>
    7. 7. Markup baserat? C# Java JQuery Mobile <form runat=&quot;server&quot;> <h:form> <div data-role=&quot;page&quot;>
    8. 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. 9. En enkel sida
    10. 10. Resultat
    11. 11. Formulärelement <ul><li>< input   type =&quot;text&quot;   name =&quot;textbox&quot;   id =&quot;textbox&quot;   value =&quot;&quot;    /> </li></ul><ul><li>< input   type =&quot;search&quot;   name =&quot;search&quot;   id =&quot;search&quot;   value =&quot;&quot;/>   </li></ul><ul><li>< input   type =&quot;range&quot;   name =&quot;range&quot;   value =&quot;0&quot;   min =&quot;0&quot;   max =&quot;10&quot;   />   </li></ul>< 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. 12. <ul><li>< 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 > </li></ul>
    13. 13. Teman <ul><li>< 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 > </li></ul>
    14. 14. Länkar laddas via AJAX <ul><li>Alla sidladdningar inom samma domän laddas via AJAX-anrop </li></ul><ul><li>Förutsatt att nästa sida följer Jquery mobile standard </li></ul><ul><li>Och att AJAX stöds </li></ul><ul><li>Om misslyckas ges ett fint felmeddelande </li></ul><ul><li>Länkar till andra domäner hanteras som en vanlig sidladdning </li></ul><ul><li>För att göra en riktig GET, sätt rel=“external” </li></ul><ul><li>< a   href =&quot;/index.html&quot;   data-icon =&quot;grid&quot;   class =&quot;ui-btn-right&quot;   rel =&quot;external&quot;> Hem </ a > </li></ul>
    15. 15. Dialoger <ul><li>< a   href =&quot;#pop.html&quot;   data-rel =&quot;dialog&quot;> Pop up! </ a >   </li></ul>
    16. 16. Utökning av JQuerys API <ul><li>Event </li></ul><ul><li>Metoder </li></ul>
    17. 17. API – Events (urval) <ul><li>Touch </li></ul><ul><ul><ul><li>Tap </li></ul></ul></ul><ul><ul><ul><li>Taphold </li></ul></ul></ul><ul><ul><ul><li>Swipe </li></ul></ul></ul><ul><ul><ul><li>swipeleft/right </li></ul></ul></ul><ul><li>Scroll </li></ul><ul><ul><ul><li>start/stop </li></ul></ul></ul><ul><li>Orientation </li></ul><ul><ul><ul><li>orientationChange </li></ul></ul></ul><ul><li>Page init </li></ul><ul><ul><ul><li>pageInit() > $(document).ready() </li></ul></ul></ul><ul><ul><ul><li>Pagecreate/pagebeforecreate </li></ul></ul></ul><ul><li>Page load </li></ul><ul><ul><ul><li>Pageload/Pagebeforeload </li></ul></ul></ul><ul><ul><ul><li>Pageloadfail </li></ul></ul></ul><ul><li>Pagechange </li></ul><ul><ul><ul><li>Pagechange/pageBeforeChange </li></ul></ul></ul><ul><ul><ul><li>pageChangeFail </li></ul></ul></ul><ul><li>Page Transition </li></ul><ul><ul><ul><li>pageBeforeShow/hide </li></ul></ul></ul><ul><ul><ul><li>pageShow/hide </li></ul></ul></ul>
    18. 18. API – Metoder (urval) <ul><li>$.mobile.ajaxLinksEnabled =  false ; </li></ul><ul><li>$.mobile.silentScroll(); </li></ul><ul><li>$.mobile.activePage; </li></ul><ul><li>$.mobile.changePage(); </li></ul><ul><li>$.mobile.loadPage(); </li></ul><ul><li>jqmData(), jqmRemoveData() > data(), removeData() </li></ul>
    19. 19. Bra att använda - Media queries <ul><li>< 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'   /> </li></ul>
    20. 20. Framtiden
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×