This simple walkthrough will show you how use a Fisheye on a webpage.
First, you must always define the Nitobi XML namespace in the <html> tag.
<html xmlns:ntb>
Inside the <head> tag be sure to include the CSS style sheet. We ship several different styles which you can choose from which are all imported into the CSS file installed in the client/script/ folder. Make sure that you copy the entire style folder to your web directory.
<link type="text/css" rel="stylesheet" href="styles/nitobi.fisheye.css"></link>
The first JavaScript file that you need to include is the Nitobi Ajax Toolkit. The Ajax Toolkit contains all the common JavaScript code that is used by the Nitobi components.
<script type="text/javascript" src="script/nitobi.toolkit.js"></script>
Now, include the JavaScript file for the Fisheye control.
<script type="text/javascript" src="script/nitobi.fisheye.js"></script>
Next, put a Fisheye on the page by writing out the Fisheye tag. The tag is an HTML-like declarative markup that allows you to define all the attributes of the Fisheye all in one concise, easy to use format. Here is a simple Fisheye declaration:
<ntb:fisheye id="SimpleFisheye" growpercent="200" opendirection="up" expanddirection="right" iconwidth="50"> <ntb:menuitem imagesrc="images/file_new.png" label="New File"></ntb:menuitem> <ntb:menuitem imagesrc="images/file_edit.png" label="Edit File" jsaction="alert('test');"></ntb:menuitem> <ntb:menuitem imagesrc="images/file_explore.png" label="Search File"></ntb:menuitem> <ntb:menuitem imagesrc="images/file_export.png" label="Export File"></ntb:menuitem> <ntb:menuitem imagesrc="images/file_del.png" label="Delete File"></ntb:menuitem> <ntb:menuitem imagesrc="images/file_attention.png" label="Flag File"></ntb:menuitem> <ntb:menuitem imagesrc="images/file.png" label="New Sheet"></ntb:menuitem> <ntb:menuitem imagesrc="images/cut.png" label="Cut"></ntb:menuitem> <ntb:menuitem imagesrc="images/info.png" label="Information"></ntb:menuitem> </ntb:fisheye>
This example will generate a Fisheye that expands up and to the right.
If we run the page now, the Fishey will not appear. This is because we still need to initialize it. We do this with a small piece of JavaScript code. You can do this in the BODY onLoad event, or some other time. The following code will initialize the Fisheye named "SimpleFisheye". Note that this code appears in the <BODY> tag of our page so that it runs when the page loads.
<body onLoad="nitobi.loadComponent('SimpleFisheye');">
