| Both sides previous revision
前次修改
|
|
dokuwiki:dev:nodetree [2020/09/17 06:18]
ghsrobert 改為先 ListTree 再 NodeTree |
dokuwiki:dev:nodetree [2020/09/17 06:31] (目前版本)
ghsrobert [NodeTree] 插多圖 |
| - 在 userall.css 中，最前面加上<code css>@import "nodetree.css";</code> | - 在 userall.css 中，最前面加上<code css>@import "nodetree.css";</code> |
| - ''plugin»wrap»noPrefix'' 裡加上 ''nodetree'' | - ''plugin»wrap»noPrefix'' 裡加上 ''nodetree'' |
| - 測試：<div nodetree> | - 測試：<code><div nodetree> |
| * 行嗎 | * 行嗎 |
| * 來棵樹 | * 來棵樹 |
| * 吧 | * 吧 |
| </div>↑效果沒出來 | </div></code>↑效果沒出來，就還是一般的 bullet list 樣 |
| - userall.css 改為： | - userall.css 改為： |
| - <code css>@import "/dw/conf/nodetree.css";</code>→ ''403 Forbidden'' :( | - <code css>@import "/dw/conf/nodetree.css";</code>→ ''403 Forbidden'' :( |
| - <code css>@import "/conf/nodetree.css";</code>→ ''404 Not found'' :( | - <code css>@import "/conf/nodetree.css";</code>→ ''404 Not found'' :( |
| - 放棄 ''@import''，改為直接把 CSS 內容放到 userall.css 中\\ → 效果出來了～但最後一項是錯的，原來還有一處是我忽略了，上面取代錯了，要改一下：<div> | - 放棄 ''@import''，改為直接把 CSS 內容放到 userall.css 中\\ → 效果出來了～[{{http://mimg.tk/uploads/big/2ce9401e4471afe3b9db9a675a321d40.png|擷圖}}]但最後一項的線條是錯的，原來還有一處是我忽略了，上面取代錯了，要改一下：<div> |
| ^ NodeTree class ^ 備註 ^ 取代為 DW 元素 ^ | ^ NodeTree class ^ 備註 ^ 取代為 DW 元素 ^ |
| | ''.nt-ti-last'' | 最後一枝 | ''.nodetree ul > li:last-of-type'' | | | ''.nt-ti-last'' | 最後一枝 | ''.nodetree ul > li:last-of-type'' | |
| </div>→ 基本型成功！ | </div>→ 基本型成功！[{{http://mimg.tk/uploads/big/0eb394a4fa5142eea9b412eb5c05cea3.png}}] |
| - <div nodetree> | - <code><div nodetree> |
| <div tp>樹根</div> | <div tp>樹根</div> |
| * 行嗎 | * 行嗎 |
| * 來棵樹 | * 來棵樹 |
| * 吧 | * 吧 |
| </div>↑樹根成功！（只是位置有點怪） | </div></code>[{{http://mimg.tk/uploads/big/9f07886c9a621eac23798ea8151a04cd.png}}]↑樹根成功！（只是位置有點怪） |
| - <div nodetree> | - 有樹根加子目<code><div nodetree> |
| <div tp>樹根</div> | <div tp>樹根</div> |
| * 行嗎 | * 行嗎 |
| * 子目 | * 子目 |
| * 子目 | * 子目 |
| </div> | </div></code>會變這樣：[{{http://mimg.tk/uploads/big/5a74bb5ab613889b8063e4a25fa66c8e.png}}] |
| - 解決樹根位置：<code css>div.tp p { | - 解決樹根位置：<code css>div.tp p { |
| margin: 0; | margin: 0; |
| }</code>（原本 p 都有一個 10px 的上下 margin ← 拿掉） | }</code>（原本 p 都有一個 10px 的上下 margin ← 拿掉） |
| - 之前的設計，下面有子目的話，還是都要弄 ''tp''，所以重弄一個：<div nodetree> | - 之前的設計，下面有子目的話，還是都要弄 ''tp''，所以重弄一個：<code><div nodetree> |
| <div tp>樹根</div> | <div tp>樹根</div> |
| * <div tp>行嗎</div> | * <div tp>行嗎</div> |
| * 子目 | * 子目 |
| * 子目 | * 子目 |
| | </div></code>[{{http://mimg.tk/uploads/big/d6cd80491fa29ed0387495f578f30df1.png|目前成果}}]先這樣，改天再來繼續研究調整<div> |
| | ---- |
| </div> | </div> |
ghsrobert