filetree BETA
Installation
Add to your HTML:
<link rel="stylesheet" href="<DIRECTORY>/filetree.css" type="text/css"/>
<script src="<DIRECTORY>/filetree.js"></script>
This plugins also requires jQuery and Font Awesome.
You can change the icons using another unicode on attribute content on filetree.css
Go to example
Usage
The filetree that will be displayed on page load:
<![CDATA[<ul class="main-tree"></ul>]]>
The title of the filetree:
<![CDATA[<li class="tree-title">title</li>]]>
This is the item of the filetree:
<![CDATA[<li class="tree-item">title</li>]]>
Example of code:
<![CDATA[
<ul class="main-tree">
<li class="tree-title">photos-2015</li>
<ul class="tree">
<li class="tree-title">beach</li>
<li class="tree-item">0-2015-01-01.jpg</li>
<li class="tree-item">1-2015-01-02.jpg</li>
<li class="tree-item">2-2015-01-03.jpg</li>
</ul>
<ul class="tree">
<li class="tree-title">disneyland</li>
<li class="tree-item">3-2015-02-01.jpg</li>
<li class="tree-item">7-2015-02-02.jpg</li>
<li class="tree-item">8-2015-02-03.jpg</li>
<ul class="tree">
<li class="tree-title">birthday party</li>
<li class="tree-item">4-2015-02-01.jpg</li>
<li class="tree-item">5-2015-02-01.jpg</li>
<li class="tree-item">6-2015-02-01.jpg</li>
</ul>
</ul>
</ul>
]]>
Example with multiples filetrees
- photos-2015
- beach
- 0-2015-01-01.jpg
- 1-2015-01-02.jpg
- 2-2015-01-03.jpg
- disneyland
- 3-2015-02-01.jpg
- 7-2015-02-02.jpg
- 8-2015-02-03.jpg
- birthday party
- 4-2015-02-01.jpg
- 5-2015-02-01.jpg
- 6-2015-02-01.jpg
- projects
- nearby
- css
- animations.js
- google-maps.js
- main.js
- mobile.js
- js
- google-maps.js
- main.js
- index.html
- README.md
- movies
- interstellar.mp4
- catch_me_if_you_can.mp4
- psycho.mp4