Not So Simple euDock 2.0 : Dock « Ajax Layer « JavaScript DHTML

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » Ajax Layer » Dock 
Not So Simple euDock 2.0


<html>
</head>
<title>euDock 2.0 examples</title>
<link type="image/x-icon" href="iconsEuDock/euDock.ico" rel="shortcut icon">

<script language="JavaScript1.3" src="js/euDock.2.0.js"></script>
<script language="JavaScript1.3" src="js/euDock.Image.js"></script>
</head>
<body>
<center>
<table cellpadding=style='border:1px solid #8899bb;'>
<tr><td style="border:1px solid #8899bb;">
<center><b>Not So Simple euDock 2.0</b></center>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center><b>To make this possible you must write inside your page:</b></center>
<br>Place inside your &lt;HEAD&gt;&lt;/HEAD&gt; HTML tag:
<pre>
&lt;HEAD&gt;
   &lt;script language="JavaScript1.3" src="js/euDock.2.0.js"&gt;&lt;/script&gt;
   &lt;script language="JavaScript1.3" src="js/euDock.Image.js"&gt;&lt;/script&gt;
&lt;/HEAD&gt;
<pre>
&lt;script&gt;
   euEnv.imageBasePath="js/";

   var dock = new euDock();
   
      //added from previous (simple fading images) tutorial<b>
   dock.setAnimation(euMOUSE,0.3);</b>
   
      //added from previous (simple) tutorial<b>
   dock.setScreenAlign(euLEFT,0);</b>
   
   dock.setBar({
        top       :{euImage:{image:"barImages/dockBg-u.png"}},
        vertical  :{euImage:{image:"barImages/dockBg-c-v.gif"}},
        bottom    :{euImage:{image:"barImages/dockBg-d.png"}},
        left      :{euImage:{image:"barImages/dockBg-l.png"}},
        horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},
        right     :{euImage:{image:"barImages/dockBg-r.png"}}
     });
   
   dock.setIconsOffset(1);
       
   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"});
   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"});
   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"});
&lt;/script&gt;
</pre>

</td></tr>
<tr><td style="border:1px solid #8899bb;">

<center><b>MMMMM... It's a better idea to explain these functions:</b></center>
<pre>
&lt;script&gt;
      /*
       * This is useful for Internet Explorer PNG compatibility
       * "js/" is the euDock javascript basePath
       */<b>
   euEnv.imageBasePath="js/";</b>
   
      //In variable (dock) now there is an euDock object<b>
   var dock = new euDock();</b>
   
      /*
       * (euDock object).setAnimation(type,venusHillWidth)
       *
       * align euDock to the screen borders
       * type           : (euMOUSE,euICON)
       *                : euMOUSE : the animation is relative to the mouse position
       *                : euICON  : the animation is relative to the mouse Over Icon position
       *
       * venusHillWidth : the distance of icons (animated) from the mouse pointer
       *                : if -type- is:
       *                : euMOUSE : the value must be between (0 and 1) 
       *                          : (1 = all icons are animated)
       *                          : (0.5) (default) the hill is about 50% of the bar
       *                          : (0) only mouse over icon is zoomed
       *                : euICON  : the value must be numeric (0,1,2,3,4,5,...)
       *                          : is the number of icons zoomed near mouseOverIcon
       */<b>
   dock.setAnimation(euMOUSE,0.3);</b>
   
      /*
       * (euDock object).setScreenAlign(align,offset)
       *
       * align euDock to the screen borders
       * align  : (euUP,euDOWN,euLEFT,euRIGHT)
       * offset : the distance between screen border and euDock
       */<b>  
   dock.setScreenAlign(euLEFT,0);</b>
  
      /*
       * To define (unnecessary) the background Dock Bar:
       *
       * (euDock object).setBar({
       *        top       :[-(object definition for top background bar icon)-],
       *        vertical  :[-(object definition for center vertical background bar icon)-],
       *        bottom    :[-(object definition for right bottom bar icon)-],
       *        left      :[-(object definition for left background bar icon)-],
       *        horizontal:[-(object definition for center horizontal background bar icon)-],
       *        right     :[-(object definition for right background bar icon)-]
       *
       * (In this case -left- -horizontal- -right- parameters are not useful 
       *  but you can use them without problems or if you want a mobile bar)
       *
       * euImage is the euImage Object inside the "euDock.Image.js" script
       * the common constructor is:
       *
       *    {euImage:{image:[-(image name)-]}}
       */<b>
   dock.setBar({
        top       :{euImage:{image:"barImages/dockBg-u.png"}},
        vertical  :{euImage:{image:"barImages/dockBg-c-v.gif"}},
        bottom    :{euImage:{image:"barImages/dockBg-d.png"}},
        left      :{euImage:{image:"barImages/dockBg-l.png"}},
        horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},
        right     :{euImage:{image:"barImages/dockBg-r.png"}}
     });</b>

      /*
       * (unnecessary)
       *
       * (euDock object).setIconsOffset(offset);
       *
       * offset:the distance between base align bar and the base align icons
       * default is 0
       */<b>
   dock.setIconsOffset(1);</b>

      /*
       * (unnecessary)(if you want to see nothing of course)
       *
       * (euDock object).addIcon(arrayOfObjects,iconParameters);
       *
       * arrayOfObjects : in this case there is an euImage array of 1 element
       * iconParameters : "link" is the url where you want to go
       */<b>
   dock.addIcon(new Array({euImage:{image:"iconsEuDock/cube.png"}}),
                {link:"http://eudock.jules.it"});</b>
   
      /*
       * Repeat the last command if you want more icons
       */
&lt;/script&gt;
</pre>
</td></tr>
<tr><td style="border:1px solid #8899bb;">
<center><b>REMEMBER</b><br>Don't forget to put in your page:
<table cellpadding=5>
<tr><td style='border:1px solid #8899bb;'>
<pre><b>&lt;a href='http://eudock.jules.it'&gt;
&lt;img src='http://eudock.jules.it/littlEuDock.jpg' border=0&gt;&lt;/a&gt;</b></pre>
</td><td>
<a href='http://eudock.jules.it'><img src='littlEuDock.jpg' border=0>
</td></tr>
</table>
!!!If you don't like (of coursea personal Macumba!!!
</center>
</td></tr>
</table>
<a href='index.html'><b>RETURN TO INDEX</b></a>
</center>
<a href='http://eudock.jules.it'>
<img src='littlEuDock.jpg' border=0></a>
</body>
</html>



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

   var dock = new euDock();
   
   dock.setAnimation(euMOUSE,0.3);
   
   dock.setScreenAlign(euLEFT,0);
   
   dock.setBar({
        top       :{euImage:{image:"barImages/dockBg-u.png"}},
        vertical  :{euImage:{image:"barImages/dockBg-c-v.gif"}},
        bottom    :{euImage:{image:"barImages/dockBg-d.png"}},
        left      :{euImage:{image:"barImages/dockBg-l.png"}},
        horizontal:{euImage:{image:"barImages/dockBg-c-o.gif"}},
        right     :{euImage:{image:"barImages/dockBg-r.png"}}
     });
   
   dock.setIconsOffset(1);
       
   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"});
   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"});
   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>




           
       
eudock2.0.zip( 352 k)
Related examples in the same category
1.Align Tutorial euDock 2.0
2.Not So Simple Fading Images euDock 2.0
3.euDock 2.0 examples
4.euDock 2.0 examples 2
5.Simple Fading Images euDock 2.0
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.