dojo实现一个菜单

前端之家收集整理的这篇文章主要介绍了dojo实现一个菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天做了一个下午网页,中午觉都没有睡.发现菜单做得挺难看的,很是郁闷....

索性不做了,打开dojo的demo一看发现里面的有点炫的菜单.于是引用了下

引入dojo包为dojojs包(跟以前的文章一样引入,如不清楚就看前篇) ......

<! DOCTYPEHTMLPUBLIC " -//W3C//DTDHTML4.01//EN " " http://www.w3.org/TR/html4/strict.dtd " >
< html >
< head >

< title > FisheyeListWidgetDemo </ title >

< scripttype = " text/javascript " >
var djConfig = {isDebug:true,debugAtAllCosts:false} ;
</ script >
< scripttype = " text/javascript " src = " dojojs/dojo.js " ></ script >
< scripttype = " text/javascript " >
dojo.require(
" dojo.widget.* " );
</ script >

< script >
function load_app(url) {
location.href
=url;
}

</ script >

< style >

.dojoHtmlFisheyeListBar
{
margin:
0auto;
text
-align:center;
}


.outerbar
{

text
-align:center;
position:absolute;
left:0px;
top:0px;
width:
100%;
}


body
{
font
-family:Arial,Helvetica,sans-serif;
padding:
0;
margin:
0;
}


.page
{
padding:60px20px20px20px;
}


</ style >
</ head >
< body >

< divclass = " outerbar " >

< divdojoType = " FisheyeList "
itemWidth
= " 50 " itemHeight = " 50 "
itemMaxWidth
= " 200 " itemMaxHeight = " 200 "
orientation
= " horizontal "
effectUnits
= " 2 "
itemPadding
= " 10 "
attachEdge
= " top "
labelEdge
= " bottom "
enableCrappySvgSupport
= " false "
>

< divdojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc
= " images/icon_browser.png " caption = " WebBrowser " >
</ div >

< divdojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc
= " images/icon_calendar.png " caption = " 留言板 " >
</ div >

< divdojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc
= " images/icon_email.png " caption = " Email " >
</ div >

< divdojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc
= " images/icon_texteditor.png " caption = " TextEditor " >
</ div >

< divdojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc
= " images/icon_update.png " caption = " SoftwareUpdate " >
</ div >

< divdojoType = " FisheyeListItem " onClick = " load_app('http://blod.csdn.net/gxzheng1985'); "
iconsrc
= " images/icon_users.png " caption = " Users " >
</ div >
</ div >
</ BODY >
</ HTML >

引入图片 可以看到效果...

鼠标经过之后可以看到

猜你在找的Dojo相关文章