Beginner’s tutorial coding web apps with j query mobile spyrestudios


Published on

Published in: Education, Technology
1 Comment
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Beginner’s tutorial coding web apps with j query mobile spyrestudios

  1. 1. 6/17/13 Beginner’s Tutorial Coding Web Apps with jQueryMobile | 1/8SpyreStudios - Design and Development MagazineFreebiesArchivesContactAdvertisetype keywords and hit enter...Beginner’s Tutorial Coding Web Apps with jQuery MobileTweetTweet24Contentcommentsadvertise hereadvertise hereThe whole jQuery library has grown tremendously in the past couple of years. With open resources such as Git andGithub web developers have been creating plugins for even richer effects. Some of the team members had a great ideato port this code over to a mobile platform.
  2. 2. 6/17/13 Beginner’s Tutorial Coding Web Apps with jQueryMobile | 2/8In this guide it is my goal to introduce you into the jQuery Mobile platform. There is a lot of material to cover so welikely won’t hit everything. But fortunately the team has made development super easy and streamlined with fantasticdocumentation. Check out the website and fairly active developer’s forum for more in-depth answers.A Basic TemplateSo getting started we should look at an example HTML template used for any standard jQuery Mobile application.When I talk about a jQM app this doesn’t necessarily mean you need to include user interaction and account signupsand a database.But I do think jQuery Mobile isn’t exactly for building websites as much as smaller web apps. The browser market hasbeen finicky in the past, but now we’ve reached a point where the majority do support jQuery Mobile and these appscan be rapidly developed.
  3. 3. 6/17/13 Beginner’s Tutorial Coding Web Apps with jQueryMobile | 3/8Take for example my demo code below. This will output a completely empty page with a simple title and includes the 3external documents we need for any jQM app. These include the latest JavaScript version of jQuery & jQuery Mobile,along with the default CSS styles for jQM.View the demoOf course this is just a very basic example to get us started. The same semantics still apply where you should add allyour page content within the HTML body tags. But jQuery Mobile will actually let you code multiple app pages into asingle HTML file. This concept is a bit confusing at first so let’s break it down.You may want to save the template above into a new index.html file. Now within this one file we can use data-roles tocreate a couple page elements. When your app first loads the top page will behave as your home or index. Then youwould link between these pages by targeting the ID attribute. The page anatomy section gives you an overview of theadditional elements you may add such as forms, inputs, headers, lists, or even a footer toolbar area.Linking Between PagesBelow I have included some more example code demonstrating page links. You can add this into the body section ofyour own app, or modify the content a bit to your liking. What’s important here is the unique ID for for each containerelement and how the anchor links point to a new page.1 <!DOCTYPEhtml>2 <html>3 <head>4 <title>StandardjQMTemplate</title>5 <linkrel="stylesheet"href=" <scripttype="text/javascript"src=" <scripttype="text/javascript"src=" </head>910 <body>1112 </body>13 </html>1 <divdata-role="page"id="home">2 <divdata-role="header">3 <h1>Hereistheindexpage.</h1>4 </div>56 <divdata-role="content">7 <p><center>Belowyoumaytransitiontoourotherpages.</center></p>89 <ahref="#about"data-role="button"data-inline="true">AboutMe</a>10 </div>11 </div>1213 <divdata-role="page"id="about">14 <divdata-role="header">15 <h1>AboutUs</h1>16 </div>1718 <divdata-role="content">
  4. 4. 6/17/13 Beginner’s Tutorial Coding Web Apps with jQueryMobile | 4/8View the demoOn each of the anchor links I’m taking advantage of a few more HTML data-attributes. data-role is used to change thelink style from plain text into a rounded button. Similarly the inline attribute makes the button appear as a smaller limited-width box. Otherwise we have links which span the entirety of the page and just look terrible!On the About page I added a link with data-rel=”back” which you should familiarize yourself with. jQM does supportbrowser history and you can use this attribute to simulate a back button at will. I did set the href value same as the homeID, but we could have used href=”#pork” and still gotten back to the previous view. Only because in this scenariodata-rel overrides the href attribute no matter what value we put in.Mobile Page StructuresAfter you begin to see how mobile apps are put together jQM appears more like a framework than simply a JavaScriptlibrary. And within this framework we must work with different rules compared to a regular web design. One such issuepertains to default page views how different mobile browsers will render the same code.The meta viewport tag can be added into your header to force all mobile browsers to render page zoom at 100%. Thisis a bigger problem with software such as Mobile Safari, as each website is purposefully scaled down to fit within thescreen resolution. But adding the following tag into your header will reset this value and always keep your pages focusedat the right size.The best part about this method is that you are able to customize how users experience your app. For example in mycode above the user can still re-size the zoom at will if they don’t like our 100% setting. By adding user-scalable=noto the list of commands your app will be locked into the scope and overrides default browser settings.19 <ahref="#home"data-rel="back"data-role="button"data-inline="true">&laqu20 </div>21 </div>1 <metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-s
  5. 5. 6/17/13 Beginner’s Tutorial Coding Web Apps with jQueryMobile | 5/8Images are also a bit difficult to manage. Ultimately as the web designer it is your choice on how to handle image sizes. Irecommend keeping things below a 450px width but experiment to see what looks best. By default visitors will be ableto swipe over and down to get the whole view if your image exceeds the screen size. But you can set full 100% widthfor iOS devices using some real basic CSS styles to fix this for most of your traffic.Remove the Loading MessageOne other annoyance is the modal box which appears each time you transition to another page. jQuery Mobile has thisrunning by default which ironically may not be the most effective choice. This appears whether you are loading pagesfrom within the same file or external individual files.To remove this we need to call upon a bit of JavaScript. This relies on jQuery commands but needs to be implementedbefore the jQuery Mobile library is initialized. Thus you’ll want to include this code in the middle of these 2 docs in yourheader area. I just added everything inline and you can check out my demo below.View the demoThe mobileinit method is run immediately after jQuery Mobile has finished loading. We are binding an event handler tothat method and calling our own function as a response. The setting for $.mobile.loadingMessageis generally astring of text which appears in the loading message dialog between pages. But when set to false the whole feature isdisabled immediately! You can read more about global configuration and other jQM settings from their online docs.ConclusionIn this brief tutorial we have covered the very basics of a jQuery Mobile application. I’ve exposed you to a basictemplate and the required elements for any standard page, along with some more intermediate-to-advanced levelconfiguration stuff. After this guide you should feel a lot more comfortable toying around with the Mobile library andexploring their online documentation.If you have built your own mobile template or design we’d love to check it out. The current 1.0 release is stable and willcontinue with bug fixes as time progresses. Let us know your thoughts in the discussion area below along with anyquestions or complaints you have.1 <scripttype="text/javascript"src=""2 <scripttype="text/javascript">3 $(document).bind("mobileinit",function(){4 $.mobile.loadingMessage=false;5 });6 </script>7 <scripttype="text/javascript"src=" </head>
  6. 6. 6/17/13 Beginner’s Tutorial Coding Web Apps with jQueryMobile | 6/8advertise hereadvertise hereAbout the author:Jake is a social media enthusiast and an Internet entrepreneur. He frequently writes articles involving new-age designconcepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleauRelated Entries:How to Style iOS Sliding Checkboxes with jQueryCode a Dynamic Questions & Answers FAQ Page with jQueryHow To Build an Alphabetical Page Index using jQueryBuilding a Live Textarea Character Count Limit with CSS3 and jQueryCoding an Image Thumbnail Hover Magnify Effect with jQueryComments:
  7. 7. 6/17/13 Beginner’s Tutorial Coding Web Apps with jQueryMobile | 7/8Advertise HereReason:Content blockedby yourorganizationThisWebsensecategory isOptions: Click moreinformation tolearn more aboutyour accesspolicy.Popular Articles and Resources (view archives)
  8. 8. 6/17/13 Beginner’s Tutorial Coding Web Apps with jQueryMobile | 8/8advertise hereadvertise hereCopyright 2007-2011. All rights reserved. Privacy Policy