jsTree v 0.9.8 jQuery Plugin Speaker:chloe
jsTree <ul><li>jsTree </li></ul><ul><ul><li>jsTree 是一個基於 jQuery 的 Tree 控件。支持 XML , JSON , Html 三種數據源。提供創建,重命名,移動,刪除,拖“放節點操...
jsTree - Key features <ul><li>Data sources :  </li></ul><ul><ul><li>predefined HTML - convert nested lists into a tree on ...
jsTree - Required & optional files  <ul><li>four files are  required : </li></ul><ul><ul><li>source/_lib/jquery.js (versio...
jsTree - Data of Json format <ul><li>定義  json data  的格式 </li></ul><ul><li>attributes object  可以放支援此  tag 的屬性 </li></ul><ul...
jsTree - Data of json fomat with Langs. <ul><li>只定義多國 標題 時採用 : </li></ul><ul><ul><li>i.e.  {data:{“en”: “en_title”, “zh_TW...
jsTree - Rules <ul><li>定義 Rules </li></ul><ul><ul><li>i.e. {dragrules : [ &quot;folder * folder&quot;, &quot;file after ro...
jsTree - Metadata <ul><li>Import jquery.metadata.js </li></ul><ul><li>在 Json data 裡宣告  mdata 的屬性 </li></ul><ul><li>在 jsTre...
jsTree - Others <ul><li>cookies 屬性 , 可以儲存當下使用者 open/close  或是 select  的 nodes 的狀態 </li></ul><ul><li>Checkbox 的使用 </li></ul...
Reference <ul><li>http://www.cnblogs.com/Mecin/archive/2008/11/25/1340853.html </li></ul><ul><li>http://jstree.com/referen...
jsTree v 0.9.9a <ul><li>改版 </li></ul>
Upcoming SlideShare
Loading in …5
×

Js tree

610
-1

Published on

jsTree study

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
610
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • source/_lib/css.js - a small collection of usefull css commands (those enable fast language switching, themes, etc).
  • 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>

    ×