Mac OS Like Directory / File Browser Plugin For jQuery - File Browser
| File Size: | 829 KB |
|---|---|
| Views Total: | 2584 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A lightweight jQuery plugin which gives you the possibility to create a dynamic, draggable, Mac OS like directory browser for browsing through files on the webpage.
How to use it:
1. Load the needed jQuery and jQuery UI libraries in the html page.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/jquery-ui.min.js"></script>
2. Load a jQuery UI theme of your choice in the header of the page.
<link href="http://code.jquery.com/ui/1.12.1/themes/THEMENAME/jquery-ui.css" rel="stylesheet">
3. Load the jQuery File Browser's JavaScript and CSS files in the page.
<link href="jquery.filebrowser-src.css" rel="stylesheet"> <script src="jquery.filebrowser-src.js"></script>
4. Create an input field to display the current directory path.
<input id="path">
5. Create a DIV placeholder for the file browser.
<div id="browser"></div>
6. Add your own directories and files to the file browser.
var env = {
'bin': {
'bash': 'bash content',
'python': 'python content',
'perl': 'perl content',
'find': 'find content',
'share': {
'foo': 'hello foo',
'bar': 'hello bar',
'lib': {
'asd': 'foo bar'
}
}
},
/*
'C:': {
'foo': 'hello foo'
},
//*/
'foo': {
'page.html': '<html></html>',
'style.css': 'body { overflow: scroll; }'
},
'bar.svg': 'Foo',
'baz.txt': 'Hello',
'1.json': '',
'2.js': '',
'3.css': '',
'4.doc': '',
'5.html': '',
'6.pdf': '',
'7.jpg': '',
'8.gif': '',
'9.php': '',
'10.xls': '',
'11.ppt': ''
}
7. Active the file browser.
var browse = $('#browser').dialog().browse({
root: '/',
separator: '/',
dir: function(path, callback) {
dir = get(path);
if ($.isPlainObject(dir)) {
var result = {files:[], dirs: []};
Object.keys(dir).forEach(function(key) {
if (typeof dir[key] == 'string') {
result.files.push(key);
} else if ($.isPlainObject(dir[key])) {
result.dirs.push(key);
}
});
callback(result);
}
},
item_class: function(path, name) {
return name.match(/[A-Z]:/) ? 'drive' : '';
},
open: function(filename) {
var file = get(filename);
if (typeof file == 'string') {
alert(file);
} else {
throw new Error('Invalid filename');
}
},
on_change: function() {
$('#path').val(this.path());
}
});
8. All default settings for the file browser.
var browse = $('#browser').dialog().browse({
// returns a promise that resolve to object {files: <ARRAY>, dirs: <ARRAY>} or return that object
dir: function() {
return $.when({files:[], dirs: []});
},
// custom name
name: 'default',
// root of the filesystem
root: '/',
// path separator
separator: '/',
// shows labels
labels: true,
// callback functions
change: $.noop,
init: $.noop,
open: $.noop,
rename: $.noop,
create: $.noop,
remove: $.noop,
copy: $.noop,
exists: $.noop,
upload: $.noop,
error: $.noop,
// returns addional classes for the element
item_class: $.noop,
// delay in milliseconds
rename_delay: 300,
dbclick_delay: 2000,
// return object which keys are names of the context menu and values are other object
menu: function(type) {
return {};
},
// refresh interval
refresh_timer: 100
});
9. API methods.
// returns current path browse.path() // returns settings name browse.name() // goes back browse.back() // destroy the plugin browse.destroy() // create a new directory create(type, [path]) // selected files/directories for later paste browse.copy() // like copy but when call paste it will remove old items browse.cut() // if cut was executed it will call settings.rename and if copy was called it will call settings.copy and then refresh all views with the same directory browse.paste() // goes up one directory browse.up() // rerenders the directory view browse.show() // returns new path based on settings.separator and settings.root, accept any number of arguments browse.join() // splits the path browse.split() // calls function for each file/directory the signature for callaback function: function(path_part, last, return_value) the function return value from last call to callback function, 3rd argument is a value from previous call to callback function. walk(filename, fn)
Changelog:
v0.8.4 (2021-05-09)
- fix exception on dragging
v0.8.3 (2021-02-04)
- check if menu plugin from jQuery exists before calling
v0.8.2 (2018-09-06)
- fix rename when file start with the same string
- fix jQuery version
v0.8.1 (2018-06-11)
- DOC updated
v0.8.0 (2017-09-10)
- context menu
- allow to create new file/directory
- markdown icon
- few bug fixes
- Dynamic overwritable contextmenu
- Check if file/directory exists
v0.7.3 (2017-09-02)
- fix error while reading `then` from dir if don't return a promise
- prevent opening file on enter when focus in adress bar
v0.7.1 (2017-04-17)
- Drag & Drop upload + defer based processing
- Some missing changes
v0.6.6 (2016-12-27)
- Fix opening opening file/directories by double click and drag and drop in Firefox
v0.6.5 (2016-12-22)
- Fix enter on active icon
- Small css fixes and add copyright notice to minified css files
- Fix renaming and refresh all widgets if they have same name and path
v0.6.0 (2016-12-21)
- Fix draging selection
- Improve keyboard navigation
- Add selection by space
- Renaming with clicking on name of the file/directory
- Fix rectangle selection when icons don't take all space of the container
v0.5.2 (2016-12-19)
- Fix selection of the widget
- Fix rectangle selection when parent of the widget is scrolled down
v0.5.0 (2016-12-18)
- allows for Dragging selection
v0.4.0 (2016-12-12)
- fix cut/copy, drag and drop
v0.3.0 (2016-12-11)
- Moving/copying files using copy/cut/paste and new api methods
v0.2.0 (2016-12-09)
- Added missing resolve
This awesome jQuery plugin is developed by jcubic. For more Advanced Usages, please check the demo page or visit the official website.
