When I worked on some projects, there are times when I have to create quick interactive web prototypes for demonstration purpose. Those prototypes usually have a lot of buttons and menu items for users to click on. Adding and managing interactive functionalities and effects to them can be a big pain especially when facing with time pressure.
With the following goals in mind, so I created this widget to make my life easier and help the process of creating these prototypes less time-consuming.
iButton is a dojo widget for creating dojo-based html buttons or menu items in a webpage. What make iButton special is that it stores states like mouse-click, mouse-over, or disabled in itself and can be access later using javascript command.
The syntax is easy using the div tag and specify the dojoType attribute for the tag to ‘dj.form.iButton’ and specify width and height of the button. After that specify the path to the image for each state to the iButton widget. There are 6 types of paths attributes including
* the activate state just means that the iButton is being selected. The iButton will be on this state when the activate() command is called over the iButton. (see API).
* * only 3 states, url, hoverUrl, and disabledUrl, are required for a normal button without activate state.
Each instance of iButton should have syntax like the following code example.
<div dojoType="dj.form.iButton" id="Page_1" width="116" height="48" title="Resource" url="Images/menu/menu_1.gif" hoverUrl="Images/menu/menu_1_ov.gif" disabledUrl="Images/menu/menu_1_ov.gif" activeUrl="Images/menu/menu_1_ov.gif" activeHoverUrl="Images/menu/menu_1_ov.gif" activeDisabledUrl="Images/menu/menu_1_ov.gif"> </div>
Before using iButton, you must specify the module path in the djConfig variable.
djConfig = { parseOnLoad: true, baseUrl: './', modulePaths: { 'com.esrith.core': 'js/com/esrith/core', 'com.esrith.widgets': 'js/com/esrith/widgets', 'dj.form': 'dj/form' }
Then use dojo.require tag to load the iButton module.
dojo.require("dj.form.iButton");
And make sure that you already have imported a dojotoolkit framework resource into the page.
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"></script>
If the syntax and path to images are correct the iButton is ready for use with hover and disabled effect. You can call activate() when users click the button by binding onClick event to the iButton.
dojo.connect(dijit.byId("Menu_0").domNode, "onclick", function(){dijit.byId("Menu_0").activate();});