Nokia WRT – Simple Tabs with jQuery UI
Many times we see fancy tab being used to display different content in mobile apps. Since WRT 1.1 supports jQuery, we can use the jQuery UI extension to add nice UI components to our Nokia Runtime widget. Adding tabs is a really (really – trust me) simple task.
Downloading the jQuery UI extension
- Go to http://jqueryui.com/download to download the jquery-ui extension
- Highly Recommended: unselect all the components that you do not need for your project. Since jQuery and jQuery UI are fairly large select only the components that you need. For this example, we only need the core components and the Tabs widget, so un-check all the rest and click on download. This will download a package called jquery-ui-x.x.x.custom.zip.
- Unzip the package into your project directory. Please note that the package includes also the jQuery distribution also so make sure that you don’t have it twice if you downloaded jQuery earlier.
Next, we need to reference jQuery and jQuery UI in our project by adding references to jquery-ui javascript and css in the html header:
<head> ... <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> ... </head>
Creating the Tabs
Next, we need to create a container for our tabs and tabs content:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Text</a></li>
<li><a href="#tabs-2">Pics</a></li>
<li><a href="#tabs-3">Vids</a></li>
</ul>
<div id="tabs-1">Lorem ipsum viris commune suavitate ne eum, harum nominati ut pri. Congue altera sensibus quo ei, et qui aliquyam democritum eloquentiam, tale quodsi rationibus duo te. Eam munere regione prompta et, eos partem quidam vulputate ea</div>
<div id="tabs-2">
<img src="images/jaguar-xfr.jpg" />
</div>
<div id="tabs-3">
<h3>Top Box Office Trailers</h3>
<ol>
<li>Harry Potter and the Half-Blood Prince</li>
<li>Ice Age: Dawn of the Dinosaurs</li>
<li>Transformers: Revenge of the Fallen</li>
<li>Bruno</li>
<li>The Proposal</li>
</ol>
</div>
</div>
There are two main parts to this div:
- An unordered list with the tab names
- corresponding divs which hold the content which will be displayed when you press the tabs
Converting into Tabs
As final step we need to convert the container div into tabs by referencing it to the jQuery tabs widget. Since I want to create the tabs immediately when I launch the widget I will add the reference in the init() function which is executed when the body element is loaded:
function init() {
$(function() {
$("#tabs").tabs();
});
}
jquery ui tabs in Nokia WRT
That’s basically it – it doesn’t get any simpler. The result is great looking tabs as in the simplest way possible.
You can download a fully working widget with the example above: tabNavidation.wgz.
