Happy days are coming soon as jQuery Mobile 1.0 is already in Beta 2 phase which is going to enter Beta 3 in, probably, next month and then to Release Candidates (RC). However, the current state of jQuery Mobile is very well qualified for playing. So, I wish to write some beginner level blog posts as I discover it. If you find any mistake, error and/or you have any suggestion, please feel free to notify me.
Today we will see how to create first page with jQuery Mobile 1.0 Beta 2. We will see other things in near future, may be :P.
What is jQuery Mobile?
Isn’t that very stupid question as, I guess, you already know that before coming here? Who does not know that it is a ‘write less, do more’ web framework built on top of jQuery & jQuery UI for developing mobile applications with fun? It is optimized for touch screen based smart phones including Android, iPhone, Windows Phone. However, lets see what wikipedia says about it?
What you need?
As it is a mobile application framework, you will need a unsmart phone with supported platforms/browsers. However, you can test it on generic desktop web browsers too. I’m testing it using iPhone Simulator :).
Let’s create a page
jQuery Mobile pages are easy to create. You can consider it standard web page(s) with special markup. However, it is possible to create more than one mobile (virtual) pages in the same webpage.
Create a html page, may be index.html, and open it in your favorite editor
jQuery Mobile pages are to be created with HTML5 markup to fully utilize the library’s features. So, at first, we will declare the HTML5 doctype.
See? HTML5 doctype declaration is easiest than ever.
3. Head Block
Then in the famous head block, we will put some important codes that will highly affect our mobile page. For example, viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
Viewport meta tag is very important as it directs the browser about page width and dimension. Unless you use it, browsers will set width something that is not comfortable for your users as it may be very wide and zoomed out. ‘width=device-width’ in the above meta tag tells the browser to set the page’s width equals to width of device that is being used. ‘initial-scale’ sets the zoom level of the page on load, which should be 1. You can set higher value if you want to zoom-in the page.
4. Load the jQuery Mobile libraries
In the head, we will load the jQuery Mobile library files. We will use the CDN enabled links for ease and better performance.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
5. Creating page block
Page block will be started in <body> tag. Pages are actually different <div> blocks with special attribute and value. A body tag can hold multiple mobile pages/views too. Lets create our first page:
<div data-role="page"> </div>
Hey, we’ve declared the scope of our first page. Congrats! But, lets play with it a bit more.
<div data-role="page"> <div data-role="header"> </div> <div data-role="content"> </div> <div data-role="footer"> </div> </div>
We’ve created the placeholders for header, content and footer.
6. More in header
Let’s extend the header section (identified by <div data-role=”header”>) now:
<div data-role="header"> <a href="index.html" data-icon="home">Home</a> <h1>Welcome to our first mobile page</h1> <a data-rel="back" data-icon="back">Go back</a> </div>
Now the page will look like the following screenshot.
Doesn’t it look cool? Yes, it does :).
In addition to header and anchor tags, we’ve introduced two important things here. They are data-icon and data-rel attributes. The heading tags (h1-h6) in the ‘header’ section becomes the title for that page.
Before the page title, we’ve added an anchor tag which links to site’s homepage. The attribute ‘data-icon’ with value ‘home’ tell jQuery mobile framework to show home icon for this link. In the same way, we’ve instructed to use back icon for the anchor tag after the page title. The other new attribute data-rel=”back” tells the framework to mimic browser’s back button to this link. That means, whenever you click this button, it will bring you to previous page. May be, there are not much use for this button on homepage but I just wanted to show that I learned it ;).
7. Putting the content
We can put our own HTML contents here.
<div data-role="content"> <p>The html markup can go here</p> </div>
We will not go detail about these in this post. Next post, may be.
8. Page Footer
<div data-role="footer"> <p>Footer Content</p> </div>
So, here is the final output
Piling them altogether:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css"/> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="index.html" data-icon="home">Home</a> <h6>Welcome to our first mobile page</h6> <a data-rel="back" data-icon="back">Go back</a> </div> <div data-role="content"> <p>The html markup can go here</p> </div> <div data-role="footer"> <h2>Footer Content</h2> </div> </div> </body> </html>
In next post, I will try to show more about page content and navigation between pages. Till then good luck!