euDock 2.0.06 JScript Emulation of Dock style MAC OS X bar

Pier...

Rate me:

4.89/5 (38 votes)

19 Jun 2007LGPL31 min read

151K

1.1K

An Open Source (customizable) JavaScript Emulation of Dock style MAC OS X bar

Download euDock 2.0.06 (tutorial-demos) project - 450.68 KB

Live Demo

[on-Line Examples]

Introduction

euDock is a JavaScript emulation of the Dock style MAC OS X bar.
It uses PNG, GIF, JPG (or other Web type) images, objects and transformation functions. PNG images in Internet Explorer are supported.

Using the Code

euDock has a lot of features described in the tutorial.

In the following code, I show the basic configuration of euDock bar.

Place the following inside your <HEAD></HEAD> HTML tag:

HTML

<HEAD>
   <script language="JavaScript1.3" src="js/euDock.2.0.js"></script>
   <script language="JavaScript1.3" src="js/euDock.Image.js"></script>
</HEAD>

Later, place everywhere:

JavaScript

<script>
   euEnv.imageBasePath="js/";

   var dock = new euDock();
   
   dock.setBar({
        left      :{euImage:{image:"barImages/dockBg-l.png"}},
        horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},
        right     :{euImage:{image:"barImages/dockBg-r.png"}}
       });
   
   dock.setIconsOffset(2);
           
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://www.codeproject.com"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://www.codeproject.com"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://www.codeproject.com"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://www.codeproject.com"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://eudock.jules.it"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://eudock.jules.it"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://eudock.jules.it"});
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://eudock.jules.it"});
</script>

I suggest you download the tutorial/demos and take a look at the features. I can't explain everything here.

History

Ver 2.0.06 (17 June 2007) features

BUG FIX: euDock will SURVIVE on Safari... (I don't have enough money for a Mac)
Added delete Icon feature
Added (optional) Target Link Location
Now Cursor Pointer will change
[Examples]

Ver 2.0.04 (9 November 2006) features