Create fish eye list : Fisheye « Dojo toolkit « JavaScript DHTML

Create fish eye list
 

<html>
  <head>
    <link rel="StyleSheet" href="js/dojo/dojox/widget/FisheyeList/FisheyeList.css" type="text/css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script language="JavaScript" type="text/javascript">
      dojo.require("dojo.parser");
      dojo.require("dojox.widget.FisheyeList");
      dojo.require("dojox.storage");
      dojo.addOnLoad(function(){
        dojo.parser.parse(dojo.byId("divMain"));
      });
    </script>
  </head>
  <body >
    <center>
      <div id="divMain" class="cssMain" style="width:100%;">
        <div class="outerbar">
          <div dojoType="dojox.widget.FisheyeList"
            itemWidth="64" 
            itemHeight="64"
            itemMaxWidth="128" 
            itemMaxHeight="128"
            orientation="horizontal"
            effectUnits="1"
            itemPadding="10"
            attachEdge="top"
            labelEdge="bottom">
            <div dojoType="dojox.widget.FisheyeListItem"
              onclick="alert("1")"
              label="New Contact"
              iconSrc="img/icon_new.gif">
            </div>
            <div dojoType="dojox.widget.FisheyeListItem"
              label="Label"
              iconSrc="img/transPix.gif">
            </div>
            <div dojoType="dojox.widget.FisheyeListItem"
              onclick="alert("2")"
              label="Save"
              iconSrc="img/icon_save.gif">
            </div>
          </div>
        </div>

  </body>

</html>
Dojo-toolkit.zip( 3,849 k)
Related examples in the same category

Fish eye on text