Here we will discuss about basic knowledge of jquery mobile application
which are compatible for all
All device.
The jQuery
Mobile is a framework that built on top of the jQuery and jQuery UI foundation.
The framework allow us to develop a
single mobile web applications that work across smartphones, platforms and
tablets. In addition, one for the great features that jQuery Mobile is
“Progressive enhancement and graceful degradation“, which means that jQuery
Mobile will fully leverages the latest technologies HTML5, CSS3, and JavaScript on
the supported modern devices and will still provide the best possible
experience, basic functionality and basic content for less capable devices as
well.
<div
data-role=”header”>
//This is
use for header content.
</div>
<div
data-role=”content”>
//This is
use for body content.
</div>
<div
data-role=”footer”>
//This is
use for footer content.
</div>
Before using
above tag use following JavaScript and CSS.
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<link
rel="stylesheet" href="JScritpt/demos/css/themes/default/jquery.mobile-1.2.0.css"
/>
<script
src="JScritpt/jquery-1.7.2.js"
type="text/javascript"></script>
<script
src="JScritpt/jquery.mobile-1.2.0.min.js"
type="text/javascript"></script>
Here is complete program as exmple
<%@ Page
Language="VB" AutoEventWireup="false"
CodeFile="Index.aspx.vb" Inherits="Default2" %>
<!DOCTYPE
html>
<html>
<head
runat="server">
<title>Home Page</title>
<meta
name="viewport" content="width=device-width,
initial-scale=1" />
<link rel="stylesheet"
href="JScritpt/demos/css/themes/default/jquery.mobile-1.2.0.css"
/>
<script
src="JScritpt/jquery-1.7.2.js"
type="text/javascript"></script>
<script
src="JScritpt/jquery.mobile-1.2.0.min.js"
type="text/javascript"></script>
</head>
<body>
<div
data-role=”header”>
//This is
use for header content.
</div>
<div
data-role=”content”>
//This is
use for body content.
</div>
<div
data-role=”footer”>
//This is
use for footer content.
</div>
</body>
</html>
No comments:
Post a Comment