Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vad är JQuery Mobile - Blixttal Mallis 2011

In Swedish

  • Be the first to comment

  • Be the first to like this

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

    Be the first to comment

    Login to see the comments

In Swedish

Views

Total views

1,067

On Slideshare

0

From embeds

0

Number of embeds

38

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×