Intro To JQuery Mobile

  • Article

I just recently got interested in exploring different web technologies, frameworks, etc.  In college, I did a tad bit with html and javascript, but not enough to feel very comfortable.  Anyways, in some of my recent free time, I have been playing around with JQuery Mobile, and am excited about it as a great way to get started creating web apps.

JQuery Mobile is built on top of JQuery and really focuses on giving you, the developer, an easy way to create mobile looking apps without too much trouble.  Typically, it would be up to the developer to customize his html with .css files, and that quickly becomes a pain…especially if struggle with theming and the artistic side like I do.  For that reason, JQuery mobile has been fantastic for me in the last couple of weeks because I can take the little html and javascript that I know and create things that do, in fact like mobile apps.

JQuery Mobile obviously is built for mobile, but what does that mean?  First off, it is optimized for touch.  Have you ever tried to view a website on your phone and struggled to click a certain button?  Well, JQuery mobile is great for that scenario because it is created to span all different size of browsers whether they be on a desktop or phone and everything in between.  Additionally, JQuery Mobile is responsive which means it adapts to the current screen size.  Again, when we have such a wide range of devices and screen real estate, this is HUGE!  This way, you only write your code once and JQuery Mobile takes care of the rest.  Because JQuery Mobile is built on top of JQuery which is built on JavaScript, this makes any projects cross platform capable, meaning you can publish to any platform that has a browser.  Keep in mind, all mobile platforms have browsers Smile 

Getting Started

So, how do you get started with JQuery Mobile?  What I would highly recommend is going the JQuery Mobile section on W3 schools, here.  W3 schools is a fantastic source for getting started with all kinds of web technologies.  I can’t recommend it enough.  It starts out so basic that it covers an level and range of experience and backgrounds.  Again, highly recommended.

If you want to get started right away, you only need to add four different tags to the head of your html.  3 of these tags are references to the necessary files (JQuery Mobile css, JQuery Mobile js, and JQuery js)  The other tag is a metaview tag which specifies how the browser should control the page zoom level and dimensions.  So, all in all, you will be adding these four lines inside of your head tag.  Pretty straight forward.

<head>
< meta name="viewport" content="width=device-width, initial-scale=1">
< link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
< script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
< script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
< /head>

An app using JQM is structured in terms of pages.  You will use data-role=”page” inside of a div tag to designate a page.  Then, within each page, you typically have a header, main content section, and footer.  Each of these is defined by using the data-role property as well.  So, your typical bare page layout will look like this.

<!DOCTYPE html>
< html>
< head>
< meta name="viewport" content="width=device-width, initial-scale=1">
< link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
< script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
< script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
< /head>
< body>

<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>I Am Now A Mobile Developer!!</p>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
< /div>

</body>
< /html>

One of the really cool features here is that you can define multiple pages in one html file.  This means that when navigating to a second page, no html has to be loaded because it is already loaded in the initial page load.  You have the option of whether or not you want this to happen, but in my mind, a very cool feature.  To add a second page, you simply add another div tag with data-role=”page” below the closing tag of your first page.  Again, each page will typically have a header, footer, and content section.

I will follow up this post with a couple of different videos, but I just wanted to do a quick post to hopefully get some people interest in JQM.In the meantime, If you want to check out some of my demos you can find them on GitHub.  I have been playing around for a couple of weeks and have been having a ton of fun, so I hope that you will too.  If you have any questions, comment below or find me on twitter @jquickwit.

 

**Update**  I have added two posts that include vides on creating your first mobile web app with JQuery Mobile and then working with Collapsibles and LIstviews in JQM.