Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Js tree

772 views

Published on

jsTree study

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Js tree

  1. 1. jsTree v 0.9.8 jQuery Plugin Speaker:chloe
  2. 2. jsTree <ul><li>jsTree </li></ul><ul><ul><li>jsTree 是一個基於 jQuery 的 Tree 控件。支持 XML , JSON , Html 三種數據源。提供創建,重命名,移動,刪除,拖“放節點操作。可以自己自定義創建,刪除,嵌套,重命名,選擇節點的規則。在這些操作上可以添加多種監聽事件。 </li></ul></ul><ul><li>Currently supported browsers are: Internet Explorer 6 +, Mozilla Firefox, Safari 3, Opera 9+, Google Chrome. The latter three are not thoroughly tested. </li></ul>
  3. 3. jsTree - Key features <ul><li>Data sources : </li></ul><ul><ul><li>predefined HTML - convert nested lists into a tree on the fly </li></ul></ul><ul><ul><li>JSON - provide a json object </li></ul></ul><ul><ul><li>XML - provide a nested structure or a flat (id -> parent_id) one </li></ul></ul><ul><li>Async loading - just provide an URL and the tree will request data as needed (works for XML & JSON sources) </li></ul><ul><li>Open, close, rename, create, delete nodes (all with definable rules) </li></ul><ul><li>Various callbacks (onchange, oncreate, ondelete, onload, etc …) </li></ul><ul><li>Drag & drop support (definable with rules) </li></ul><ul><li>Multiple select </li></ul><ul><li>Localization - maintain the same tree in as many languages as you like </li></ul><ul><li>Right-to-left support (supported in both supplied themes) </li></ul><ul><li>Theme support (change icons, sizes, backgrounds, etc …) </li></ul><ul><li>Animated open & close (configurable) </li></ul><ul><li>Optional keyboard navigation </li></ul><ul><li>multitree support - move/copy nodes form to tree to tree (definable with rules) </li></ul><ul><ul><li>i.e. {rules : { multitree : true}} </li></ul></ul><ul><li>also works as a jQuery plugin </li></ul>
  4. 4. jsTree - Required & optional files <ul><li>four files are required : </li></ul><ul><ul><li>source/_lib/jquery.js (version 1.3.2) </li></ul></ul><ul><ul><li>source/_lib/css.js </li></ul></ul><ul><ul><li>source/tree_component.js </li></ul></ul><ul><ul><li>source/tree_component.css </li></ul></ul>
  5. 5. jsTree - Data of Json format <ul><li>定義 json data 的格式 </li></ul><ul><li>attributes object 可以放支援此 tag 的屬性 </li></ul><ul><ul><li>all members of the attributes object node get copied to the <li> node in the output HTML as attributes </li></ul></ul><ul><ul><ul><li>i.e. {attributes:{id: “id_value”,rel= “rel_value”}} </li></ul></ul></ul><ul><ul><li>all attributes in any data object get copied to the <a> node </li></ul></ul><ul><ul><ul><li>i.e. {data:{attributes:{“key”: “value”}} </li></ul></ul></ul>
  6. 6. jsTree - Data of json fomat with Langs. <ul><li>只定義多國 標題 時採用 : </li></ul><ul><ul><li>i.e. {data:{“en”: “en_title”, “zh_TW” : “ 中文標題” , …}} </li></ul></ul><ul><li>定義更多屬性時採用 : </li></ul><ul><ul><li>i.e. {data: “en” :{title: “en_title,attributes: {}}, </li></ul></ul><ul><ul><li>“ zh_TW” : {title: “ 中文標題” ,attributes:{}}} </li></ul></ul>
  7. 7. jsTree - Rules <ul><li>定義 Rules </li></ul><ul><ul><li>i.e. {dragrules : [ &quot;folder * folder&quot;, &quot;file after root2&quot;, &quot;tree-drop inside root2&quot; ]} </li></ul></ul><ul><ul><li>jsTree 基本使用的規則是 [ before, after, inside, * ] 為固定樣式 . </li></ul></ul><ul><ul><li>而 folder, file , root2 … 是依照我們自己定義的 , 我們可以在 rel 這個屬性裡定義我們想要的值 . </li></ul></ul>
  8. 8. jsTree - Metadata <ul><li>Import jquery.metadata.js </li></ul><ul><li>在 Json data 裡宣告 mdata 的屬性 </li></ul><ul><li>在 jsTree 的 Configuration </li></ul><ul><ul><li>定義 {rules : {         metadata : &quot;mdata&quot;,         use_inline : true}} </li></ul></ul><ul><li>擁有 mdata 屬性的 node 會根據 mdata 裡定義的 rules 去執行 </li></ul>
  9. 9. jsTree - Others <ul><li>cookies 屬性 , 可以儲存當下使用者 open/close 或是 select 的 nodes 的狀態 </li></ul><ul><li>Checkbox 的使用 </li></ul><ul><li>使用 treeobj.create() method 會自動 check rules of creatable. 如果 creatable 不允許 root 建立 , 會影響 create() method </li></ul><ul><li>Treeobj() </li></ul>
  10. 10. Reference <ul><li>http://www.cnblogs.com/Mecin/archive/2008/11/25/1340853.html </li></ul><ul><li>http://jstree.com/reference/index.html JSTree </li></ul><ul><li>http://code.google.com/p/jstree/ JSTree </li></ul>
  11. 11. jsTree v 0.9.9a <ul><li>改版 </li></ul>

×