Top Banner
C comments advertise here advertise here The whole jQuery library has grown tremendously in the past couple of years. With open resources such as Git and Github web developers have been creating plugins for even richer effects. Some of the team members had a great idea to port this code over to a mobile platform.
8

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

Jan 15, 2015

Download

Education

danieldowns1

 
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Beginner’s tutorial coding web apps with j query mobile   spyrestudios

6/17/13 Beginner’s Tutorial Coding Web Apps with jQuery Mobile | SpyreStudios

spyrestudios.com/beginners-tutorial-coding-web-apps-with-jquery-mobile/ 1/8

SpyreStudios - Design and Development Magazine

Freebies

Archives

Contact

Advertise

type keywords and hit enter...

Beginner’s Tutorial Coding Web Apps with jQuery Mobile

TweetTweet

24

Content comments

advertise hereadvertise here

The 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 idea

to port this code over to a mobile platform.

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

6/17/13 Beginner’s Tutorial Coding Web Apps with jQuery Mobile | SpyreStudios

spyrestudios.com/beginners-tutorial-coding-web-apps-with-jquery-mobile/ 2/8

In this guide it is my goal to introduce you into the jQuery Mobile platform. There is a lot of material to cover so we

likely won’t hit everything. But fortunately the team has made development super easy and streamlined with fantastic

documentation. Check out the website and fairly active developer’s forum for more in-depth answers.

A Basic Template

So 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 signups

and a database.

But I do think jQuery Mobile isn’t exactly for building websites as much as smaller web apps. The browser market has

been finicky in the past, but now we’ve reached a point where the majority do support jQuery Mobile and these apps

can be rapidly developed.

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

6/17/13 Beginner’s Tutorial Coding Web Apps with jQuery Mobile | SpyreStudios

spyrestudios.com/beginners-tutorial-coding-web-apps-with-jquery-mobile/ 3/8

Take for example my demo code below. This will output a completely empty page with a simple title and includes the 3

external 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 demo

Of course this is just a very basic example to get us started. The same semantics still apply where you should add all

your page content within the HTML body tags. But jQuery Mobile will actually let you code multiple app pages into a

single 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 to

create 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 the

additional elements you may add such as forms, inputs, headers, lists, or even a footer toolbar area.

Linking Between Pages

Below I have included some more example code demonstrating page links. You can add this into the body section of

your own app, or modify the content a bit to your liking. What’s important here is the unique ID for for each container

element and how the anchor links point to a new page.

1 <!DOCTYPE html>2 <html>3 <head>4 <title>Standard jQM Template</title>5 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css"6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"7 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"8 </head>9 10 <body>11 12 </body>13 </html>

1 <div data-role="page" id="home">2 <div data-role="header">3 <h1>Here is the index page.</h1>4 </div>5 6 <div data-role="content">7 <p><center>Below you may transition to our other pages.</center></p>8 9 <a href="#about" data-role="button" data-inline="true">About Me</a>10 </div>11 </div>12 13 <div data-role="page" id="about">14 <div data-role="header">15 <h1>About Us</h1>16 </div>17 18 <div data-role="content">

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

6/17/13 Beginner’s Tutorial Coding Web Apps with jQuery Mobile | SpyreStudios

spyrestudios.com/beginners-tutorial-coding-web-apps-with-jquery-mobile/ 4/8

View the demo

On each of the anchor links I’m taking advantage of a few more HTML data-attributes. data-role is used to change the

link 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 support

browser history and you can use this attribute to simulate a back button at will. I did set the href value same as the home

ID, but we could have used href=”#pork” and still gotten back to the previous view. Only because in this scenario

data-rel overrides the href attribute no matter what value we put in.

Mobile Page Structures

After you begin to see how mobile apps are put together jQM appears more like a framework than simply a JavaScript

library. And within this framework we must work with different rules compared to a regular web design. One such issue

pertains 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%. This

is a bigger problem with software such as Mobile Safari, as each website is purposefully scaled down to fit within the

screen resolution. But adding the following tag into your header will reset this value and always keep your pages focused

at the right size.

The best part about this method is that you are able to customize how users experience your app. For example in my

code above the user can still re-size the zoom at will if they don’t like our 100% setting. By adding user-scalable=no

to the list of commands your app will be locked into the scope and overrides default browser settings.

19 <a href="#home" data-rel="back" data-role="button" data-inline="true">&laquo; Back Home</20 </div>21 </div>

1 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"

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

6/17/13 Beginner’s Tutorial Coding Web Apps with jQuery Mobile | SpyreStudios

spyrestudios.com/beginners-tutorial-coding-web-apps-with-jquery-mobile/ 5/8

Images are also a bit difficult to manage. Ultimately as the web designer it is your choice on how to handle image sizes. I

recommend keeping things below a 450px width but experiment to see what looks best. By default visitors will be able

to swipe over and down to get the whole view if your image exceeds the screen size. But you can set full 100% width

for iOS devices using some real basic CSS styles to fix this for most of your traffic.

Remove the Loading Message

One other annoyance is the modal box which appears each time you transition to another page. jQuery Mobile has this

running by default which ironically may not be the most effective choice. This appears whether you are loading pages

from 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 your

header area. I just added everything inline and you can check out my demo below.

View the demo

The 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.loadingMessage is generally a

string of text which appears in the loading message dialog between pages. But when set to false the whole feature is

disabled immediately! You can read more about global configuration and other jQM settings from their online docs.

Conclusion

In this brief tutorial we have covered the very basics of a jQuery Mobile application. I’ve exposed you to a basic

template and the required elements for any standard page, along with some more intermediate-to-advanced level

configuration stuff. After this guide you should feel a lot more comfortable toying around with the Mobile library and

exploring 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 any

questions or complaints you have.

1 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"2 <script type="text/javascript">

3 $(document).bind("mobileinit", function(){4 $.mobile.loadingMessage = false;5 });6 </script>7 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"8 </head>

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

6/17/13 Beginner’s Tutorial Coding Web Apps with jQuery Mobile | SpyreStudios

spyrestudios.com/beginners-tutorial-coding-web-apps-with-jquery-mobile/ 6/8

advertise hereadvertise here

About the author:

Jake is a social media enthusiast and an Internet entrepreneur. He frequently writes articles involving new-age design

concepts and freelance management skills. You can find him in Google or follow his tweets @jakerocheleau

Related Entries:

How to Style iOS Sliding Checkboxes with jQuery

Code a Dynamic Questions & Answers FAQ Page with jQuery

How To Build an Alphabetical Page Index using jQuery

Building a Live Textarea Character Count Limit with CSS3 and jQuery

Coding an Image Thumbnail Hover Magnify Effect with jQuery

Comments:

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

6/17/13 Beginner’s Tutorial Coding Web Apps with jQuery Mobile | SpyreStudios

spyrestudios.com/beginners-tutorial-coding-web-apps-with-jquery-mobile/ 7/8

Advertise Here

Reason:

Content blockedby yourorganization

ThisWebsensecategory is

Options: Click moreinformation tolearn more aboutyour accesspolicy.

Popular Articles and Resources (view archives)

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

6/17/13 Beginner’s Tutorial Coding Web Apps with jQuery Mobile | SpyreStudios

spyrestudios.com/beginners-tutorial-coding-web-apps-with-jquery-mobile/ 8/8

advertise hereadvertise here

Copyright 2007-2011. All rights reserved. Privacy Policy