Home Tutorial Jquery jQuery icon Dock plug-in

 
 

Share on Google+Share on Google+
jQuery icon Dock plug-in
Posted on: August 10, 2010 at 12:00 AM
Advertisement
This section is about the icon Dock plug in of jQuery.

jQuery icon Dock plug-in

This section is about the icon Dock plug in of jQuery. The icon Dock is a jQuery JavaScript library plug-in that allows you to create a menu on your web like the Mac OS X operating system dock effect one. The we are using here is "jquery.dock-0.8b.js". For this , you have to save images in two different sizes , one is small & other is large. And also you have to save it in same folder.

icondock.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>iconDock 0.8b Example</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.dock-0.8b.js"></script>
<script type="text/javascript">
<!--
var confDock2 = {
iconMinSide : 20,
iconMaxSide : 100,
distAttDock : 100,
coefAttDock : 3,
veloOutDock : 500,
valign: 'middle'
}
jQuery(function() {
jQuery("#BarraPersonalitzada2").addDockEffect(confDock2);
});
-->
</script>
</head>

<body>
<div id="container" style="margin:0 auto;">

<div id="BarraPersonalitzada2">
<a href="http://www.newstrackindia.com/" name="Alertes_name" title="Google alertes">
<img src="icon/alerts_35.gif" alt="Campana_alt" border="0" />
</a>

<a href="http://www.newstrackindia.com/" name="Escriptori_name" title="Google Escriptori">
<img src="icon/desktop_35.gif" alt="Escriptori_alt" border="0" />
</a>
<a href="http://www.newstrackindia.com/" name="Compres_name" title="Google compres">
<img src="icon/froogle_35.gif" alt="Froogle_alt" border="0" />
</a>
<a href="http://www.newstrackindia.com/" name="GMail_name" title="Google mail">
<img src="icon/gmail_35.gif" alt="Gmail_alt" border="0" />
</a>

<a href="http://www.newstrackindia.com/" name="Grups_name" title="Google grups">
<img src="icon/groups_35.gif" alt="Grups_alt" border="0" />
</a>
<a href="http://www.newstrackindia.com/" name="Linux_name" title="Linux">
<img src="icon/special_35.gif" alt="Especial_alt" border="0" />
</a>
<a href="http://www.newstrackindia.com/" name="Alertes_name" title="Google alertes">
<img src="icon/alerts_35.gif" alt="Campana_alt" border="0" />
</a>

<a href="http://www.newstrackindia.com/" name="Escriptori_name" title="Google Escriptori">
<img src="icon/desktop_35.gif" alt="Escriptori_alt" border="0" />
</a>
<a href="http://www.newstrackindia.com/" name="Escriptori_name" title="Google Escriptori">
<img src="icon/desktop_35.gif" alt="Escriptori_alt" border="0" />
</a>
<a href="http://www.newstrackindia.com/" name="Alertes_name" title="Google alertes">
<img src="icon/alerts_35.gif" alt="Campana_alt" border="0" />
</a>

</div>
</div>

</body>
</html>

OUTPUT

When you hover on any icon :

Download Source Code

Click here to see demo

Advertisement

Related Tags for jQuery icon Dock plug-in:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: August 10, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com