JQuery for Mobile & i-Phone Web


JQuery for mobile is an excellent tool for developing Mobile Web applications. JQuery Mobile (Latest JQuery 1.7.min.js) [As of this writing] has commercial support for i-Phone 3, i-Phone 3s, i-Phone 4, i-Phone 4s , i-Pad 2nd generations, i-Pod Touch devices. In a whole its a great app to develop powerful Mobile Web app for i-Os.

Lets start how to detect Mobile Apple Safari browser by a Mobile Web application & according to that render to i-Phone specific web app.

simply render JQuery & write Script.

 <script type="text/javascript">
    jQuery.extend(jQuery.browser,
{SafariMobile : navigator.userAgent.toLowerCase().match(/iP(hone|ad)/i) }
);
</script>
& in <Body > write:
<script>
    $(function () {
        if ($.browser.SafariMobile) {
            alert('You are using Iphone or Ipad')
        }
    })
</script>
Lets see in Apple Mobile Safari Browser the following pop-up.
Lets Develop a Simple Calori-tracker Mobile Web Application for i-Phone,i-Pad, i-Pod(Touch) type devices.
I have used JQTouch latest JavaScript Libary to develop the theme of the mobile web. A powerful open source Mobile Web development JQuery Plugin.
Download JQtouch Library free :http://jqtouch.com/
Lets explore the Code:
<!doctype html>
<html>
<head>

    <title>JQuery for i-Phone</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <link type="text/css" rel="Stylesheet" media="screen" href="jqtouch.css" />
    <link type="text/css" rel="Stylesheet" media="screen" href="theme.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jqtouch.js"></script>
<script type="text/javascript">
        var jQT = $.jQTouch({
            icon: 'kilo.png',
            statusBar: 'black'
        });
    </script>
  </head>
 <body>
<div id="home">
<div class="toolbar">
<h1>Kilo</h1>
<a class="button flip" href="#settings">Settings</a>
</div>
<ul class="edgetoedge">
<li class="arrow"><a href="#dates">Dates</a></li>
<li class="arrow"><a href="#about">About</a></li>
</ul>
</div>
<div id="about">
<div class="toolbar">
<h1>About</h1>
<a class="button back" href="#">Back</a>
</div>
</div>
<div id="dates">
<div class="toolbar">
<h1>Dates</h1>
<a class="button back" href="#">Back</a>

</div>
<ul class="edgetoedge">
<li class="arrow"><a id="0" href="#date">Today</a></li>
<li class="arrow"><a id="1" href="#date">Yesterday</a></li>
<li class="arrow"><a id="2" href="#date">2 Days Ago</a></li>
<li class="arrow"><a id="3" href="#date">3 Days Ago</a></li>
<li class="arrow"><a id="4" href="#date">4 Days Ago</a></li>
<li class="arrow"><a id="5" href="#date">5 Days Ago</a></li>
</ul>
</div>
<div id="date">
<div class="toolbar">
<h1>Date</h1>
<a class="button back" href="#">Back</a>
<a class="button slideup" href="#createEntry">+</a>
</div>
<ul class="edgetoedge">
<li id="entryTemplate" class="entry" style="display:none">
<span class="label">Label</span>
<span class="calories">000</span>
<span class="delete">Delete</span>
</li>
</ul>
</div>
<div id="createEntry">
<div class="toolbar">
<h1>New Entry</h1>
<a class="button cancel" href="#">Cancel</a>
</div>
<form method="post">
<ul>
<li><input type="text" placeholder="Food" name="food" id="food" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li ><input type="text" placeholder="Calories" name="calories" autocapitalize="off" autocorrect="off" autocomplete="off" /></li>
<li><input type="submit" class="submit" name="action" value="Save Entry" /></li>
</ul>
</form>
</div>
<div id="settings">
<div class="toolbar">
<h1>Settings</h1>
<a class="button cancel" href="#">Cancel</a>
</div>
<form method="post">
<ul>
<li><input placeholder="Age" type="text" name="Age" id="age" /></li>
<li><input placeholder="Weight" type="text" name="weight" id="weight" /></li>
<li><input placeholder="Budget" type="text" name="budget" id="budget" /></li>
<li><input placeholder="submit" type="submit" name="action" value="Save Changes" /></li>
</ul>
</form>
</div>
</body>
</html>
That's all. Lets check the Application.

This slideshow requires JavaScript.

Advertisements

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

One Response to JQuery for Mobile & i-Phone Web

  1. Pingback: Your Questions About Beat Machine Beats | Beat Maker Software SonicProducer

Leave a Reply

Please log in using one of these methods to post your comment:

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

%d bloggers like this: