Aug
29
2007

Learning Dojo 0.9 : Advanced Dijit

The goal of this exercise is to add a rollover tooltip and add an event to the button created in last exercise.

Add tooltip

Load Tooltip dijit

Add another dojo.require after loading Button dijit.


dojo.require("dijit.form.Button");
dojo.require("dijit.Tooltip");

Add tooltip and attach to the button

Add actual dijit to the body of the web page.
Notice the value of connectId attribute has to be the same with the id of the button dijit. Dojo will know that this tooltip is for the button having the same id.


<button id="hello">Hello Dijit</button>

Press to output in console.

Add an action

Define a function

<script type="text/javascript"><!--
var log = console.debug;
// --></script>

What this code does is to let log point to console.debug function. Therefore when log is called, it will behave like console.debug, which is output a message in the Firefox console.

Add action to the button

Set onClick attribute of the button markup to log().

<button id="hello" onclick="log("I was pressed to say hello.")">Hello Dijit</button>

Screenshot

Example

Example: lab003.html
Source Code: lab003.txt

Tags: , , , , , ,
» Posted in category: ajax, dojo, lab, web development //
Entry Top //
This is the bottom of post Learning Dojo 0.9 : Advanced Dijit

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>