j-Folder

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Die Komponente kann einen Inhalt wie einen Dateibrowser rendern. path muss in der Form vorliegen, z. B. Directory/Directory/File. Lernen Sie aus Beispielen.

Konfiguration:

up {String} eine Beschriftung für die Auf-Taste (Standard: ..)
delimiter {String} ein Trennzeichen für den Pfad (Standard: /)
root {String} eine Bezeichnung für das erste Element im Breadcrumb (Standard: Root)
scrollbar {Boolean} aktiviert die benutzerdefinierte Bildlaufleiste (Standard: true)
scrollbarY {Boolean} zeigt immer die Y-Bildlaufleiste an (Standard: false)
delimiter {String} ein Trennzeichen für den Pfad (Standard: /)
options {String} ein Pfad zur Methode function(item, el) (Benutzer muss auf die rechte Schaltfläche klicken)
click {String} ein Pfad zur Variablen oder Methode function(item) (Benutzer muss auf das Element klicken)
checked {String} ein Pfad zur Variablen oder Methode function(checked_items, component) (Benutzer muss das Kontrollkästchen aktivieren)
browse {String} IMPORTANT: ein Pfad zur Methode function(path, next(ARRAY), [item]), die einen Inhalt für die Komponente zurückgeben muss
parent {String} optional, ein Behälter mit fester Höhe, kann window sein. Standardwert: component.element()
margin {Number} optional, ein oberer/unterer Rand zusammen (Standard: 0)
drop {String} optional, ein Pfad zur Methode, die ausgeführt wird, wenn eine Datei per Drag&Drop verschoben wird
key {String} optional, ein Schlüsselname zum Erstellen des Pfades (Standard: name)
raw {Boolean} optional, deaktiviert die HTML-Kodierung name (Standard: false)
NEU: contextmenu {String} optional, ein Pfad zur Methode function(item, el, e) (wenn ein Benutzer das Kontextmenü anzeigt)

function fn_browser(path, next, item) {

	// @path {String} paths divided according to the "config.delimiter"
	// @next {Function(Array)} importat: this function expects array with items
	// @item {Object} can be null

	var arr = [];

	// Object for array:
	// obj.name {String} a label/name
	// obj.checkbox {Boolean} enables checkbox (default: false)
	// obj.checked {Boolean} item will be checked
	// obj.icon {String} a icon for item
	// obj.type {Number} determines a type of item (1: directory, other: file)
	// obj.classname {String} adds a CSS class onto "label" element

	// Good to know:
	// Only directories can be drilled

	// Example:
	arr.push({ name: 'Node.js', checkbox: true, type: 1, icon: 'folder' });
	arr.push({ name: 'Client-Side', checkbox: true, type: 1, icon: 'folder' });

	next(arr);
	// next(array, noscroll);
}

Verwenden Sie es mit <ui-component name="folder">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback (standardmäßig das CDN Componentator) herunter. Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

<div class="container">
	<br />
	<ui-component name="folder" path="currentpath" config="browse:fn_browse;checked:fn_checked;click:fn_click" style="height:500px"></ui-component>
	<br />
</div>

<script>

	var currentpath = 'Frameworks/Node.js';

	function fn_browse(path, next, item) {

		var arr = [];

		switch (path) {
			case 'Frameworks':
				arr.push({ name: 'Node.js', checkbox: true, type: 1, icon: 'folder' });
				arr.push({ name: 'Client-Side', checkbox: true, type: 1, icon: 'folder' });
				break;
			case 'Frameworks/Node.js':
				arr.push({ name: 'Total.js', checkbox: true, checked: true, icon: 'file' });
				arr.push({ name: 'Express.js', checkbox: true, icon: 'file' });
				arr.push({ name: 'Koa.js', checkbox: true, icon: 'file' });
				arr.push({ name: 'Meteor.js', checkbox: true, icon: 'file' });
				break;
			case 'Frameworks/Client-Side':
				arr.push({ name: 'React', checkbox: true, icon: 'file' });
				arr.push({ name: 'Vue', checkbox: true, icon: 'file' });
				arr.push({ name: 'jComponent', checkbox: true, checked: true, icon: 'file' });
				arr.push({ name: 'Angular.js', checkbox: true, icon: 'file' });
				arr.push({ name: 'jQuery', checkbox: true, icon: 'file' });
				break;
			default:
				arr.push({ name: 'Frameworks', checkbox: true, type: 1, icon: 'folder' });
				arr.push({ name: 'Item 1', checkbox: true, icon: 'file' });
				arr.push({ name: 'Item 2', checkbox: true, icon: 'file' });
				arr.push({ name: 'Item 3', checkbox: true, icon: 'file' });
				break;
		}

		next(arr);
	}

	function fn_click(item) {
		console.log('click', item);
	}

	function fn_checked(arr) {
		console.log('checked', arr);
	}

</script>