JavaScript Tutorial/Dojo toolkit/Fisheye

Материал из Web эксперт
Перейти к: навигация, поиск

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>


Fish eye on text

<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojox.widget.FisheyeLite");
      
      dojo.addOnLoad(function(){
        dojo.query("b", dojo.byId("my")).forEach(function(n){
          new dojox.widget.FisheyeLite({
            properties:{
              fontSize:1.50,
              letterSpacing:2.00
            }
        },n);
        }).connect("onclick",dojo,"stopEvent");
      });
    </script>
  </head>
  <body class="tundra">
      <p id="my">
      text <b>text</b>another text<b>text</b>
      </p>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/Fisheye&oldid=8509»