Mobile 2.0 is impossible to think without JQuery Mobile/JQTouch/Sencha/Mobile Ajax with cross-platform tools support like Phonegap, RhoMobile or Titanium or Monotouch. Since for simply development of Mobile Web as hybrid or native (with Phonegap) keeping business logic perfect as desktop web are quite easy. Lets demonstrate a live Mobile Web 2.0 sample built in JQuery Mobile 1.0 RC, HTML5, CSS media queries, ASP.NET Nuget packages.
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<meta name=”apple-mobile-web-app-capable”content=”yes”/>
<meta name=”viewport”content=”width=device-width”/>
<link rel=”Stylesheet”media=”screen”href=”JQuery Mobile/jquery.mobile-1.0.1.min.css”/>
<link rel=”stylesheet”media=”screen”href=”styles/style.css”/>
<link rel=”stylesheet”media=”screen”href=”styles/jquery.datepick.css”/>
<script type=”text/javascript”src=”JQuery Mobile/jquery.js”></script>
<script type=”text/javascript”src=”JQuery Mobile/jquery.mobile-1.0.1.min.js”></script>
<script type=”text/javascript”src=”scripts/jquery.datepick.js”></script>
<script type=”text/javascript”>
$(
function () {
$(
‘#DateID’).datepick({ dateFormat: ‘yyyy/mm/dd’ });
});
</script>
</head>
<body>
<formid=”form1″runat=”server”>
<headerdata-role=”header”><h1>The Institute of Neuro Sciences</h1></header>
<divclass=”content”data-role=”content”>
<navdata-role=”navbar”>
<ul>
<li><ahref=”Default.aspx”data-role=”button”data-icon=”home”data-iconpos=”left”>Home</a></li>
<li><ahref=”IPD.aspx”data-role=”button”data-icon=”plus”data-iconpos=”left”>IPD Section</a></li>
<li><ahref=”contact.aspx”data-role=”button”data-icon=”search”data-iconpos=”left”>Contact</a></li>
</ul>
</nav>
<h3>The Outdoor Patients’ Department</h3>
</div>
Select the Department :
<asp:DropDownListID=”ddlDepartments”runat=”server”AutoPostBack=”true”
OnSelectedIndexChanged=”ddlDepartments_SelectionChanged”>
</asp:DropDownList>
Select Your Name:
<asp:DropDownListID=”ddlName”runat=”server”></asp:DropDownList>
Enter The Date :
<asp:TextBoxID=”DateID”runat=”server”/>
<asp:ButtonID=”DisplayDoctorsVisit” runat=”server”Text=”Display Patients’ Details”OnClick=”cmdbutton_Click”/>
<div>
<center>
<asp:GridViewID=”GridView2″runat=”server”AutoGenerateColumns=”False”
CellPadding=”4″
ForeColor=”Black”GridLines=”None”>
<AlternatingRowStyleBackColor=”White”ForeColor=”#284775″/>
<Columns>
<asp:BoundFieldDataField=”docname”HeaderText=”Doctor Name”ReadOnly=”true”SortExpression=”docname”/>
<asp:BoundFieldDataField=”pname”HeaderText=”Patient Name”ReadOnly=”true”SortExpression=”pname”/>
<asp:BoundFieldDataField=”ONLINE100_QUEUE”HeaderText=”Queue”ReadOnly=”true”SortExpression=”ONLINE100_QUEUE”/>
<asp:BoundFieldDataField=”online100_shift”HeaderText=”shift”ReadOnly=”true”SortExpression=”online100_shift”/>
</Columns>
<EditRowStyleBackColor=”#999999″/>
<FooterStyleBackColor=”#5D7B9D”Font-Bold=”True”ForeColor=”White”/>
<HeaderStyleBackColor=”#000000″Font-Bold=”True”ForeColor=”White”/>
<PagerStyleBackColor=”#284775″ForeColor=”White”HorizontalAlign=”Center”/>
<RowStyleBackColor=”#F7F6F3″ForeColor=”#333333″/>
<SelectedRowStyleBackColor=”#E2DED6″Font-Bold=”True”ForeColor=”#333333″/>
<SortedAscendingCellStyleBackColor=”#E9E7E2″/>
<SortedAscendingHeaderStyleBackColor=”#506C8C”/>
<SortedDescendingCellStyleBackColor=”#FFFDF8″/>
<SortedDescendingHeaderStyleBackColor=”#6F8DAE”/>
</asp:GridView>
</center>
</div>
</form>
<footerdata-role=”footer”data-position=”fixed”><h3>All Rights Reserved</h3></footer>
</body>
</html>
- JQuery Mobile DatePicker running in Windows Phone 7.5 Mango emulator.
Native UI controls support in Smartphones for Mobile Web.
Simply tested in iPad 2 .
- JQuery Mobile , Sencha Touch , JQTouch, Dojo,Mobile Ajax CDN helps to update rich Mobile View with cross-browser & cross-platform support.
Anindita's Blog 
You must be logged in to post a comment.