dynatree詳細文檔資料

上傳人：知*** IP屬地：北京上傳時間：2023-04-23 格式：DOCX 頁數(shù)：42 大小：96.86KB 積分：12 舉報 版權(quán)申訴

已閱讀5頁，還剩37頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

dynatreeGuanping.LiDynatree詳細文檔1Download2Examples3Quickstart4Initializingthetree4.1Treeoptions4.2Initializingthetreestructure4.2.1Nodeoptions4.2.2Foldersanddocuments4.2.3Initializingthetreestructurefromanobjectarray4.2.4InitializingthetreestructurefromanAjaxresponse4.2.5Initializingthetreestructurefroma<ul>element4.2.6Initializingthetreestructureprogrammatically5Handlingevents5.1DynaTreecallbacks5.2Handlingactivate/click5.3Handlingselectionevents5.4Handlingfocuschanges5.5Loadingchildnodesondemand('lazyloading')5.5.1Loadingcustomformats6Drag'n'drop7Persistence7.1Persistenceforlazytrees8Programmingdynatree8.1DynatreePluginmethods8.2DynaTreeclassmembers8.3DynaTreeNodeclassmembers8.4Programmingexamples8.4.1Example:Selectanodewithkey'1234'8.4.2Example:Accessthecurrentlyactivenode8.4.3Example:RetrieveanodeusingforaDOMelementorjQueryobject8.4.4Example:Renametheactivenode8.4.5Example:Addachildtotheactivenode8.4.6Example:Addahoverhandlerandfindthehoverednodefromanysubelement8.4.7Example:Expandallnodes8.4.8Example:Savecurrenttreestatustothebackend8.4.9Example:activateanodedependingonURL9Themingandtranslation9.1Translation10Feedback,versionhistory,creditsandknownissues10.1Credits10.2Feedbackandsupport1下載2實例3快速入門4初始化樹4.1樹的選擇4.2初始化樹結(jié)構(gòu)4.2.1節(jié)點選擇4.2.2文件夾和文件4.2.3從一個對象數(shù)組初始化樹結(jié)構(gòu)4.2.4從Ajax響應(yīng)初始化樹結(jié)構(gòu)4.2.5從<ul>元素初始化樹結(jié)構(gòu)4.2.6初始化樹結(jié)構(gòu)編程5事件處理5.1DynaTree回調(diào)5.2處理activate/click(激活/點擊)事件5.3處理selection選擇事件5.4處理focus焦點變化5.5加載子節(jié)點上的需求(lazy加載)5.5.1加載自定義格式6拖放7持久化7.1持久化lazy樹8dynatree編程8.1Dynatree插件方法8.2DynaTree類成員8.3DynaTreeNode類成員8.4編程實例8.4.1例子:選擇一個關(guān)鍵的'1234'節(jié)點8.4.2例子:訪問當(dāng)前節(jié)點8.4.3例子:使用一個DOM元素或者jQuery對象檢索節(jié)點8.4.4例子:重命名活動節(jié)點8.4.5例子:添加一個孩子活動節(jié)點8.4.6例子:對任意一個子節(jié)點添加激活處理程序并且檢索這個激活節(jié)點8.4.7例子:展開所有節(jié)點8.4.8例子:保存當(dāng)前樹狀態(tài)到后臺8.4.9例子:根據(jù)URL激活一個節(jié)點9主題與翻譯9.1翻譯10反饋、歷史版本、信用和已知問題10.1積分10.2反饋和支持http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html1、下載你可以下載目前在/p/dynatree/downloadsdynaTree包。它包含了所有需要的東西，包括源碼，一些文檔和例子。jQuery已經(jīng)收錄，但是你可以檢查網(wǎng)站jquery.js和ui.core.jsjQuery的最新版本。2、實例這個文檔包含腳本實例和鏈接。也看到了一些更先進的現(xiàn)場演示示例瀏覽器。使用[查看源代碼]鏈接示例中的瀏覽器可能是最好的方式來了解dynaTree。3、快速入門讓我們從一個簡單的例子開始：嘗試這個例子…<html><head><scriptsrc='jquery/jquery.js'type="text/javascript"></script><scriptsrc='jquery/jquery-ui.custom.js'type="text/javascript"></script><scriptsrc='jquery/jquery.cookie.js'type="text/javascript"></script><linkrel='stylesheet'type='text/css'href='skin/ui.dynatree.css'><scriptsrc='jquery.dynatree.js'type="text/javascript"></script><scripttype="text/javascript">$(function(){//Attachthedynatreewidgettoanexisting<divid="tree">element//andpassthetreeoptionsasanargumenttothedynatree()function:$("#tree").dynatree({onActivate:function(node){//ADynaTreeNodeobjectispassedtotheactivationhandler//Note:wealsogetthisevent,ifpersistenceison,andthepageisreloaded.alert("Youactivated"+node.data.title);},persist:true,children:[//Passanarrayofnodes.{title:"Item1"},{title:"Folder2",isFolder:true,children:[{title:"Sub-item2.1"},{title:"Sub-item2.2"}]},{title:"Item3"}]});});</script></head><body><divid="tree"></div></body>作為替代，可以用離開子節(jié)點的選擇和添加的<ul>里面<divid=“樹”>標(biāo)簽來代替?？纯闯跏蓟瘶浣Y(jié)構(gòu)從<ul>元素為例。我將在下面的章節(jié)中更多的細節(jié)。4、初始化樹dynaTree是基于jQuery的。如果你不熟悉，你可能還需要查閱jQuery文檔。這棵樹在HTML文檔的onload事件初始化。在使用jQuery時通常是通過一個$(..)函數(shù)完成。<head><scripttype="text/javascript">$(function(){[…]});</script></head>根據(jù)指定ID的樹tree將dynaTree控件添加到一個空的<DIV>元素上。這個ID可以有任何價值，在我們的例子中的”#tree”，它只匹配jQuery選擇器，通過dynatree()方法作為層級節(jié)點的支持。$("#tree").dynatree({[…]});4.1、樹的選擇樹的選擇是在{}中通過純JavaScript對象傳遞的，如{…}。以下腳本顯示可用選項。所有的選擇都有一個合理的默認值，所以我們只能通過onactivate處理程序。$("#tree").dynatree({

title:"Dynatree",//Tree'sname(onlyusedfordebugoutpu)

minExpandLevel:1,//1:rootnodeisnotcollapsible

imagePath:null,//Pathtoafoldercontainingicons.Defaultsto'skin/'subdirectory.

children:null,//Inittreestructurefromthisobjectarray.

initId:null,//Inittreestructurefroma<ul>elementwiththisID.

initAjax:null,//Ajaxoptionsusedtoinitializethetreestrucuture.

autoFocus:true,//Setfocustofirstchild,whenexpandingorlazy-loading.

keyboard:true,//Supportkeyboardnavigation.

persist:false,//Persistexpand-statustoacookie

autoCollapse:false,//Automaticallycollapseallsiblings,whenanodeisexpanded.

clickFolderMode:3,//1:activate,2:expand,3:activateandexpand

activeVisible:true,//Makesure,activenodesarevisible(expanded).

checkbox:false,//Showcheckboxes.

selectMode:2,//1:single,2:multi,3:multi-hier

fx:null,//Animations,e.g.nullor{height:"toggle",duration:200}

noLink:false,//Use<span>insteadof<a>tagsforallnodes

//Lowleveleventhandlers:onEvent(dtnode,event):returnfalse,tostopdefaultprocessing

onClick:null,//null:generatefocus,expand,activate,selectevents.

onDblClick:null,//(Nodefaultactions.)

onKeydown:null,//null:generatekeyboardnavigation(focus,expand,activate).

onKeypress:null,//(Nodefaultactions.)

onFocus:null,//null:setfocustonode.

onBlur:null,//null:removefocusfromnode.

//Pre-eventhandlersonQueryEvent(flag,dtnode):returnfalse,tostopprocessing

onQueryActivate:null,//Callback(flag,dtnode)beforeanodeis(de)activated.

onQuerySelect:null,//Callback(flag,dtnode)beforeanodeis(de)selected.

onQueryExpand:null,//Callback(flag,dtnode)beforeanodeisexpanded/collpsed.

//Highleveleventhandlers

onPostInit:null,//Callback(isReloading,isError)whentreewas(re)loaded.

onActivate:null,//Callback(dtnode)whenanodeisactivated.

onDeactivate:null,//Callback(dtnode)whenanodeisdeactivated.

onSelect:null,//Callback(flag,dtnode)whenanodeis(de)selected.

onExpand:null,//Callback(flag,dtnode)whenanodeisexpanded/collapsed.

onLazyRead:null,//Callback(dtnode)whenalazynodeisexpandedforthefirsttime.

onCustomRender:null,//Callback(dtnode)beforeanodeisrendered.ReturnaHTMLstringtooverride.

onCreate:null,//Callback(dtnode,nodeSpan)afteranodewasrenderedforthefirsttime.

onRender:null,//Callback(dtnode,nodeSpan)afteranodewasrendered.

postProcess:null,//Callback(data,dataType)beforeanAjaxresultispassedtodynatree.

//Drag'n'dropsupport

dnd:{

//Maketreenodesdraggable:

onDragStart:null,//Callback(sourceNode),returntrue,toenablednd

onDragStop:null,//Callback(sourceNode)

//Maketreenodesacceptdraggables

autoExpandMS:1000,//Expandnodesafternmillisecondsofhovering.

preventVoidMoves:true,//Preventdroppingnodes'beforeself',etc.

revert:false,//true:slidehelperbacktosourceifdropisrejected

onDragEnter:null,//Callback(targetNode,sourceNode,ui,draggable)

onDragOver:null,//Callback(targetNode,sourceNode,hitMode)

onDrop:null,//Callback(targetNode,sourceNode,hitMode,ui,draggable)

onDragLeave:null//Callback(targetNode,sourceNode)

ajaxDefaults:{//UsedbyinitAjaxoption

cache:false,//false:Appendrandom'_'argumenttotherequesturltopreventcaching.

timeout:0,//>0:MakesurewegetanajaxerrorforinvalidURLs

dataType:"json"http://Expectjsonformatandpassjsonobjecttocallbacks.

strings:{

loading:"Loading…",

loadError:"Loaderror!"

generateIds:false,//Generateidattributeslike<spanid='dynatree-id-KEY'>

idPrefix:"dynatree-id-",//Usedtogeneratenodeid'slike<spanid="dynatree-id-<key>">.

keyPathSeparator:"/",//Usedbynode.getKeyPath()andtree.loadKeyPath().

cookieId:"dynatree",//Chooseamoreuniquename,toallowmultipletrees.

cookie:{

expires:null//DaysorDate;null:sessioncookie

//Classnamesused,whenrenderingtheHTMLmarkup.

//Note:

//Thesesettingsonlyapplyoninitialisation.

//Ifonlysingleentriesarepassedforoptions.classNames,allother

//valuesarestillsettodefault.

classNames:{

container:"dynatree-container",

node:"dynatree-node",

folder:"dynatree-folder",

empty:"dynatree-empty",

vline:"dynatree-vline",

expander:"dynatree-expander",

connector:"dynatree-connector",

checkbox:"dynatree-checkbox",

nodeIcon:"dynatree-icon",

title:"dynatree-title",

noConnector:"dynatree-no-connector",

nodeError:"dynatree-statusnode-error",

nodeWait:"dynatree-statusnode-wait",

hidden:"dynatree-hidden",

combinedExpanderPrefix:"dynatree-exp-",

combinedIconPrefix:"dynatree-ico-",

hasChildren:"dynatree-has-children",

active:"dynatree-active",

selected:"dynatree-selected",

expanded:"dynatree-expanded",

lazy:"dynatree-lazy",

focused:"dynatree-focused",

partsel:"dynatree-partsel",

lastsib:"dynatree-lastsib"

debugLevel:1//0:quiet,1:normal,2:debug

});詳細說明：opts.classNames類型：詞典，默認：$.ui.dynatree.defaults.classNames。當(dāng)HTML標(biāo)記被使用時重寫類的名字。這里通常也需要一些自定義的CSS文件。注：類名稱是用只于初始化。例子:$("#tree1").dynatree({

checkbox:true,

//Overrideclassnameforcheckboxicon:

classNames:{checkbox:"dynatree-radio"},

[...]opts.clickfoldermode類型：整數(shù)，默認值：3。定義，鼠標(biāo)點擊如何改變一個文件夾的狀態(tài)。1.單擊文件夾名稱（或按回車鍵]或[空格]鍵[）將激活它。在這種模式下，文件和文件夾的行為相同。2.單擊文件夾標(biāo)題擴展節(jié)點。無法激活文件夾。3.單擊文件夾標(biāo)題將激活和拓展。opts.persist類型：布爾值，默認值：假。真的：樹的擴展、激活、焦點和選擇狀態(tài)保存到會話cookie，那么加載頁面將恢復(fù)狀態(tài)。注：這可能不是lazy節(jié)點。看到cookie選項。4.2初始化樹結(jié)構(gòu)一棵樹結(jié)構(gòu)是由節(jié)點組成的。每個節(jié)點可以依次包含一個列表子節(jié)點。一個dynaTree總是恰好有一個根節(jié)點的樹，和我們所有的頂層節(jié)點創(chuàng)建的直接后裔。根節(jié)點通常是隱藏的，所以我們只看到我們已經(jīng)添加的節(jié)點。dynaTree可以閱讀來自不同來源的結(jié)構(gòu)：1、如果子節(jié)點選擇通過，將被使用。2。否則，如果initajax選項通過，它將被使用。3。否則，如果initid選項通過，它將被使用。4。否則，如果容器<DIV>元素包含一個<ul>元素，它將被使用。5、否則，樹是空的。但是我們可以選擇這樣做，如果我們想修改樹編程。方法1-3期望列表節(jié)點的選項，在下面的章節(jié)中描述。4.2.1節(jié)點選項節(jié)點選項的定義是在大括號簡單的JavaScript對象，如{…}。大多數(shù)時候，我們通過一個節(jié)點選項列表，如兒童：[{……}，{……}，。下面的代碼片段顯示，可以用來定義一個樹節(jié)點的屬性。所有選項都有合理的默認值，所以我們只能通過一個標(biāo)題。children:[

{

title:null,//(required)Displayednameofthenode(htmlisallowedhere)

key:null,//Maybeusedwithactivate(),select(),find(),...

isFolder:false,//Useafoldericon.Alsothenodeisexpandablebutnotselectable.

isLazy:false,//CallonLazyRead(),whenthenodeisexpandedforthefirsttimetoallowfordelayedcreationofchildren.

tooltip:null,//Showthispopuptext.

href:null,//Addedtothegenerated<a>tag.

icon:null,//Useacustomimage(filenamerelativetotree.options.imagePath).'null'fordefaulticon,'false'fornoicon.

addClass:null,//Classnameaddedtothenode'sspantag.

noLink:false,//Use<span>insteadof<a>tagforthisnode

activate:false,//Initialactivestatus.

focus:false,//Initialfocusedstatus.

expand:false,//Initialexpandedstatus.

select:false,//Initialselectedstatus.

hideCheckbox:false,//Suppresscheckboxdisplayforthisnode.

unselectable:false,//Preventselection.

//Thefollowingattributesareonlyvalidifpassedtosomefunctions:

children:null//Arrayofchildnodes.

//NOTE:wecanalsoaddcustomattributeshere.

//ThismaythenalsobeusedintheonActivate(),onSelect()oronLazyTree()callbacks.

[…]

]節(jié)點選項也傳遞給事件處理程序，并且可以以此類似的訪問：onActivate:function(node){

alert("Youactivated"+node.data.title);

}詳細說明：data.activate如果設(shè)置為真，節(jié)點將被激活。data.addclass作為節(jié)點的<span>元素添加的類名稱。例子:{title:"Prettynode",addClass:"customClass1"}或<lidata="addClass:'customClass1'">Prettynode可能使用css樣式修飾span.customClass1a{background-color:maroon;color:yellow;}data.children用于生成子節(jié)點的節(jié)點選項的數(shù)組。這個選項只有在通過已確定的方法才是有效的，如dyntreenode.addchild()。data.expand如果設(shè)置為真，節(jié)點將首先擴展。data.focus如果設(shè)置為真，節(jié)點將最初集中。data.hidecheckbox控制復(fù)選框圖標(biāo)顯示。它仍然是有可能的（去）選擇節(jié)點使用的接口，鍵盤或初始化數(shù)據(jù)。（選擇狀態(tài)可以通過CSS樣式。可視化）又見無法選取。data.href如果tree通過<ul>標(biāo)簽初始化,包含URL的鏈接，<divid="tree"><ul>

<liclass="expandedfolder">Searchengines

<ul>

<li><ahref=""target="_self">Google</a>

<li><ahref="">Bing</a>data.icon圖像文件的可選名稱相對于圖像目錄。如果指定了空，則根據(jù)節(jié)點類型（文件夾或文檔）使用默認圖像。這是默認的。如果不指定，則顯示沒有圖像。data.isfolder標(biāo)記節(jié)點作為文件夾（以其他方式處理）。見文件夾和文件data.islazy允許節(jié)點內(nèi)容的延遲加載。當(dāng)一個lazy的節(jié)點首次展開onlazyread()這個方法將被調(diào)用。data.key唯一標(biāo)識此節(jié)點。它是可選的，但我們需要它的一些方法，比如：tree.activateKey()。如果在指定節(jié)點的元素ID是在前面加上前綴這樣生成的：dynatree-id-1234。如果未指定，則生成隨機密鑰標(biāo)識。data.select如果設(shè)置為真，節(jié)點將首先選擇。data.target看到data.href。data.title類型：字符串，默認為“”。節(jié)點的名稱（顯示HTML標(biāo)記在這里是被允許的）。data.tooltip可選的字符串，在彈出的窗口中顯示當(dāng)光標(biāo)懸停在結(jié)點上。data.unselectable使用API、鼠標(biāo)和鍵盤防止該節(jié)點的選擇。該節(jié)點在初始化數(shù)據(jù)或間接（多層次模式）它仍然是可以選擇的。再看看hidecheckbox。覆蓋節(jié)點的屬性設(shè)置，在初始化之前dynaTree修改結(jié)構(gòu)：<scripttype="text/javascript">

$.ui.dynatree.nodedatadefaults["icon"]=false;//Turnofficonsbydefault

$(function(){

$("#tree").dynatree({

rootVisible:false,

[...]4.2.2文件夾和文件當(dāng)一個節(jié)點類型的文件夾，它得到的一個特殊的文件夾圖標(biāo)和類名稱。我們通常用它們來保存子節(jié)點。另外，文件夾可以通過單擊標(biāo)題文本擴展（這種行為可以用clickfoldermode選項控制）。非文件夾（"documents”）也可以包含子節(jié)點。點擊一個孩子節(jié)點激活它，所以我們必須點擊小[+]圖標(biāo)在前面擴展這樣的文檔節(jié)點。4.2.3初始化樹結(jié)構(gòu)從一個對象數(shù)組在上面的快速示例中，我們已經(jīng)看到了如何通過將節(jié)點數(shù)組傳遞到兒童選項來初始化樹。$("#tree").dynatree({

children:[…],

[…]

});再看看Nodeoptions.4.2.4、從Ajax響應(yīng)初始化樹結(jié)構(gòu)而不是通過數(shù)據(jù)對象的數(shù)組，在initajax選項上我們可以通過一個URL用于連接Ajax的Web服務(wù)。$("#tree").dynatree({

initAjax:{url:"/ajaxTree",

data:{key:"root",//Optionalargumentstoappendtotheurl

mode:"all"

}

[…]

});Web服務(wù)將返回一個有效的JSON格式的節(jié)點列表，像這樣：【{…{}…}，…]。因為數(shù)據(jù)請求是異步執(zhí)行的，文檔將加載更快。dynaTree將顯示轉(zhuǎn)圈，而等待請求完成的。查看加載子節(jié)點的詳細信息。查看lazy樹的持久性，對于如何把這與持久性結(jié)合起來。4.2.5、初始化樹結(jié)構(gòu)從<ul>元素如果容器<DIV>包含<ul>元素，節(jié)點的標(biāo)題是從<li>標(biāo)簽讀。如果標(biāo)題包含HTML標(biāo)記，它可以更好地把它包含在一個span元素中。所有其他節(jié)點選項都是在一個<li>元素的數(shù)據(jù)屬性中指定的。例如<lidata="url:''">jQueryhome

<lidata="url:'',addClass:'customClass1'">Examplepage例如pagenote，data屬性在<li>元素在某些文檔類型（HTML4.01過渡和嚴(yán)格的XHTML1嚴(yán)格）是無效的。對于這個驗證器將不作驗證。另外，如果id屬性是用來傳遞的一個關(guān)鍵字key，它應(yīng)該是字母數(shù)字組成的，并且由字母開始才是合法的。（這似乎并沒有影響到該功能）。嵌套的<ul>元素被用來建立一個層次化的樹形結(jié)構(gòu)。在<ul>元素被解析，它從DOM樹中刪除。請注意，<a>元素將被識別：<li><ahref='URL'target='TARGET'>TITLE</a>將導(dǎo)致node.data.title=TITLEnode.data.href=URLnode.data.target=TARGET嘗試這個例子…<head>

<scriptsrc='jquery/jquery.js'type="text/javascript"></script>

<scriptsrc='jquery/jquery-ui.custom.js'type="text/javascript"></script>

<linkrel='stylesheet'type='text/css'href='skin/ui.dynatree.css'>

<scriptsrc='jquery.dynatree.js'type="text/javascript"></script>

<scripttype="text/javascript">

$(function(){

$("#tree").dynatree({

onActivate:function(node){

alert("Youactivated"+node);

}

});

</script>

</head>

<body>

<divid="tree">

<ul>

<liid="key1"title="Look,atooltip!">item1withkeyandtooltip

<liid="key2"class="selected">item2:selectedoninit

<liid="key3"class="folder">Folderwithsomechildren

<ul>

<liid="key3.1">Sub-item3.1

<liid="key3.2">Sub-item3.2

</ul>

<liid="key4"class="expanded">Documentwithsomechildren(expandedoninit)

<ul>

<liid="key4.1">Sub-item4.1

<liid="key4.2">Sub-item4.2

</ul>

<liid="key5"class="lazyfolder">Lazyfolder

</ul>

</div>

</body>4.2.6初始化樹結(jié)構(gòu)編程最后，DynaTreeandDynaTreeNode對象恰好始終是合理的方案.參見dynaTree編程嘗試這個例子…$(function(){

//Initializethetreeintheonloadevent

$("#tree").dynatree({

onActivate:function(node){

alert("Youactivated"+node);

}

});

//Nowgettherootnodeobject

varrootNode=$("#tree").dynatree("getRoot");

//CalltheDynaTreeNode.addChild()memberfunctionandpassoptionsforthenewnode

varchildNode=rootNode.addChild({

title:"Childnode1",

tooltip:"Thischildnodewasaddedprogrammatically.",

isFolder:true

});

childNode.addChild({

title:"Documentusingacustomicon",

icon:"customdoc1.gif"

});

});5、事件的處理當(dāng)用戶單擊某個節(jié)點時，我們想在某些方面做出反應(yīng)。所以我們至少要實現(xiàn)一個onactivate處理程序。所有的事件處理程序是通過dynatreenode實例作為參數(shù)。這是指dynaTree對象。節(jié)點選項可以類似的訪問：onActivate:function(node){alert("Youactivated"+node.data.title);}參見編程dynaTree。5.1、dynaTree回調(diào)這個上下文被設(shè)置為樹對象。Usetree.isUserEvent(),tree.isInitializing(),andtree.isReloading()確定誰生成此事件。opts.onActivate(node)當(dāng)節(jié)點被激活時調(diào)用。onActivate:function(node){if(node.tree.isUserEvent()){[...]//Dosomethingafteruseractivatedthenode(usingmouseorkeyboard)}}opts.onBlur(node)當(dāng)節(jié)點失去了焦點時調(diào)用。opts.onClick(node,event)當(dāng)單擊某個節(jié)點時調(diào)用。使用node.getEventTargetType(event)檢查區(qū)域點擊。返回false阻止默認處理（設(shè)置焦點、激活節(jié)點、擴展文件夾等）。onClick:function(node,event){if(node.getEventTargetType(event)=="title"){[...]//Handletheclickeventreturnfalse;//Preventdefaultprocessing}}opts.onCreate(node,nodeSpan)在一個節(jié)點的HTML標(biāo)簽被創(chuàng)建時調(diào)用，即當(dāng)一個節(jié)點第一次顯示時調(diào)用。這個回調(diào)函數(shù)可以用來lazily創(chuàng)建或通過程序綁定節(jié)點事件或控件。onCreate:function(node,nodeSpan){$(span).click(function(e){alert("clicked"+node);});}(注意經(jīng)常使用jQuery的live事件可能是一個更有效的解決方案。）又見opts.onrender。opts.onCustomRender(node)在一個節(jié)點的HTML標(biāo)簽tag被創(chuàng)建之前調(diào)用。這會發(fā)生在節(jié)點首次顯示的時候。這個回調(diào)函數(shù)會返回一個字符串來代替默認的HTML標(biāo)記。onCustomRender:function(node){return"<spanclass="dynatree-title">SPAM</span>"}opts.onDblClick(node,event)當(dāng)一個節(jié)點被雙擊時調(diào)用。使用node.getEventTargetType(event)檢查區(qū)域點擊。返回false以防止默認處理（目前沒有）。opts.onDeactivate(node)當(dāng)一個節(jié)點被置為無效時調(diào)用。opts.onExpand(flag,node)當(dāng)節(jié)點被擴展或折疊時調(diào)用。opts.onFocus(node)當(dāng)節(jié)點接收焦點時調(diào)用。opts.onKeydown(node,event)鍵盤按下KeyDown事件時調(diào)用。返回false以防止默認處理（生成鍵盤導(dǎo)航、聚焦、擴展、激活等）。opts.onKeypress(node,event)敲擊鍵盤KeyPress事件時調(diào)用。返回false以防止默認處理（目前沒有）。opts.onLazyRead(node)當(dāng)一個lazy節(jié)點第一次擴展時調(diào)用。opts.onPostInit(isReloading,isError[,XMLHttpRequest,textStatus,errorThrown])當(dāng)樹tree被重載(加載)(re)loaded時調(diào)用。在一個錯誤的情況下，錯誤將是真實信息并且通過以下對象添加：XMLHttpRequest，textstatus，errorthrown。opts.onQueryActivate(flag,node)一個節(jié)點被激活時調(diào)用。返回false不執(zhí)行。opts.onQueryExpand(flag,node)一個節(jié)點擴展/折疊時調(diào)用。返回false不執(zhí)行。opts.onQuerySelect(flag,node)一個節(jié)點被選中之前調(diào)用。返回false不執(zhí)行。opts.onRender(node,nodeSpan)每一次節(jié)點的HTML標(biāo)簽創(chuàng)建或更改后調(diào)用。這個回調(diào)函數(shù)可以用來修改HTML標(biāo)記。onRender:function(node,nodeSpan){$(nodeSpan).find("a.dynatree-title").css("color","red");}再看opts.oncreate。opts.onSelect(flag,node)當(dāng)一個節(jié)點被選中時調(diào)用。opts.dnd.onDragStart(sourceNode)這個函數(shù)必須被定義為在這個樹tree上可以拖動。返回false以取消拖動節(jié)點。opts.dnd.onDragEnter(targetNode,sourceNode,ui,draggable)返回true產(chǎn)生的樹節(jié)點接受draggables投下(dropping)opts.dnd.onDragOver(targetNode,sourceNode,hitMode,ui,draggable)opts.dnd.onDragLeave(targetNode,sourceNode,ui,draggable)opts.dnd.onDrop(targetNode,sourceNode,hitMode,ui,draggable)這個函數(shù)必須被定義，以便在樹上丟棄項目。opts.dnd.onDragStop(sourceNode)ajaxOptions.success(node)（傳遞參數(shù)的節(jié)點appendajax（…）。）節(jié)點已創(chuàng)建和等待刪除時調(diào)用。這是這個Ajax請求的選項ajaxoptions。錯誤（節(jié)點、XMLHttpRequest，textstatus，errorthrown）（傳遞參數(shù)的節(jié)點。appendajax（…）。）（傳遞參數(shù)的節(jié)點。appendajax（…）。）調(diào)用節(jié)點已創(chuàng)建和等待圖標(biāo)被刪除。這是這thisAjaxrequestajaxOptions.error(node,XMLHttpRequest,textStatus,errorThrown)（傳遞參數(shù)的節(jié)點。appendajax（…）。）5.2、處理激活/點擊下面的示例通過在新窗口中打開一個網(wǎng)址來處理激活事件。這是假設(shè)，我們已經(jīng)定義了一個額外的自定義屬性名為“url”的節(jié)點選項，這樣：<ul>

<lidata="url:''">jQueryhome

<lidata="url:''">jQuerydocsorchildren:[

{title:"jQueryhome",url:""},

{title:"jQuerydocs",url:""},同時，當(dāng)前活動節(jié)點標(biāo)題在<spanid='echoActive'>標(biāo)簽顯示。嘗試這個例子…$("#tree").dynatree({

[…]

onActivate:function(node){

if(node.data.url)

window.open(node.data.url);

$("#echoActive").text(node.data.title);

onDeactivate:function(node){

$("#echoActive").text("-");

[…]

});5.3處理選擇事件下面的示例將當(dāng)前節(jié)點到<spanid='echoFocused'>元素的標(biāo)題：嘗試這個例子…

$("#tree").dynatree({

[…]

onSelect:function(flag,node){

if(!flag)

alert("Youdeselectednodewithtitle"+node.data.title);

varselectedNodes=node.tree.getSelectedNodes();

varselectedKeys=$.map(selectedNodes,function(node){

returnnode.data.key;

});

alert("Selectedkeys:"+selectedKeys.join(","));

[…]

});

5.4、處理焦點變化如果我們使用光標(biāo)鍵來移動樹節(jié)點，將焦點移到下一個節(jié)點，但是活動節(jié)點仍然保持不變，除非我們使用[空格]或[回車]。此外，當(dāng)我們點擊一個文件夾節(jié)點時，它只集中，但不激活。下面的示例將當(dāng)前節(jié)點到<spanid='echoFocused'>元素的標(biāo)題:嘗試這個例子…$("#tree").dynatree({

[…]

人人文庫> 全部分類> 行業(yè)資料 > 各類標(biāo)準(zhǔn)

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

dynatree詳細文檔資料

文檔簡介

溫馨提示

最新文檔

評論

dynatree詳細文檔資料

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔