Version 2.0 of Folder View offers fully Ajax driven folder listings of your server folders and files! Each new folder expansion is loaded dynamically with Ajax calls. Create cool listings like folders, categories and thumbnails with web 2.0 style icons. Apply amazing expanding effects for the greatest user experience. Build your own dynamically tree of DOM or JSON objects!
Folder View 2 Manual
Create cool listings like folders, categories and thumbnails with web 2.0 style icons
The Basics: Creating a Basic Folder Listing
Introduction
In this chapter we'll create a basic
listing that will look this:
Building the Listing
- Create a
new HTML page
Create a new or open an existing HTML page and save the page.
- Applying
the extension
Choose the
icon from the DMXzone object
bar to apply the extension, the following popup appears:
- Setting the Main Options
List type determines what sort of list you want to display, you can set it to Normal, Bullet Images or Folders and Files. We select Folders and Files.
Clickable area lets you configure what part of your list is clickable. You can set it to Row or Bullet Images. We set it to row.
Clickable Image sets the image that is used in front of your expandable root folders. You can set it to plus/minus or down/right arrow. We select plus/minus.
When enabled Show Structure shows the structure of the folders by using lines in front of them, if you disable this option, it only shows the structure with indents. We enable the Show Structure option.
- Configuring Effects
When enabled, the Slide option adds an animated slide effect to the expanding and collapsing of your folders. We enable it as it gives a nice touch to your folders.
The Fade option makes your icons transparent when you collapse them and makes them fade in again when you expand your folders. We enable the Fade option for a stylish effect. Make sure you've enabled the Slide option before enabling this option.
Speed sets the expand and collapse speed of your folders. We set the Speed to normal.
- Setting the Style Options
Background color lets you change the color of your canvas. The Choose Other Icons options let's you choose different styles.
Press the Choose Other Icons option to select a folder style.
A popup appears, we select the Blue_Folder2_100x100 style.
Press OK to apply the properties (a progress bar might appear).
The Assets manager appears, select Upload All to upload the files to your server.
Press F12 to preview and save. That's it you've created your own FolderView!
The preview in your design view might deviate from the view in your browser, so always test in your browser. The result should look similar to the screenshot below.