Recomendados
Más contenido relacionado
Destacado
Destacado (17)
Similar a Touch/Mobile Websites with jQuery Mobile - Boise Code Camp 2013
Similar a Touch/Mobile Websites with jQuery Mobile - Boise Code Camp 2013 (20)
Último
Último (20)
Touch/Mobile Websites with jQuery Mobile - Boise Code Camp 2013
- 1. TM Touch & Mobile Friendly Websites with jQuery Mobile Brett Adler FieldSync Mobile Solutions www.FieldSyncMobile.com 3/16/2013 1
- 2. TM What is jQuery Mobile? An open-source framework that makes building touch-friendly sites quicker and easier. A single JavaScript file (.js) A single Cascading Style Sheet (.css) 3/16/2013 2
- 3. TM Core Features/Benefits • Broad cross browser support • Touch-friendly user interface • Themable and customizable • AJAX navigation • Animated transitions • Events & Methods • Open source • Based on jQuery and jQuery UI • Lightweight 3/16/2013 3
- 4. TM Example – FieldSync App 3/16/2013 source: www.FieldSyncMobile.com 4
- 5. TM Example – Boise Valley Tech 3/16/2013 source: www.BoiseValleyTech.com 5
- 6. TM Example – Beacon Guides 3/16/2013 source: www.BeaconGuides.com 6
- 7. TM Examples 3/16/2013 source: www.jqmgallery.com 7
- 8. TM Examples 3/16/2013 source: www.jqmgallery.com 8
- 9. TM Getting Started Simply add this to the <head> of your HTML page and you’re ready to start using it… <!– jQuery Mobile CSS --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <!– jQuery --> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <!– jQuery Mobile JavaScript --> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> (you can also download the files and host them locally) 3/16/2013 9
- 10. TM Minimal Markup For Mobile/Touch Step #1: Define Type Step #2: Set Attributes data-role = “listview” data-theme = “b” data-role = “button” data-inset = “true” data-role = “navbar” data-iconpos = “bottom” data-role = “popup” data-icon = “delete” etc.... etc… 3/16/2013 10
- 11. TM Minimal Markup 3/16/2013 11
- 12. TM Minimal Markup 3/16/2013 12
- 13. TM Header Bars 3/16/2013 13
- 14. TM Navigation Bars 3/16/2013 14
- 15. TM Buttons 3/16/2013 15
- 16. TM Lists 3/16/2013 16
- 17. TM Forms 3/16/2013 17
- 18. TM Accordions 3/16/2013 18
- 19. TM Side Panel 3/16/2013 19
- 22. TM Search with Autocomplete 3/16/2013 22
- 23. TM Popups 3/16/2013 23
- 24. TM Photo Lightbox 3/16/2013 24
- 25. TM Themable 3/16/2013 25
- 26. TM Events jQuery Mobile provides a variety of events to help with development. • Tap / Taphold • Swipe / Swipe Left / Swipe Right • Mouse Over / Mouse Up / Mouse Down • Orientation Change • Scroll Start / Scroll Stop • Page Hide / Page Show • Page Load / Page Before Load / Page Load Failed • Page Change / Page Before Change / Page Change Failed • Page Create / Page Before Create / Page Init 3/16/2013 26
- 27. TM Event Examples Before the Page is Created After the Page Shows $("#Home").live( 'pagebeforecreate',function(event){ $("#Home").live( 'pageshow',function(event){ var html = „<ul id=“participantList” showStatus(„Loading…‟); data-role=“listview”></ul>‟; var dataSet = getData(); $(„#Home‟).html(html); var listElements = „‟; }); $.each( dataSet, function(index, row) { listElements += „<li>‟ + row.title + „</li>‟; }); $(„#participantList‟).html(listElements ).listview(„refresh‟); hideStatus(); }); 3/16/2013 27
- 28. TM Event Examples Swipes & Taps $(“#Home").bind("swiperight",function(){ $.mobile.changePage("participant_info.html“, {transition: ”fade”}); }); $(“#Home").bind("swiperight",function(){ $.mobile.changePage(“logs.html“, {transition: ”slide”}); }); $(“#Home").bind(“tap",function(){ $.mobile.changePage(“participant_info.html“, {transition: ”slideup”}); }); $(“#Home").bind(“taphold",function(){ $.mobile.changePage(“logs.html“, {transition: ”none”}); }); 3/16/2013 28
- 29. TM Resources • www.jQueryMobile.com • api.jquerymobile.com • view.jquerymobile.com/1.3.0 3/16/2013 29
- 30. TM Brett Adler Software Developer Work Brett.Adler@FieldSyncMobile.com www.FieldSyncMobile.com Personal Brett@BeaconGuides.com www.BeaconGuides.com Get this presentation: http://slidesha.re/111jfw5 http://www.slideshare.net/BrettAdler1/touchmobile-websites-with-jquery-mobile-boise-code-camp-2013 3/16/2013 30