Dojo的两个小实例
Dojo是越来越火的Javascript. framework, 忍不住也去偷窥了两把^_^
实例一: Tab 网页标签
<html>
<head>
<script. type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"> </script>
<title>Tab</title>
<style. type="text/css">
@import "dojo/resources/dojo.css";
@import "dijit/themes/tundra/tundra.css";
</style>
<script. type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
</script>
</head>
<body class="tundra">
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;" selectedChild="tab1">
<div id="tab1" dojoType="dijit.layout.ContentPane" title="Tab 1" closable="true">hi</div>
<div id="tab2" dojoType="dijit.layout.ContentPane" title="Tab 2">hi2</div>
<div id="tab3" dojoType="dijit.layout.ContentPane" title="Tab 3">hi3</div>
</div>
</body>
</html>
这样就可以清晰地把网页用 tab标签来分类. dijit主要是外观架子.
实例二: fisheye鱼眼效果
<!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=utf-8" />
<script. type="text/javascript" src="dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"> </script>
<script. type="text/javascript" src="dojox/widget/FisheyeList.js"> </script>
<script. type="text/javascript">dojo.require("dojo.parser");</script>
<style. type="text/css">
@import "dojo/dojo/resources/dojo.css";
@import "dojox/widget/FisheyeList/FisheyeList.css";
</style>
<script. type="text/javascript">
dojo.require("dojox.widget.FisheyeList");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
function load_app(id){
alert('icon '+id+' was clicked');
}
</script>
<title>fisheye</title>
</head>
<body>
A demo of the DojoX FisheyeList widget done with Dojo 1.0.
<div class="outerbar">
<div dojoType="dojox.widget.FisheyeList"
itemWidth="50"
itemHeight="50"
itemMaxWidth="200"
itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="top"
labelEdge="bottom"
conservativeTrigger="false"
id="fisheye1"
>
<div dojoType="dojox.widget.FisheyeListItem"
id="item1"
onclick="alert('click on ' + this.label + '(from widget id ' + this.widgetid + ')!');"
label="Item 1"
iconSrc="images/icon_browser.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
label="Item 2"
iconSrc="images/icon_calendar.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
label="Item 3"
onclick="alert('click on ' + this.label + '(from widget id ' + this.widgetId + ')!');"
iconSrc="images/icon_email.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
iconSrc="images/icon_texteditor.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
label="Really Long Item Label"
iconSrc="images/icon_update.png">
</div>
<div dojoType="dojox.widget.FisheyeListItem"
iconSrc="images/icon_users.png">
</div>
</div>
</div>
</body>
</html>
当然几个图片是已经放好的. 发现是JS代码是它在鼠标移近的时候变化.<div dojoType 那里设置鱼眼的属性, 当然也可以处理事件响应. Dojox里面的东西是一些标准边缘的东西.
TAG: