在引用dojo.js前,最好聲明djConfig對象,以便在加載dojo.js時能夠取得所設置的值,雖然在0.3版本以后dojo支持在加載后設置,但是強烈建議你把聲明djConfig的代碼作為第一段script:
一個完整的djConfig對象定義如下(值均為dojo的默認值)
js 代碼
var djConfig = {
isDebug: false,
debugContainerId: "",
bindEncoding: "",
allowQueryConfig: false,
baseScriptUri: "",
parseWidgets: true
searchIds: [],
baseRelativePath: "",
libraryScriptUri: "",
iePreventClobber: false,
ieClobberMinimal: true,
preventBackButtonFix: true,
debugContainerId同樣也是與調試有關的,如果不指定的話,調試信息將會直接利用 document.write輸出,這樣可能會破壞頁面的整體布局,所以你可以指定任何一個可以作為容器的html元素的id作為調試信息輸出容器
allowQueryConfig,這個屬性指明 dojo是否允許從頁面url的參數中讀取djConfig中的相關屬性,當值為true時,dojo會優先從url參數中讀取djConfig的其他屬性,比如: http://server/dojoDemo.htm?djConfig.debugContainerId=divDebug
baseScriptUri,一般不需要設置,dojo會自動根據你引用dojo.js的路徑設置這個值,比如,<script src="../dojo/dojo.js" type="text/javascript"></script>,自動獲取的值便是 ../dojo/
ps: 如果你有多個工程需要同時引用dojo.js的話,建議也把dojo當作一個獨立的工程,引用的時候采用絕對路徑就可以了
parseWidgets,這個是可以控制dojo是否自動解析具有dojoType的html元素為對應的widget,如果你沒有使用任何Widget,建議設置為false以加快dojo的加載速度
searchIds,這是一個字符串數組,定義了所有需要解析為widget的html元素的ID,如果ID不在其中的html元素是不會被解析的,當數組為空數組時,則所有具有dojoType的元素都會被解析
還有一個bindEncoding,是用來設置默認的bind請求的編碼方式。
dojo.raise拋出一個異常
dojo.errorToString將異常轉換為字符串
js 代碼
try {
dojo.raise("打印失敗", new Error("文件不存在"));
} catch(e)
{
alert(dojo.errorToString(e));
}
isDebug是一個很有用的屬性,如果設置為真,則所有dojo.Debug的輸出有效,開發時應該設置為true,發布時應該設置為false。
1 計算HTML中一個塊的size
js 代碼
dojo.style.getOuterWidth / dojo.style.getOuterHeight
dojo.style.getInnerWidth / dojo.style.getInnerHeight
2 修改CSS
js 代碼
dojo.html.addClass(node, className)
dojo.html.prependClass(node, className)
dojo.html.removeClass(node, className)
dojo.html.replaceClass(node, className, oldClassName)
3 動畫
js 代碼
fadeIn, fadeShow, fadeOut, fadeHide,
wipeIn, wipeOut
explode, implode
highlight, unhighlight
舉例:
function wipeOut(elId){
dojo.lfx.wipeOut(elId, 300).play();
}
function wipeIn(elId) {
dojo.lfx.wipeIn(elId, 300).play();
}
function fadeOut(elId){
dojo.lfx.html.fadeOut(elId, 300).play();
}
function fadeIn(elId){
dojo.lfx.html.fadeIn(elId, 300).play();
}
function opacity(elId){
dojo.html.setOpacity(elId, 0.5);
}
function opacityApp(){
$("#opacity").click(function(){
opacity('fadeElm');
});
}
function fadeInApp(){
$("#fadein").click(function(){
fadeIn('fadeElm');
});
} dojo.lang模塊:
dojo.lang.mixin將一個對象的方法和屬性增加到另一個對象上:
js 代碼
var s1 = {name: "TestObj", test1: function(){alert("this is test1!");}}
var s2 = {value: 1000, test2: function(){alert("this is test2!");}}
var d = {};
dojo.lang.mixin(d, s1, s2); //執行后d就具備了s1和s2的所有屬性和方法d.test1();
dojo.lang.extend為指定類的原型擴展方法與屬性:
js 代碼
TestClass = function() {};
dojo.lang.extend(TestClass, {name: "demo", test: function(){alert("Test!");}});
var o = new TestClass();
//TestClass本來是沒有test方法的,但是extend以后就有test方法了o.test();
dojo.lang.find=dojo.lang.indexOf查找指定對象在指定數組中的位置:
js 代碼
var arr = [1,2,3,3,2,1];
dojo.lang.find(arr, 2); //will return 1
dojo.lang.extrasdojo.lang.setTimeout延遲指定時間后執行指定方法:
js 代碼
function onTime(msg){dojo.debug(msg)}
dojo.lang.setTimeout(onTime, 1000, "test"); //1秒后會輸出調試信息"test"
DOM操作
js 代碼
dojo.dom.isNode
dojo.dom.getTagName
dojo.dom.firstElement
dojo.dom.lastElement
dojo.dom.nextElement
dojo.dom.prevElement
dojo.dom.moveChildren (srcNode, destNode, trim)
dojo.dom.copyChildren (srcNode, destNode, trim)
dojo.dom.removeChildren(node)
dojo.dom.replaceChildren(node, newChild)
dojo.dom.removeNode(node)
dojo.dom.getAncestors
dojo.dom.getAncestorsByTag
dojo.dom.innerXML
dojo.dom.createDocumentFromText
dojo.dom.prependChild
dojo.dom.insertAfter
dojo.dom.insertAtPosition
dojo.dom.textContent
先介紹這么多,祝大家周末愉快!