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…. 

Since it’s HTML-5, we just use the <!DOCTYPE html> and we include the files that we discussed earlier as shown below…

<!DOCTYPE html>
<html>
	<head>
		<title>zwaroop's...</title>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
		<style type = "text/css">
			td{
				color: black;
			}

		</style>
	</head>
	<body>

		<div data-role = "page" id = "main">
			<div data-role = "header" data-theme = "c">
				<br>
			</div>
				<div data-role = "header" data-position = "fixed">
				<!-- navbar -->
					<div data-role="navbar">
						<ul>
							<li><a href="#" class="ui-btn-active" data-icon = "grid" data-ajax="false">Summary</a></li>
							<li><a href="#" data-transition="reverse" data-icon = "star" data-ajax="false">Actions</a></li>
						</ul>
					</div>
					<!-- /navbar -->
				</div>

			<div data-role="content" data-theme = "d" style = "//margin-left: -5px;">
				<ul  data-role="listview" data-divider-theme="a" data-inset="true" data-count-theme = "a" style = "font-size: 10pt;">
					<li data-theme="a">My To-Do List </li>
					<li><a href="#">Call Bank Manager <span class="ui-li-count">1</span></a></li>
					<li><a href="#">Post a Cheque to Mr. Josh - $500 <span class="ui-li-count">1</span></a></li>
					<li><a href="#">Schedule a Meeting for the next week <span class="ui-li-count">2</span></a></li>
					<li><a href="#">Negotiate about finances with Mrs. Watson <span class="ui-li-count">2</span></a></li>
					<li data-theme = "a">My Weekend Plans</li>
					<li><a href="#">Go Fishing <span class="ui-li-count">1</span></a></li>
					<li><a href="#">Build a house for my tortoise <span class="ui-li-count">2</span></a></li>
					</ul>
		</div>

			<div data-role="footer" data-theme = "c">
				<p style = "font-size: 8pt; margin-left: 10px;" align = "left">Copyright Info... &copy;</p>
			</div>
		</div>
	</body>
</html>

The jquery mobile framework has many inbuilt themes and we specify those themes using the data-theme attribute…

The data-role attribute is used to specify a header, footer, content etc..

To specify a wrapper we use: data-role=”page” and for navigation-menus you can use the data-role=”navbar”… All these are included within the <div> tags eg: <div data-role=”page”></div>

Yo can also turn on/off the ajax feature by using data-ajax=”false”, it’s on by default…

To specify the “My To-do List”, i have used a list item by specifying <ul data-role=”listview”><li> </li></ul>

The framework also provides a set of themes named as a,b,c and so on… You can specify these themes by using the data-theme attribute…

Also u can specify a count-bubble by using <span class=”ui-li-count”>1</span>….

Yeah that’s about it.. I’ve just touched the very basics of using jquery mobile… hope u like it….

Advertisements

6 comments on “Creating a simple web page for smart phones using jquery mobile

  1. Howdy I’m not sure whether it’s me or simply
    your website but it is starting absolutely slow for me, I had to spend
    just like a minute or two to load still facebook does work absolutely .

    On the other hand thank you for creating brilliant blog post.
    Almost everyone who actually discovered this page really should have
    found this informative article seriously useful.
    I hope I’ll be able to find even more awesome things and I also should
    certainly compliment your site simply by saying you’ve done wonderful writing.
    To get more knowledge through articles which you write-up, I have
    saved to bookmarks the site.

  2. Hey! Your website is loading slowly to me, that took like a minute to actually load up, I personally
    do not know if it is just me or perhaps your blog but
    facebook performed fine for me. Nevertheless,
    I want to thank you for adding excellent post. Everyone who
    discovered this website must have observed this short article honestly helpful.
    I really hope I will be able to find further remarkable information and I should really compliment your site simply by telling you have done amazing writing.
    Just after viewing your post, I have book-marked your web site.

  3. Greetings Facebook operates well yet your web site is running steadily which actually took around one
    minute to successfully load, I’m not sure if it’s my problem perhaps website problem.
    Nevertheless, Let me say thanks for adding awesome blog post.
    I guess it really has already been useful to a lot of people who arrived at this point.

    I hope I will be able to find a lot more remarkable
    stuff and I also should flatter you by saying you have done amazing job.
    Soon after taking a look at the post, I’ve bookmarked your web page.

  4. Hi there! Your website is running slowly for my situation,
    that took just like a minute or so to actually load, I actually have no
    idea whether it is just simply me or your websites then again facebook loaded acceptable for me.
    Anyways, I want to say thanks for putting beautiful article.
    Almost everyone who actually found this great site
    should have noticed this particular article really beneficial.
    I hope I’ll be able to get even more remarkable stuff and I should
    complement by stating you have done awesome job.
    To obtain additional information through content you write-up, I have saved this site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s