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
Advanced: Attaching Behaviors to Folder View
Introduction
In
this chapter we're going to show you how you can dynamically retrieve Folder
Contents from an Adobe Dreamweaver Recordset and add a nice dynamic tooltip
when clicking on the folder items.
We have a Dreamweaver recordset ready which
we will dynamically retrieve the folder path from.
- Applying
the extension
Choose the
icon from the DMXzone object
bar to apply the extension, the following popup appears:
We just insert FolderView with its basic settings.
- Configuring the Extension
Click on
in your design view to display
the properties of the listing. Below is a screenshot of the property
inspector. We will configure the extension to retrieve the folder path
from a Recordset.
Click on the lightning bolt next to the Folder: field
A new window appears:
We select the path column and click the OK button to save our settings.
- Adding the Behavior
Now let's add an Advanced Tooltip that will inform the user which folder or file he/she is viewing. Click on the paperclip right next to "Behaviours:" in the Property Inspector.
A new popup window appears:
- Setting up your behaviours
Find the "Show Advanced Tooltip" behavior in the DMXzone folder.
NOTE: You have to have Advanced Tooltips installed before you can add this behavior.
Select an event that would trigger the behavior
Show Advanced Tooltip. In our case, we want to display a tooltip for every item
that is clicked - this includes folders and files so we select "When any tree
item is clicked"
- Settings of the "Show Advanced Tooltip" behavior.
Note the {path} string - this is a part of Folder View API (Application Programming Interface) that allows you to retrieve the item (folder or file) server path.
Here are the settings we have chosen:
Click OK
- Save your Page
And test the result in your browser. It should look like this:
