东西较旧,基础知识。
较流行比如 www.iEasyUI.com
**********************************************************************************************************
1.Dojo中包含了很多Javascript编写的子Package。它封装了跨浏览器的代码。引入了Widget概念,方便了Javascript面向对象编程(OOP)。
2.Dojo提供一组函数支持各种HTTP请求,包括 xhrGet, rawXhrPost, xhrPut, rawXhrPut, xhrPut, xhrDelete。
·对应HTTP四种请求: Get读取, Post更新, Put创建, Delete删除。
3.xhrGet是XHR框架中最重要函数,使用频率最高。它可以请求服务器上的静态文本资源如txt,xml等,也可以获取动态页面php,jsp,asp等。
function getTextByGet(){
dojo.xhrGet({
url: "get.txt",
handleAs: "text", //返回的数据类型
load: function(response, ioArgs){alert(response);}, //请求的资源成功返回之后被调用
error: function(error, ioArgs){alert(error.message)} //失败之后被调用
});
}
4.xhrGet提交表单:
虽然表单提交的默认方法是Post,但当使用xhrGet提交时,表单提交方式就自动改为Get,
所有表单的数据都会变成查询字符串出现在url中,所以服务器只能从查询字符串中取得这些提交的信息。
dojo.xhrGet({
form: "login",
handleAs: "text",
handle: handler, //回调函数,可以堪称是load和error的混合体,优先级比load低,只有在没有设置load时才起作用。
content: {pwd:"12345"}, //可以修改来自表单的信息
sync: false //这是同步还是异步提交,默认是异步提交
});
5.xhrPost一般用来发送表单的数据,当然xhrGet也能做到。
区别是xhrPost把表单数据封装在http请求的body部分,xhrGet把所有表单的数据都会变成查询字符串出现在url中。
6.DOM Level2 的事件模型:(此列子IE不适用,IE采用介于DOM Level0和DOM Level2之间的事件模型)
<html>
<body>
<input id="btn" type="button" value="hello" /><p />
<input id="rme" type="button" value="remove" />
<script>
function sayHello(event) { alert("hello"); };
function sayWorld(event) { alert("world"); };
function remove() {
btn.removeEventListener("click", sayHello, false);
btn.removeEventListener("click", sayWorld, false);
}
var btn = document.getElementById('btn');
btn.addEventListener("click", sayHello, false);
btn.addEventListener("click", sayWorld, false);
document.getElementById('rme').addEventListener("click", remove, false);
</script>
</body>
</html>
7.使用Dojo处理用户自定义事件:
调用 userFunction 时,handler1 和 handler2 也被触发了。这些事件将按连接的先后顺序来执行。
userFunction 就像是一个事件源,它的调用像一个事件,而 handler1 和 hander2 就是事件处理函数。
<script type="text/javascript">
function print(fName, args) {
var message = "In " + fName + "; the arguments are: "
dojo.forEach(args, function(args) {
message += args.toString() + " ";
}) ;
alert(message);
}
function handler1() { print("handler1", arguments); }
function handler2(a1, a2) { print("handler2", [a1, a2]); }
function userFunction() { print("userFunction", arguments);}
dojo.connect("userFunction", null, "handler1"); //handler1事件处理函数没有显示参数,但实际上它有两个参数,值为1和2
dojo.connect("userFunction", null, "handler2"); //handler2有两个显示参数,值也为1和2
userFunction(1, 2);
</script>
8.Dojo拖拽:
<script type="text/javascript">
dojo.require("dojo.dnd.move"); //引入Dojo的拖动功能模块
dojo.require("dojo.parser"); //引入解析Dojo标记的功能模块
</script>
<table dojoType="dojo.dnd.Moveable">
<tbody><tr><td>Haha, I am a good guy.</td></tr></tbody>
</table>
9.Dijit: Dojo的UI组件库
从功能的角度把Widget分为三类:表单 Widget,布局 Widget,高级 Widget 。
1)表单Widget:
所有的这些表单widgets都可以放置在HTML的[form]标签内,也可以放在dijit.form.Form widget内,甚至可以放在[form]标签外。
Form, Button, CheckBox, RadioButton, ToggleButton, ComboBox, FilteringSelect,
Textbox, Validation, Currency, Date, Time, Integer, Textarea, Silder, NumberSpinner(数字转轴)
2)布局Widget:
布局Widgets分成三类:
2.1)对其容器:BorderContainer(不推荐使用:LayoutContainer,SplitContainer)
2.2)堆叠容器:此类的 widgets 可以把前两种 widgets 层叠在一起,而一次只显示一个屏面。(AccordionContainer,TabContainer,StackContainer)等。
2.3)屏幕容器:盛放和显示大块的内容,包括文本、图片、图表,甚至是其它widgets。(ContentPane)
3)高级Widget:
高级widgets分为两类:
3.1)用户辅助Widget:
Dialog, TooltipDialog(须关联一个DropDownButton), ProgressBar(进度条), Tooltip
3.2)高级编辑和显示Widget:
ColorPalette, Editor, InlineEditBox, Tree
10.创建Dijit两种方式:
1)静态创建Dijit:
1.1)确定使用Dijit的对象全称。例如dijit.form.Button
1.2)在head部分引入:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
</script>
1.3)在页面需要使用Dijit的位置,写入Dijit标签属性。
<div dojotype="dijit.form.Button">OK</div>
2)对哦功能太创建Dijit:
2.1)确定使用Dijit的对象全称。
2.2)在head部分引入:
<script type="text/javascript">
dojo.require("dijit.form.Button");
</script>
2.3)通过Javascript调用对应Dijit的动态构造语句,动态创建Dijit。
funciton init(){
var mydiv = document.createElement("div");
dojo.body().appendChild(mydiv);
var mybutton = new dijit.form.Button({label:"OK"}, mydiv);
}
11.Dijit的操控:
1)例如:var mybutton = new dijit.form.Button({label:“OK”,id:”testid”}, dojo.byId(“mydivid”));
因此可以通过mybutton来操控新创建的这个Dijit按钮实体。
2)在知道某个Dijit实体id的情况下,则可以通过dijit.byId()获得这个Dijit实体。
通过var yourbutton = dijit.byId("testid");就可以获得这个Dijit按钮的实体。
【注意】: 作用与document.getElementById()相同的dojo.byId(),无法获得任何Dijit实体。
12.Dijit的样式:
要让页面中的所有 Dijit 使用同一种样式主题来展现,需要通过两步来完成。
1)在页面的 head 部分引入期望使用的样式主题的 CSS 文件。例如,如果使用 Soria 样式主题。
<style type="text/css">
@import "dojo_path/dijit/themes/soria/soria.css";
@import "dojo_path/dojo/resources/dojo.css";
</style>
2)在页面 body 标签中定义属性 class 为所期望使用的样式主题名。如果使用 Soria 样式主题。
<body class="soria">
13.JavaScript基于原型(Prototype based)的继承:
在JavaScript中,每个函数对象(即function定义代码)都有一个属性prototype,这个属性指向的是对象-就是这个函数对象的原型对象。
这个原型对象也有prototype属性,默认指向一个根原型对象。
如果以某个特定的对象为原型对象,而这个对象的原型对象又是另一个对象,如此反复将形成一条原型链,原型链的末端是根原型对象。
JavaScript 访问一个对象的属性时,首先检查这个对象是否有同名的属性,如果没有则顺着这条继承链往上找,直到在某一个原型对象中找到,
而如果到达根原型对象都没有找到则表示对象不具备此属性。
这样低层对象仿佛继承了高层对象的某些属性。
【例子】:
在这个例子中声明了两个函数对象 Plane 和 JetPlane
function Plane(w, s) {
this.weight = w;
this.speed = s;
}
Plane.prototype.name = ""; //Plane对象的属性有在构造函数中定义的weight,speed,也有在Plane的prototype对象中定义的name。
function JetPlane() {
this.seats = 0;
this.construct = function(name, weight, speed, seats) { //JetPlane中定义了两个属性seats 和construct,construct的值是一个函数。
this.name = name;
this.seats = seats;
this.weight = weight;
this.speed = speed;
}
}
JetPlane.prototype.erased = true; //JetPlane的prototype对象增加了一个属性 erased
JetPlane.prototype = new Plane(); //然后把JetPlane的prototype设为一个Plane对象,这样JetPlane就拥有了Plane的prototype对象(注意不是Plane对象)中所有的属性。
var p1 = new Plane(2000, 100);
p1.name = "Boeing";
var j1 = new JetPlane(500, 300);
j1.construct("F-22", 500, 500, 2);
console.log("p1.weight:" + p1.weight + ", p1.speed:" + p1.speed + ", p1.name:" + p1.name);
console.log("j1.name:"+ j1.name + ", j1.weight:"+ j1.weight + ", j1.speed:"+ j1.speed + ",j1.seats:"+ j1.seats);
15.Dojo.declare声明为类的函数:
dojo.declare("Jetocopter", [JetPlane, Helicopter], { //Jetocopter继承自JetPlane和Helicopter
constructor : function(name, weight, speed, seats, propellers) { //constructor,它是类的构造函数,每次创建一个新的对象时,它都会被调用。
this.lifelong = 10;
}
});
var jh1 = new Jetocopter("X2", 200, 400, 3, 4);
16.拓展Dojo模块:
假设我们要创建的新模块是 util.math.Calculator
1)先在Dojo安装目录下创建目录util/math
2)在目录util/math下,创建一个叫Calculator.js的文件
3)在Calculator.js中写以下代码:
//注册模块名
dojo.provide("util.match.Calculator");
//声明Dojo类
dojo.declare("util.match.Calculator",null,{
add:function(a,b){
return a+b;
},
multiply:function(a,b){
return a*b;
}
});
4)然后就可以开始使用这个新模块了:
dojo.require("util.match.Calculator");
var c = new util.math.Calculator();
alert(c.add(1,2));
alert(c.multiply(3,2));
17.DojoX DataGrid:
Grid可能是DojoX中最受欢迎的部件,比起普通的Web表格部件,Grid更像一个基于Web的Excel组件。这使得Grid足可以应付较为复杂的数据展示及数据操作。
在dojox1.2中,dojox.grid包中新增了DataGrid类,该类是对原Grid类的强化和替代,之所以叫做DataGrid,是由于该类与dojo的数据操作类store无缝整合在一起。
1)初始化方式如下:
<div id="grid" dojoType="dojox.grid.DataGrid" store="jsonStore" structure="layout" autoWidth="true" ></div>
2)同时也可以采用Javascirpt来完成初始化:
dojo.addOnLoad(function(){ // 指定页面加载完毕后执行
var grid = new dojox.grid.DataGrid({
query: { pro_no: '*' },
id: 'grid2',
store: jsonStore, //设置数据源
structure: [
{field: 'pro_no', name: 'Product Number' },
{field: 'pro', name: 'Product' },
{field: 'min_amount', name: 'Minimum Amount' },
{field: 'max_amount', name: 'Maximum Amount' },
{field: 'avg_amount', name: 'Average Amount' }
],
rowsPerPage: 20
},'gridNode'
); //设置 grid 显示在 id 为 gridNode 的节点下
grid.startup(); //启动 grid
});
18.DojoX Charting:
·Charting是基于DojoX绘图包的数据可视化组件,包括了Chart2D和Chart3D来分别绘制2D和3D的图表。
·Chart2D提供多种样式的饼图、柱状图、折线图、面积图、网格等图表。
·Chart3D目前仅提供了3D柱状图和3D圆柱图,并且从社区获取的信息表明由于IE上的性能问题导致Chart3D的开发暂时搁置。
1)首先引入所需要的 dojox 类,如:
dojo.require("dojox.charting.Chart2D"); //Chart2D 所需要的 2D 类
dojo.require("dojox.charting.Chart3D"); //Chart3D 所需要的 3D 类
dojo.require("dojox.charting.themes.PlotKit.blue"); // 样式主题
2).声明Chart对象,包括了Chart2D或Char3D,
如:var chart1=new dojox.charting.Charting.Chart2D('chart1');
这里传入的参数为要在页面中载入chart1的元素的 ID,也就是chart1显示后的上层标签的 ID;
3)使用Chart对象的setTheme为Chart对象设置主题,来保证准确的绘制图表;
4)使用Chart对象的addPlot方法为Chart对象添加部件,可以添加多个部件;
5)使用Chart对象的addSeries方法为Chart对象添加数据;
6)调用render方法将chart对象添加到页面节点中。
19.Dojo国际化:
1)时间本地化示例:
var mydate = new Date(2007,5,26,10,1,13);
var result = dojo.date.locale.format(mydate,{ formatLength :'long' ,
locale: 'zh-cn' });
dojo.byId("content").innerHTML = result;
}
2)数字格式的本地化:
var result=dojo.number.format(999999.999,{locale: 'fr-fr'}) ;
结果会发现页面中数字的显示非常奇怪。这是因为是以法语的方式对数字进行了显示。
dojo.requireLocalization("dojo.cldr","number", 'fr-fr') 引入了法语运行环境文件。
如果查看 dojo_path/dojo/cldr/nls 目录,会发现fr文件夹下有个number.js的文件。
这就是上面引入的处理数字显示的法语运行环境文件。