Pages

0

JQuery TreeViewList Plugin


點選上面這張圖片就可以看到效果~

之前我有單純用 css 做出樹狀清單的原始模型，
這次花了些時間，把它轉換成 plugin，
這樣一來對於前端的設計者而言，
做出一個 treeview 就不用自己在那邊寫 css，
可以直接套用就會產生效果，
對於後端程式設計師來說，
也可以自訂檔案類型對應的 icon，
且不管 treeview 有幾階，都會自動產生，
個人認為是相當方便的啦ㄎㄎ~(自我感覺良好)
oxxo_treeViewList_v1.js 下載 (右鍵另存新檔)
treeViewList_img.zip 下載 (右鍵另存新檔)
兩個都要下載才有作用呀哈哈!!!!

這個 plugin 操作有以下幾個要注意的地方，
熟悉之後就可以更換自己想要的 icon 了喔~

1.自製的 file icon 圖檔長寬為 16x16
2.自製的 folder icon 有特殊的長寬位置，請參考資料夾中預設圖案
3.將 treeViewList_img 的資料夾放到您的圖檔資料夾下
4.不要對 treeViewList_img 資料夾更名(包含子資料夾)
5.folder 資料夾內為 folder(可以展開的清單) 的 icon
6.file 資料夾內為清單(沒辦法再展開的清單)的 icon
7.套用該 plugin 的 ul 內的 div，加上 icon="檔名.png" 即可更換 icon
8.記得要加上附檔名，可為 .jpg .gif .png...等圖檔格式
9.沒有設定標籤則為預設值

基本設定值：
folderOpen : 0,                    // 預設清單開啟(1)關閉(0)
slideAnimate : 0,                  // 展開動畫開啟(1)關閉(0)
slideAnimateTime : 200,            // 展開動畫時間，動畫關閉則沒作用
fontSize : "12px",                 // 字體大小
listPadding : 2 ,                  // 間距
iconFolderURL : "img/",            // icon資料夾位置
defaultFileIcon : "file1.png",     // 預設 file icon
defaultFolderIcon : "folder1.ong"  // 預設 folder icon

html寫法範例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>test</title>
 <script src="jquery-1.7.1.min.js"></script>
 <script src="plugin/oxxo_plugin/oxxo_treeViewList_v1.js"></script>
 <script>
    $(function(){
     $("#treelist1").treeViewList({
      folderOpen : 1,                    // 預設清單開啟(1)關閉(0)
      slideAnimate : 1,                  // 展開動畫開啟(1)關閉(0)
      slideAnimateTime : 200,            // 展開動畫時間，動畫關閉則沒作用
      fontSize : "12px",                 // 字體大小
      listPadding : 2 ,                  // 間距
      iconFolderURL : "img/",            // icon資料夾位置
      defaultFileIcon : "file1.png",     // 預設 file icon
      defaultFolderIcon : "folder1.png"  // 預設 folder icon
     });
    });
   </script>
</head>
<body>
   <ul id="treelist1">
    <li><div icon="home.png">清單1</div>   <!--  icon標籤內為檔案名稱 -->
     <ul>
      <li><div icon="folder2.png">清單1-1</div>
       <ul>
        <li><div icon="file2.png">清單1-1-1</div></li> <!--  icon標籤內為檔案名稱 -->
        <li><div icon="file3.png">清單1-1-2</div></li>
        <li><div icon="file4.png">清單1-1-3</div></li>
       </ul>
      </li>
      <li><div icon="folder3.png">清單1-2</div>
       <ul>
        <li><div icon="file5.png">清單1-2-1</div></li>
        <li><div icon="file6.png">清單1-2-2</div></li>
        <li><div icon="file7.png">清單1-2-3</div></li>
       </ul>
      </li>
    </ul>
  </li>
</body>
</html>

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言