Hello everybody, This is my code: actually it 's a listview and I want to get to a matched page whenever any item in the list got swiped.
can somebody help me to see it doesn't work?
Thanks!!!
<!DOCTYPE html>
<html>
<head>
<title>My portfolio</title>
<meta name="viewport" content="width = deivice-width, initial-scale =1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="themes/myThemes.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">
//use instead of $(document).ready();
$("#homepage").live('pageinit', function(event) {
$('li').each(function(index) {
var elementId = $(this).attr("id");
elementId = '#'+elementId;
//#page1 #page2 #page3
$(function() {
$(elementId).live('swipe', function(event) {
$.mobile.changePage(elementId, {transition: "slideup"});
});
});
});
});
</script>
</head>
<body>
<div data-role="page" id = "homepage">
<div data-role = "header">
<h3>Home Page Header</h3>
</div>
<div data-role = "content">
<h1>Home Page Content</h1>
<p> Swipe on list element</p>
<ul data-role="listview" data-theme="d" id="swipelist">
<li id="page1"><a href="">$.mobile.changePage Event</a></li>
<li id="page2"><a href=""> pageInit Event</a></li>
<li id="page3"><a href="">Swipe Event</a></li>
</ul>
</div>
<div data-role = "footer">
<h3>Home Page Footer</h3>
</div>
</div>
<div data-role="page" id = "page1">
<div data-role = "header">
<h3> Page1 Header</h3>
</div>
<div data-role = "content">
<h3>$.mobile.changePage Event</h3>
<p>$.mobile.changePage Event</p>
</div>
<div data-role = "footer">
<h3> Page1 Footer</h3>
</div>
</div>
<div data-role="page" id = "page2">
<div data-role = "header">
<h3> Page2 Header</h3>
</div>
<div data-role = "content">
<h3>PageInit Event</h3>
</div>
<div data-role = "footer">
<h3> Page2 Footer</h3>
</div>
</div>
<div data-role="page" id = "page3">
<div data-role = "header">
<h3> Page3 Header</h3>
</div>
<div data-role = "content">
<h3>Swipe Event</h3>
</div>
<div data-role = "footer">
<h3> Page3 Footer</h3>
</div>
</div>
</body>