作者Hopemaydie (黑日影月)
看板Blog
標題[樂多] 可做出「樹狀分類」的語法
時間Sat Jul 25 02:28:23 2009
在網路上無意間發現的語法
先創一個自由欄位，格式選擇「不自動換行」，然後貼入下列文字：
<style>ul.mktree li { list-style: none; }ul.mktree, ul.mktree ul , ul.mktree
li { margin-left:10px; padding:0px; }ul.mktree li .bullet {
padding-left: 15px; }ul.mktree li.liOpen .bullet { cursor: pointer;
background: url(
http://finalevillee.googlepages.com/minus.gif) center left
no-repeat; }ul.mktree li.liClosed .bullet { cursor: pointer; background:
url(
http://finalevillee.googlepages.com/plus.gif) center left no-repeat;
}ul.mktree li.liBullet .bullet { cursor: default; background:
url(
http://finalevillee.googlepages.com/bullet.gif) center left no-repeat;
}ul.mktree li.liOpen ul { display: block; }ul.mktree li.liClosed ul {
display: none; }ul.mktree li { font-size: 10pt; }ul.mktree li ul li {
font-size: 10pt; }ul.mktree li ul li ul li { font-size: 8pt; }ul.mktree li
ul li ul li ul li { font-size: 6pt; }</style><script
src="
http://finalevillee.googlepages.com/tree.js"></script>
<ul class="mktree">
<li><a href="大分類1的網址">大分類1</a>
<ul>
<li><a href="小分類1的網址">小分類1</a></li>
<li><a href="小分類2的網址">小分類2</a></li>
</ul>
</li>
<li><a href="大分類2的網址">大分類2</a>
<ul>
<li><a href="小分類3的網址">小分類3</a></li>
<li><a href="小分類4的網址">小分類4</a></li>
<li><a href="小分類5的網址">小分類5</a></li>
</ul>
</li>
</ul>
<script>convertTrees();</script>
其中
http://finalevillee.googlepages.com/minus.gif
http://finalevillee.googlepages.com/plus.gif
http://finalevillee.googlepages.com/bullet.gif
都是可更改的圖檔
大分類中的小分類數量可隨喜好增減
目前我覺得這個語法唯一明顯的缺點就是在側邊欄位裡只能用一次，
如果有兩個欄位同時貼了這樣的語法的話會出現一點點小問題...
範例請見：
http://blog.roodo.com/leoraph/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.161.202.88
1F：推 ChienBear:謝謝啦^^ 怎麼改連結顏色呢 07/28 00:21
2F：→ ChienBear:顯示成功但是是透明的... 07/28 00:21
透明的呀?有實際畫面可以看嗎?@@
※ 編輯: Hopemaydie 來自: 118.161.200.146 (07/28 02:55)
3F：推 ChienBear:可以了 我自己改顏色嚕^^ 07/28 23:55