You Can Use JQuery Mobile Panels To Show Content Over The Current Content.Panels Will Slide Out From The Left Or The Right Side Of The Screen. Following Html Page Will Help You Use JQury Mobile Panels In Your Mobile Web Site.
Normally Panels Are Open By Calling Link. If You Want You Can Open A Panel By Event Also.
NOTE : Always Keep Your Panels Bottom Of The Body Tag.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script>
function openPanel(){
$.mobile.activePage.find('#myPanel1').panel("open");
}
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<input type="button" value="Open Panel Using Java Script" onclick="openPanel()"/>
<a href="#myPanel2" >Open Panel Using href Link</a><br/>
<a href="#myPanel3" >Open Panel From Right Side</a><br/>
<a href="#myPanel4" >Open Panel From Left Side</a>
</div>
<div data-role="panel" id="myPanel1">
<h2>This Panel Is Open Using Java Script</h2>
<p>You Can Close The Panel By Clicking Outside The Panel Or Pressing The Esc Key Or By Swiping</p>
</div>
<div data-role="panel" id="myPanel2">
<h2>This Panel Is Open Using href Link</h2>
<p>You Can Close The Panel By Clicking The Button Below</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">Close panel</a>
</div>
<div data-role="panel" id="myPanel3" data-position="right" data-dismissible="false">
<h2>This Panel Is Positioned To Right Side</h2>
<p>You Can't Close The Panel By Clicking Outside The Panel.</p>
<p>You Can Close The Panel By Swiping</p>
</div>
<div data-role="panel" id="myPanel4" data-position="left" data-display="overlay">
<h2>This Panel Is Positioned To Left Side</h2>
<p>Panel Displays Over The Content</p>
</div>
</div>
</body>
</html>
JWT Token Decode Using Jquery
When it come to authentication we use many mechanism. Ones the user authenticated we must keep these details somewhere safe. So we can share...
-
In this blog post Ill explain you the logic behind the Sri Lankan National Identity Card (NIC). Sri Lanka now has Old NIC No Format as well ... -
In This Article I Will Demonstrate You To Create A Simple Chat Program Using Java Remote Method Invocation(RMI). Following Program Supports ...
-
In a windows form application sometimes you may want to import a excel file to a data grid view. In this blog post Ill demonstrate to you gu...
No comments:
Post a Comment