This simple walkthrough will show you how use a Callout on a webpage to display a simple message.
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. You merely need to specify which theme you would like on a callout. Make sure that you copy the entire style folder to your web directory.
<link type="text/css" rel="stylesheet" href="styles/nitobi.callout.css">
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 Callout component.
<script type="text/javascript" src="script/nitobi.callout.js"></script>
Now there are several ways to put a Callout on a page. A common way is to attach it to something on the page already, like an image or form field. Let's use an image.
<img src="http://www.nitobi.com/images/millingmachine.jpg" id="machine">
Note that we have given this image an ID of 'machine' which we'll use to attach a callout to it.
Then in out onLoad event of the body element we create a callout. This way the callout will appear right when we load the page.
<body onload="runCallout()">
And we create a JavaScript function called runCallout() that does the work:
<script> function runCallout() { var myCallout; // now we create a new one myCallout = new nitobi.callout.Callout("impact"); // we attach it to the element with ID 'machine' myCallout.attachToElement('machine'); myCallout.setTitle('Milling Machine'); myCallout.setBody('This is the M1000 Milling Machine - the very latest in machining and milling technology.'); // now we show it. myCallout.show(); } </script>
This example will generate a callout with the 'impact' style and attach it to the element on the page with the id 'machine'.
