Introduction
In the last post we create our first Evently widget which displays a list of PEP documents categories. Our intention here is that clicking/tapping on any of these items would bring us to a new page. The new page would be a list of PEP document status that is available under the chosen category. To implement this we need to make a new page, with a new Evently widget.
The Category Status Page
To create the new page, edit main.html in the _attachments folder.
<!doctype html>
<html>
<head>
<title>PEP Browser</title>
<link rel="stylesheet" href="style/jquery.mobile-1.0a4.1.min.css" type="text/css">
<script src="js/myloader.js"></script>
<script src="js/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" charset="utf-8">
$.couch.app(function(app) {
$("#maincategorylist").evently("peplist", app);
});
</script>x
</head>
<body>
<div data-role="page" id="categorylist">
<div data-role="header" data-theme="b">
<h1>PEP Browser</h1>
</div>
<div data-role="content">
<div id="maincategorylist">
</div>
</div>
</div>
<div data-role="page" id="categorystatuslist">
<div data-role="header" data-theme="b">
<h1>PEP Browser</h1>
</div>
<div data-role="content">
<div id="maincategorystatuslist">
</div>
</div>
</div>
</body>
</html>
Add the highlighted code above. The highlighted code serves as the new page. Notice that instead of creating a new html file to represent the new page, we just added a 'div' tag. Yes we can use a separate html page for this, but this is easier because all the page switching is to handled by Jquerymobile. The attribute 'data-role="page"' indicates to Jquerymobile that the 'div' is a page. Not using a separate html page also has the advantage that it would be faster to load.
After the above changes, running 'couchapp push' and looking at the PEPBrowser application, one would notice that there are no noticeable changes. This because Jquerymobile hides the new page we added. By default, it displays the first div with the attribute 'data-role="page"' and hide the other pages. Tapping on one of the category entries would bring you to the new page we made. Why?
Switching Pages in Jquerymobile
Notice that we are able to switch to the new page we made from the main page of the PEPBrowser application. Why? Let's go back to the mustache template of the our first Evently widget.
<ul id="peplist" data-role="listview" data-theme="c" data-dividertheme="b">
{{#categories}}
<li><a href="#categorystatuslist" title="{{ key }}">{{key}} ({{value}})</a></li>
{{/categories}}
</ul>
Highlighted above is the 'href' attribute of the link. It contains a link to an anchor, 'categorystatuslist'. But we do not have a 'categorystatuslist' anchor. We don't, but we have a div with an id of 'categorystatuslist', the new page we just added. This is how Jquerymobile handles anchor links. Easy page switching right!!!
The Need for another Evently Widget
Now, the problem is that the new page does not display anything. We'll solve this by creating a new Evently widget that we will assign to the div inside our new page. I'll discuss this in my next blog post.
No comments:
Post a Comment