In the previous part we create a basic application using jquerymobile. To day we are gong to learn some exclusive feature of jquerymobile.
Jquery Mobile is basically for the mobile platform. When we create a mobile application in. jquery mobile and in the application when we change from one page to another then if there is some animation then it looks very good.
There are some basic animation given in jquerymobile called data transaction as it written in html5 and jquerymobile.
[code language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!– This Is Page One –>
<div data-role="page" id="page-one">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="main">
<a href="#page-two" data-transition="pop">Go To Page Two</a>
</div>
<div data-role="footer">
<h1>www.example.com</h1>
</div>
</div>
<!– This Is Page Two –>
<div data-role="page" id="page-two">
<div data-role="header">
<h1>Page Two</h1>
</div>
<div data-role="main">
<a href="#page-one" data-transition="flip">Go Back Page One</a>
</div>
<div data-role="footer">
<h1>www.example.com</h1>
</div>
</div>
</body>
</html>
[/code]
Fade – data-transition=”fade”
Pop – data-transition=”pop”
Flip – data-transition=”flip”
Turn – data-transition=”turn”
Flow – data-transition=”flow”
Slide Fade – data-transition=”slidefade”
Slide – data-transition=”slide”
SlideUp – data-transition=”slideup”
SLide Down – data-transition=”slidedown”
For No Data Transaction Use
When Have Two Different Page and Both Page Have different design and linking You Must use
If you don’t give rel=”external” then your second page url and design doesn’t work.One More important thing the animation doesn’t work when give rel=”external”
index.html page–
[code language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!– This Is Page One –>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="main">
<a href="index2.html" rel="external">Go To Page Two</a>
</div>
<div data-role="footer">
<h1>www.example.com</h1>
</div>
</div>
</body>
</html>
[/code]
index2.html page–
[code language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!– This Is Page One –>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="main">
<a href="index.html" rel="external">Go To Page Two</a>
</div>
<div data-role="footer">
<h1>www.example.com</h1>
</div>
</div>
</body>
</html>
[/code]
there can be many pages in jquerymobile applicaiton. So for every page back button and there action that what page it will return after trigger it. It is very complecated to remember
So we use
Source Code
[code language=”html”]
<body>
<!– This Is Page One –>
<div data-role="page" id="page-one">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="main">
<a href="#page-two" data-transition="pop">Go To Page Two</a>
</div>
<div data-role="footer">
<h1>www.example.com</h1>
</div>
</div>
<!– This Is Page Two –>
<div data-role="page" id="page-two">
<div data-role="header">
<h1>Page Two</h1>
</div>
<div data-role="main">
<a data-rel="back" data-transition="flip">Go Back Page One</a>
</div>
<div data-role="footer">
<h1>www.example.com</h1>
</div>
</div>
</body>
[/code]
Step into the future with CyberNetikz, where we craft tomorrow’s tech innovations with today’s coding artistry Mega Medusa Casino.