A Sample of Mobile Web 2.0 with HTML5 Boilerplate, CSS3 Media Query, JQuery Mobile,Mobile Ajax/Dojo.


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.

Used  simply databinding features from ASP.NET & bind the JQuery Mobile plugins. Check the following Code:

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

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

 

Advertisements
%d bloggers like this: