We can develop a single-page web application in Jquery-mobile. You can access another page's content without reloading the webpage.
To make a single-page web app, Create a page using a data-role attribute and add header, section, etc. whichever you want to add.
First-page code
<div data-role="page">
<div data-role="header"><h1>This is header</h1></div>
<div data-role="main" class="ui-content">
<p>Content area</p>
</div>
<div data-role="footer"><h2>This is footer</h2></div>
</div>After first page code, you can create another page.
Second page code
<!-- Start second page coding -->
<div data-role="page" id="about">
<div data-role="header"><h1>About us</h1></div>
<div data-role="main" class="ui-content">
<p>Welcome to about us page.</p>
</div>
<div data-role="footer"><h2>About footer</h2></div>
</div>
<!-- End second page coding -->Third page code
<!-- Start third page coding -->
<div data-role="page" id="contact">
<div data-role="header"><h1>Contact us</h1></div>
<div data-role="main" class="ui-content">
<p>Welcome to contact us page.</p>
</div>
<div data-role="footer"><h2>Contact footer</h2></div>
</div>
<!-- End third page coding -->Every page should have an id value, that will be used in the href's value of anchor to open that page.
Insert button (using anchor tag) in pages to link pages. To design a button in jquery mobile add a class class="ui btn" in the anchor tag and in the anchor's href, link another page using that page id value. For example:- <a href="#about" class="ui-btn"></a>
Example of SPA
<!DOCTYPE html>
<html>
<head>
<title>Jquery Mobile</title>
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
</head>
<body>
<!--start first page coding -->
<div data-role="page" id="home">
<div data-role="header"><h1>Home</h1></div>
<div data-role="main" class="ui-content">
<p>Welcome to home page.</p>
<a href="#about" class="ui-btn">About us</a>
<a href="#contact" class="ui-btn">Contact us</a>
</div>
<div data-role="footer"><h2>Home footer</h2></div>
</div>
<!-- end first page coding-->
<!-- Start second page coding -->
<div data-role="page" id="about">
<div data-role="header"><h1>About us</h1></div>
<div data-role="main" class="ui-content">
<p>Welcome to about us page.</p>
<a href="#home" class="ui-btn">Home</a>
<a href="#contact" class="ui-btn">Contact us</a>
</div>
<div data-role="footer"><h2>About footer</h2></div>
</div>
<!-- End second page coding -->
<!-- Start third page coding -->
<div data-role="page" id="contact">
<div data-role="header"><h1>Contact us</h1></div>
<div data-role="main" class="ui-content">
<p>Welcome to contact us page.</p>
<a href="#home" class="ui-btn">Home</a>
<a href="#about" class="ui-btn">About us</a>
</div>
<div data-role="footer"><h2>Contact footer</h2></div>
</div>
<!-- End third page coding -->
</body>
</html>Add effects when another page opens
When you run above code and visit to other pages you see they open with a transition effect. To add custom effects, Use the data-transition attribute in the anchor tag. A list of transition effects in Jquery mobile is here.
Final Code
<!DOCTYPE html>
<html>
<head>
<title>Jquery Mobile</title>
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
</head>
<body>
<!--start first page coding -->
<div data-role="page" id="home">
<div data-role="header"><h1>Home</h1></div>
<div data-role="main" class="ui-content">
<p>Welcome to home page.</p>
<a href="#about" class="ui-btn" data-transition="fade">About us</a>
<a href="#contact" class="ui-btn" data-transition="pop">Contact us</a>
</div>
<div data-role="footer"><h2>Home footer</h2></div>
</div>
<!-- end first page coding-->
<!-- Start second page coding -->
<div data-role="page" id="about">
<div data-role="header"><h1>About us</h1></div>
<div data-role="main" class="ui-content">
<p>Welcome to about us page.</p>
<a href="#home" class="ui-btn" data-transition="flip">Home</a>
<a href="#contact" class="ui-btn" data-transition="turn">Contact us</a>
</div>
<div data-role="footer"><h2>About footer</h2></div>
</div>
<!-- End second page coding -->
<!-- Start third page coding -->
<div data-role="page" id="contact">
<div data-role="header"><h1>Contact us</h1></div>
<div data-role="main" class="ui-content">
<p>Welcome to contact us page.</p>
<a href="#home" class="ui-btn" data-transition="flow">Home</a>
<a href="#about" class="ui-btn" data-transition="slideup">About us</a>
</div>
<div data-role="footer"><h2>Contact footer</h2></div>
</div>
<!-- End third page coding -->
</body>
</html>
Publish A Comment