Dojo Fisheye Example

Written by on December 4th, 2006 in Ajax News.

Richard Sharples has written up his experience mixing Dojo with Roller.

It consists of setting up the Dojo library and then:

Category Changing JS

function selectCategory(catname){
  var url;

  if (catname == ‘All’ ) {
    url=”$url.home”
  } else {
    url=”${url.home}category/”+catname
  }
  window.location.replace ( url );
}
 

HTML Dojo Component

<div class=”chooser”>
    <div class=”dojo-FisheyeList”
        dojo:itemWidth=”110″ dojo:itemHeight=”40″
        dojo:itemMaxWidth=”250″ dojo:itemMaxHeight=”90″
        dojo:orientation=”horizontal”
        dojo:effectUnits=”1″
        dojo:itemPadding=”0″
        dojo:attachEdge=”top”
        dojo:labelEdge=”bottom”
        dojo:enableCrappySvgSupport=”false”>

        <div class=”dojo-FisheyeListItem” onClick=”selectCategory(’All’);”
            dojo:iconsrc=”$IMAGES/cat-All.png”
        </div>

        <div class=”dojo-FisheyeListItem” onClick=”selectCategory(’About Me’);”
            dojo:iconsrc=”$IMAGES/cat-AboutMe.png”>
        </div>

        <div class=”dojo-FisheyeListItem” onClick=”selectCategory(’Books’);”
            dojo:iconsrc=”$IMAGES/cat-Books.png”>
        </div>

        <div class=”dojo-FisheyeListItem” onClick=”selectCategory(’Roller’);”
            dojo:iconsrc=”$IMAGES/cat-Hacking.png”>
        </div>

        <div class=”dojo-FisheyeListItem” onClick=”selectCategory(’General’);”
            dojo:iconsrc=”$IMAGES/cat-General.png”>
        </div>

        <div class=”dojo-FisheyeListItem” onClick=”selectCategory(’Java’);”
            dojo:iconsrc=”$IMAGES/cat-Java.png”>
        </div>

        <div class=”dojo-FisheyeListItem” onClick=”selectCategory(’Home Life’);”
            dojo:iconsrc=”$IMAGES/cat-HomeLife.png”>
        </div>

        <div class=”dojo-FisheyeListItem” onClick=”selectCategory(’Gadgets’);”
            dojo:iconsrc=”$IMAGES/cat-Gadgets.png”>
        </div>

        <div class=”dojo-FisheyeListItem” onClick=”selectCategory(’W3′);”
            dojo:iconsrc=”$IMAGES/cat-W3.png”>
        </div>
    </div>
</div></div>
 

Richard Sharples Dojo Fisheye

Source: Ajaxian
Original Article: http://ajaxian.com/archives/dojo-fisheye-example

Leave a Reply

You must be logged in to post a comment.



Site Navigation