jQuery SimpleFileBrowser

Features

A File Browser that uses Font Awesome

This plugin represents a folder content like System File Browser. It uses Font Awesome and Ajax JSON. You only need to implement a JSON response in your prefered language, or use the PHP connector included in this package.

Example

 

        <link rel="stylesheet" href="css/font-awesome/font-awesome.css">
        <link rel="stylesheet" href="css/jquery.simplefilebrowser.css">

        <script src="js/jquery.simplefilebrowser.js"><script>

        <div id="files"></div>

        <script>

            $().ready(function(){

                $("#files").simpleFileBrowser({
                    url: music.php,
                    path: '/',
                    view: 'icon',
                    select: false,
                    breadcrumbs: true,
                    onSelect: function (obj, file, folder, type) {
                        $("#select").html("You select a "+type+" "+folder+'/'+file);
                    },
                    onOpen: function (obj,file, folder, type) {
                        if (type=='file') {
                            alert("Open file: "+folder+'/'+file);
                        }
                    }
                });
              $(".data").simpleDatePicker({
                    date.selected:'today'
              });

            });

        </script>
    

Benefits

• Modern jQuery and Font Awesome are resources used in the development of most websites
• Lightweight The JavaScript code is just 5.2KB minified
• Customizable Choose from different views and icon sizes, use the callbacks to implement your custom method to open files
• Cross Browser It works perfectly in most browsers like Chrome, Firefox, Safari, Explorer 7+

Package

It includes the documentation with some examples, the minified version to use in production and the unminified version that you can modify according to your needs. A PHP connector that represents the folder content in JSON.

Usage

 

You can pass options as key/value object.

Key	Default value	Description
url	folder.php	The URL of the Ajax JSON list folder representation
method	post	Ajax method: post or get
data	object	Extra data tor the Ajax call
json	object	If you prefer non Ajax and load JSON data directly
view	icon	Style of the files and folders: icon or details
size	32	If you choose icon on the view, you can specify the size of the icons: 16,22,32
path	/	Initial folder path
bredcrumbs	false	If you would like to see header bar with navigable breadcrumbs
select	false	Specify this if you need to choose files. When it is set to false, files open on single click. When it is set to true, click is to select and double click to open
onLoad	null	When the view is drawn: onLoad: function(plugin){ ... }
onSelect	null	When the file/folder is selected: onLoad: function(plugin, name, path, type){ ... }
onOpen	null	When the file/folder is open: onOpen: function(plugin, name, path, type){ ... }

 

Some functions are available.

Key	Description
draw()	Method redraws content. You need to call this after changing some options like view, size or path Example: $( "#selector" ).simpleFileBrowser("redraw");
chgOptions(obj)	Method allows you to change some options: size, view, select, path. $( ".selector" ).simpleFileBrowser("chgOptions", {path:'/folder1', size:'22'});
getSelected()	Get the selected path $( ".selector" ).simpleFileBrowser("getSelected");
getPath()	Get the current folder path $( ".selector" ).simpleFileBrowser("getPath");
remove()	Method allows you to remove the plugin $( ".selector" ).simpleFileBrowser("remove");