The screen is designed by jquery will
be used in iPad and iPhone applications.
If we use click event in iPad/iPhone,
It will look ugly.It might not give the iPad application feel.
This post will help us to implement
the swipe feature iPad using jquery touch swipe.
<%@ taglib
uri="http://tiles.apache.org/tags-tiles" prefix="tiles"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%
String contextPath =
request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<script type="text/javascript"
src="/13339/patientportal/jquery.touchSwipe.js"></script>
<title><tiles:insertAttribute
name="title" ignore="true" /></title>
</head>
<script>
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) ||
/iPhone OS 3_1_2/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
//if(isiPad){
var swipeOptions=
{
swipe:swipe,
threshold:0
}
$(function()
{
//Enable swiping...
$("#commonprofile").swipe(
swipeOptions );
});
//}
//Swipe handlers.
//The only arg passed is the
original touch event object
function swipe(event, direction)
{
var tc =
document.getElementById("tabs");
var ary = tc ?
tc.getElementsByTagName("a") : [];
var id = $("li.active").attr("id");
if(direction=='left' &&
id < 5){
id++;
var url =
ary[id].href.split("4080");
window.location.href =
url[1];
}else if(direction=='right' &&
id > 0){
id--;
var url =
ary[id].href.split("4080");
window.location.href =
url[1];
}
}
</script>
<body
style="background-color:#323232;margin:0px">
<div id="tabs"
class="tab">
<ul class="tabs">
<li id="0"
class="active"><a
href="/patientportal/profileDetails.action"
style="color:
#0B5D95;">Profile</a></li>
<li id="1" ><a
href="/patientportal/patientClinicalDetails.action">Clinical</a>
</li>
<li id="2"><a
href="/patientportal/patientMedicalDetails.action">Medication</a>
</li>
<li id="3"><a
href="/patientportal/patientInvestigationDetails.action">Lab
Result</a></li>
<li id="4"><a
href="/patientportal/patientAllergyDetails.action">Allergies</a>
</li>
</ul>
<div id="commonprofile">
<div id="profile"
align="left" class="tab_container"><%=
request.getAttribute("treatmentSummaryProfile") %>
</div>
</div>
</div>
</body>
</html>
Download Path:
You can down load the jquery.touchSwipe.js from below given url.
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
If you add, above downloaded file the scrolling and zooming will not work.
you have to modify the below given changes.
1. Open the downloaded js file.
2. Search for the function init(options) and
3. Replace
if (options && (options.allowPageScroll==undefined && (options.swipe!=undefined || options.swipeStatus!=undefined)))
options.allowPageScroll=NONE;
by
if (options)
options.allowPageScroll=AUTO;
No comments:
Post a Comment