Dojo JavaScript Toolkit with ASP.NET
Dojo JavaScript Toolkit with ASP.NET
Submitted by Corey Goldberg on Thu, 04/01/2007 - 00:38.Dojo is a free/open source JavaScript toolkit.
I wanted to add some its eye candy to one of my ASP.NET 2.0 applications, so I integrated
the Fisheye menu (a menu that balloons out, similar to the launcher on OS X).
Here is how I did it:
First I downloaded Dojo and created a 'dojo' directory under my main project directory. I dropped dojo.js and the entire Dojo 'src' directory here.
Then in my C# codebehind (.aspsx.cs), I add this to the Page_Load event:
Then inside my ASP.NET page (.aspx), I added this div:
.. and it works.
Here is how I did it:
First I downloaded Dojo and created a 'dojo' directory under my main project directory. I dropped dojo.js and the entire Dojo 'src' directory here.
Then in my C# codebehind (.aspsx.cs), I add this to the Page_Load event:
protected void Page_Load(object sender,
EventArgs e)
{
HtmlGenericControl Include = new HtmlGenericControl("script");
Include.Attributes.Add("type", "text/javascript");
Include.Attributes.Add("src", "dojo/dojo.js");
Page.Header.Controls.Add(Include);
HtmlGenericControl Include2 = new HtmlGenericControl("script");
Include2.Attributes.Add("type", "text/javascript");
Include2.InnerHtml = "dojo.require('dojo.widget.FisheyeList');";
Page.Header.Controls.Add(Include2);
}
Then inside my ASP.NET page (.aspx), I added this div:
<div class="fisheyelist">
<div dojoType="FisheyeList"
itemWidth="80" itemHeight="80"
itemMaxWidth="200" itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="center"
labelEdge="bottom"
conservativeTrigger="false"
>
<div dojoType="FisheyeListItem"
onclick="window.location = 'item1.aspx';"
caption="Item 1"
iconsrc="img/item1.png">
</div>
<div dojoType="FisheyeListItem"
onclick="window.location = 'item2.aspx';"
caption="Item 2"
iconsrc="img/item2.png">
</div>
<div dojoType="FisheyeListItem"
onclick="window.location = 'item3.aspx';"
caption="Item 3"
iconsrc="img/item3.png">
</div>
</div>
</div>
<div dojoType="FisheyeList"
itemWidth="80" itemHeight="80"
itemMaxWidth="200" itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="center"
labelEdge="bottom"
conservativeTrigger="false"
>
<div dojoType="FisheyeListItem"
onclick="window.location = 'item1.aspx';"
caption="Item 1"
iconsrc="img/item1.png">
</div>
<div dojoType="FisheyeListItem"
onclick="window.location = 'item2.aspx';"
caption="Item 2"
iconsrc="img/item2.png">
</div>
<div dojoType="FisheyeListItem"
onclick="window.location = 'item3.aspx';"
caption="Item 3"
iconsrc="img/item3.png">
</div>
</div>
</div>
.. and it works.