SHARE

MS PROJECTS

DOWNLOADS

TUTORIALS

DOCUMENTATION

HOME

Miva Script used functions:

dir

miva_array_max

substring

toupper

gettoken

len

glosub

jQuery Tree File Plugin with Miva Script

Written by Claudiu Bischoff, on 12 march 2009

In this article I share the little jQuery plugin that was made by Cory S.N. LaViska from A Beautiful Site (http://abeautifulsite.net/

). I made a small modification so we can use JSON too insead of direct "<ul></ul>" structure :-)

OVERVIEW

jQuery is one of the best Java Script library that I could find on the net. I worked before with Prototype, but my final choice was without a doubt jQuery. Here how the creators of the library describe it:

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. (www.jquery.com )

The Tree File Plugin, is a small extension that was initially made by Cory S.N. LaViska (a very small and fast script that I aplaude). I modified it a little for our Miva Scripters needs, so we can use it in any case (not only for file/directory structure, but also for categories and other structures).

COMPATIBILITY

jQuery File Tree works in all browsers supported by jQuery. It has been fully tested in:

    * Internet Explorer 6 & 7
    * Firefox 2 & 3
    * Safari 3
    * Chrome (beta)
    * Opera 9

DOWNLOADS

Original plug-in: http://abeautifulsite.net/notebook/58

jQuery library: http://jquery.com/

jQuery File Tree plugin with Miva Script Connector:
http://mivascript.org/js/miva_jqueryFileTree/jqueryFileTree.zip

jQuery JSON File Tree plugin with Miva Script Connector:

http://mivascript.org/js/miva_jqueryJSONFileTree/jqueryJSONFileTree.zip

MY MODIFICATIONS

First of all, I had to modify the original script, because of a bug that I have since the new jQuery library was published and that concerns the AJAX ".post" function. Apparently, when using .post to a Miva Script Compiled file, I have a blank page in return. So in our case I had to change to GET. (tested under Windows and Linux server, same result). Second modification that I made, is to add a new function that will parse data from a JSON query.

Code source of the connector :

- Connector without JSON method:
http://mivascript.org/js/miva_jqueryFileTree/jqueryFileTree.mv.txt

- Connector with the JSON method:

http://mivascript.org/js/miva_jqueryJSONFileTree/jqueryJSONFileTree.mv.txt

USAGE

Dependencies

jQuery File Tree requires jQuery 1.2 or above. For easing effects, you will need the jQuery Easing Plugin or another jQuery easing plugin of your choice.
Creating a File Tree
In it’s simplest form, you can create a file tree using the following code:

where #container_id is the ID of an empty DIV element that exists on your page. The file tree will automatically load when your page loads.

DEMO

jQuery File Tree plugin (with Miva Script Connector): click here

jQuery JSON File Tree plugin (with Miva Script Connector): click here

TODO

- I'm working already on a "right-click" system that could let us modify (or delete) the files in the structure.
- Use cookie to keep folders opened after changing a page.

COMMENTS

I started a thread in the Miva Merchant (Miva Script section), so don't hesitate: http://extranet.mivamerchant.com/forums/showthread.php?t=20307