The jQueryMobile library enables us to hook up with various types of events. The touch events is one of them. The following code sample shows how to do it in order to handle the taphold event.
<!DOCTYPE html>
<html>
<head>
<title>My Cycling</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">
</script>
</head>
<body>
<div data-role="page" id="home" data-theme="e">
<div data-role="header">
<h1>Sample Demo</h1>
</div>
<div data-role="content" data-theme="e">
<div class="taphold">
<h1>la la la</h1>
</div>
<div class="taphold">
<h1>ga ga ga</h1>
</div>
</div>
<div data-role="footer">
<h4>www.lifemichael.com</h4>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".taphold").bind("taphold", function(event) {
$(this).html("<h1>was tapped</h1>");
});
});
</script>
</body>
</html>
The following video clip overviews the execution of this code sample and explains it.
You can find more free video clips, tutorials, slides and code samples for learning how to use the jQueryMobile library at http://abelski.lifemichael.com.
