Another important navigation widget for the graphical user interface of our iPhone applications is the duo buttons. These buttons allow us to go to different pages. It’s also is possible to use these buttons as triggers for actions. For instance, one of these buttons can be used for cancelling an action. Let’s show how to build this navigation widget.
Getting ready
The iWebKit framework provides a good set of navigation widgets, so we’ll use this one again.
How to do it
The process for building this navigation widget is very simple; you only need to create a div element with a specific CSS class and add two links inside it. Take your work file for the iWebKit and replace its content with the following lines inside the topbardiv, which indentifies the main toolbar of our application:
The new widget is as shown in the following screenshot:
How it works
Using the duoselectionbuttons value for the id attribute of the div element, the iWebKit will be able to create one widget with two different buttons. The style for this widget is defined in the main CSS included in this framework.
As you can check it, the new widget is created inside the toolbar. The iWebKit also includes other CSS styles for building a duo button outside the main toolbar. We’ll need to use a new style and a new div element to indicate that the widget is different. The required code to do that is as follows:
The preceding code snippet must appear after the topbardiv element. This is an important difference to distinguish between these different kinds of duo buttons.
There’s more..
In addition to the duo navigation buttons, iWebKit offers to let us to build trio navigation buttons. We can build this widget using the following lines of code:
See also
► Installing the iWebKit framework recipe in topic 1, Frameworks Make Life Easier
