Creating a simple web page for smart phones using jquery mobile

Android, iPhone, blackberry etc…, these are the things that you often hear when some speaks about phones.. And moreover you spend more time browsing for mails and accessing some web applications on your mobile phones rather than your PC’s… Also as a web developer/designer you always keep the cross-browser constraint in your mind… And when it comes to accessing web applications on your mobile devices it’s a much more pain.. You always think of having something that is more light-weight and is both cross-platform and cross-device…
Well with jquery mobile framework, these constraints are resolved…

jquery mobile is a framework that provides a rich user interface for all popular mobile device platforms and most of all, it is light-weight and flexible.. it also has a rich set of widgets and styling that are easily made available for users… All you have to do is to include the jquery mobile library and a set of stylesheets are available at http://jquerymobile.com/download/… Alternatively you can also specify.,

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</pre>
So that’s what you are required to include in your webpage…. Now let’s get started by creating a simple ui webpage…

Since jquery mobile is an HTML-5 based user interface, much of the traits are derived from HTML-5…

Consider Mr. Swaroop would like to have a small web app on his phone which shows him a summary of his To-Do lists and some of his weekend plans and he wants it in the following format….

Let’s design this using our jquery mobile now….  Continue reading

Advertisements