jQuery proudly suggests the developers to "write less, do more", does it actually reflect how jQuery works, lets see.
Now, lets add some jQuery mobile sources in the head section. This is probably the last thing we'll do in the head section for now.
From now, well only work in the body section, so assume that all code that will be shown from now on is to be entered in the body section, okay?
Now, let's create some app. First lets add a header with two links, and some navigation in the footer section. Though it might seem meaningless now, you'll start to see where this is going.
Brilliant, let's now add some content. For this project, let's build a list app, like probably a, to-do list app. So, lets add a list between the header and the footer.
So, now that we've built an app with HTML5, let's see how it looks...
 |
| The hero of this post. |
First lets build an HTML5 app without any styles
Let's start by building our basic HTML5 document. Don't forget to copy in your jQuery mobile source files.
<!DOCTYPE html> <html lang="en"> <head></head> <body> <!--We'll work here--> </body> </html>
Now, lets add some jQuery mobile sources in the head section. This is probably the last thing we'll do in the head section for now.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
From now, well only work in the body section, so assume that all code that will be shown from now on is to be entered in the body section, okay?
Now, let's create some app. First lets add a header with two links, and some navigation in the footer section. Though it might seem meaningless now, you'll start to see where this is going.
<header> <h1>App title</h1> <a href="#">Home</a> <a href="#">Menu</a> </header> <footer> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Store</a></li> <li><a href="#">Office</a></li> </ul> </nav> </footer>
Brilliant, let's now add some content. For this project, let's build a list app, like probably a, to-do list app. So, lets add a list between the header and the footer.
<article> <!--We'll add an article for our app--> <ul><!--Our list--> <li><a href="#"><h1>Foo</h1><p>Some text about this list item...</p></a></li> <li><a href="#"><h1>Bar</h1><p>Some text about this list item...</p></a></li> <li><a href="#"><h1>Foo2</h1><p>Some text about this list item...</p></a></li> <li><a href="#"><h1>Bar2</h1><p>Some text about this list item...</p></a></li> </ul> </article>
So, now that we've built an app with HTML5, let's see how it looks...
 |
| Our HTML5 app without the jQuery magic |
Applying jQuery magic to our web app
Now, the magic is going to take place. What you're about to see is one reason, that made me the fan of jQuery mobile. You're about to see, how adding a few attributes to our app can absolutely make our app, beautiful.
Now, the way jQuery mobile works is you tell it what the element is using the data-role attribute and it will style the element for you...
So let's style our header first. Just add data-role="header" to the header tag. Now, let's style the footer by adding data-role="footer" to the footer tag. Now, add data-role="content" to the article element, this will add some padding to your page. Now, let jQuery cast a spell on our navigation in the footer, let's add data-role="navbar" to the nav tag. And lastly, add data-role="listview" to our ul element in our article to style our list. And our list app is ready!
But wait, let's add more cool functionality. Just add a data-position="fixed" to make sure that the footer stick to the bottom of the screen. Add data-icon="home" and data-icon="bars" to the two links in our header respectively. And lastly, let's add data-filter="true" to our ul in our article to add search functionality and you also might want to add data-filter-placeholder="Search" to change the default search text.
Now, let's see how our app looks.
Now, the way jQuery mobile works is you tell it what the element is using the data-role attribute and it will style the element for you...
So let's style our header first. Just add data-role="header" to the header tag. Now, let's style the footer by adding data-role="footer" to the footer tag. Now, add data-role="content" to the article element, this will add some padding to your page. Now, let jQuery cast a spell on our navigation in the footer, let's add data-role="navbar" to the nav tag. And lastly, add data-role="listview" to our ul element in our article to style our list. And our list app is ready!
But wait, let's add more cool functionality. Just add a data-position="fixed" to make sure that the footer stick to the bottom of the screen. Add data-icon="home" and data-icon="bars" to the two links in our header respectively. And lastly, let's add data-filter="true" to our ul in our article to add search functionality and you also might want to add data-filter-placeholder="Search" to change the default search text.
Now, let's see how our app looks.
 |
| Our app after jQuery casts its magic |
Conclusion
So, you just saw, how we can convert an unstyled, boring HTML5 app into a beautiful mobile app with jQuery mobile. You can infact build a beautiful mobile app with pure HTML5 and javascript. Check our earlier post on building cross platform mobile apps with HTML5 to learn more.
jQuery does let us write less, do more by allowing us to beautify an app with just a few attributes. You just saw, how adding 10 attributes to our element beautified them. jQuery mobile is clearly a time saver and a beautifier for all HTML5 mobile apps and I strongly recommend it if time is an important constraint in your development process.
No comments:
Post a Comment