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
Embed
Beginner’s tutorial coding web apps with j query mobile spyrestudios
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
6/17/13 Beginner’s Tutorial Coding Web Apps with jQuery Mobile | SpyreStudios
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
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
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.
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