j-Directory

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Είναι παρόμοιο με το j-Suggestion, αλλά έχει βελτιωμένο σχεδιασμό και υποστηρίζει πιο έξυπνα χαρακτηριστικά.

Σιγκλέτο
Δουλεύει με τα αγγίγματα
Υποστήριξη - Dark Mode

ΕΠΙΘΥΝΗ: Κατά προεπιλογή, αυτό το στοιχείο παρέχει μια αξία ως κείμενο από την ιδιότητα name.

Μέθοδοι:

Μέθοδος: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} μια λίστα στοιχείων (τυπός String σημαίνει σύνδεση με την πηγή δεδομένων)
options.offsetX {Number} προαιρετική, x offset (προεπιλεγμένη: 0)
options.offsetY {Number} προαιρετική, y offset (προεπιλεγμένη: 0)
options.offsetWidth {Number} προαιρετική, width offset (προεπιλεγμένη: 0)
options.placeholder {String} προαιρετική, ένα χώρο για το πεδίο αναζήτησης
NEW options.height {Number} προαιρετική, ύψος του δοχείου (προεπιλεγμένη: 180)
options.render {Function} προαιρετική, μια λειτουργία για την εξατομικευμένη αναπαραγωγή του στοιχείου function(item, text) πρέπει να επιστρέψει το HTML
Εναλλακτικά, η τιμή options.custom {Boolean/String} μπορεί να επιστρέψει μια τιμή που δεν ορίζεται στο options.items, προεπιλογή: false
Εναλλακτικά options.minwidth {Number}, ελάχιστη πλάτος, προεπιλεγμένη 200
options.maxwidth {Number} επιλογή, μέγιστο πλάτος, προεπιλεγμένο infinite
Το options.callback(selected_item, element, iscustom, e) {Function} εκκινείται όταν ο χρήστης κάνει κλικ στο στοιχείο
options.key {String} προαιρετική, μια προεπιλεγμένη τιμή key για την τιμή text (προεπιλογή: name)
options.empty {String} επιλογή, προσθέτει κενό πεδίο
Το options.exclude {Function} είναι προαιρετικό, μπορεί να αποκλείσει τα στοιχεία και πρέπει να επιστρέψει ένα boolean function(item) { return item.id !== 100 }
options.close {Function} επιλογή, μπορεί να καθορίσει το κλείσιμο του πίνακα
Το options.search {Boolean/String} είναι προαιρετικό, μπορεί να κρύψει το πεδίο αναζήτησης (προεπιλογή: true) ή το {String} (κλειδί όνομα) μπορεί να χαρτογραφήσει μια τιμή για την αναζήτηση
Το options.selected {Object} είναι προαιρετικό, μπορεί να περιέχει επιλεγμένη τιμή (προεπιλογή: undefined)
options.align {String} προαιρετική, left (προεπιλεγμένη), right ή center
options.position {String} προαιρετική, top (προεπιλεγμένη), bottom
Η επιλογή options.raw {Boolean} είναι προαιρετική, αυτή η επιλογή εμποδίζει την αποφυγή χαρακτήρων (διαφορετικά: το περιεχόμενο HTML θα επιτρέπεται στις ετικέτες των στοιχείων, προεπιλεγμένο: false)
options.classname {String} επιλογή, προσαρμοσμένη κατηγορία δοχείων για όλα τα αντικείμενα
Η απόλυτη θέση λειτουργεί μόνο εάν το options.element δεν έχει οριστεί
- options.x {Number} απόλυτη θέση X
- Πιστοποίηση options.y {Number} και
options.checkbox {Boolean} επιλογή, επιτρέπει τα κουτιά ελέγχου
options.checked {Array String} επιλογή, αναγνωριστές ελέγχονται αντικείμενα
- Στόχος για options.items {Function(q, next)}
- Το Callback επιστρέφει μόνο τους πρώτους αναγνωριστές Array {String}
NEW options.template {String} προαιρετικό, προσαρμοσμένο πρότυπο Tangular για παράδειγμα {{ name }} (προεπιλεγμένη: μηδέν)
NEW options.fuzzy {Boolean} προαιρετική, μπορεί να απενεργοποιήσει την αναζήτηση fuzzy (προεπιλεγμένη: true)

Μέθοδος: component.hide()

ΕΠΙΤΡΟΦΗ:

placeholder - ένας τόπος για την είσοδο αναζήτησης
create - ένας χώρος για την ετικέτα Create (προεπιλεγμένη: Create)

Υποστηριζόμενα πεδία:

name {String} ένα όνομα ετικέτας
template {String} προαιρετικό, προσαρμοσμένο πρότυπο Tangular
classname {String} επιλογή, προσθέτει πρόσθετες τάξεις στο στοιχείο <li>
disabled {Boolean} επιλογή, μπορεί να απενεργοποιήσει το στοιχείο
selected {Boolean} επιλογή, επιλέγει το στοιχείο

Σχεδιασμός μέσω Tangular:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', template: '<b>{{ name }}</b>' });

Η διαμόρφωση μέσω της συνήθους λειτουργίας:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js' });
opt.push({ name: 'Express.js' });
opt.push({ name: 'Koa.js' });
opt.render = function(item, name) {
	return '<b>' + name + '</b>';
};

Προσθήκη της κλάσης:

var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', classname: 'your_class_name' });

Ετικέτες αναζήτηση server:


var opt = {};

opt.element = your_element;

opt.items = function(search, next) {
	next([{ name: 'Item 1' }, { name: 'Item 2' }]);
};

opt.callback = function(selected) {
	console.log(selected);
};

SETTER('directory/show', opt);

Καλό να ξέρεις:

Εάν το checkboxes:true τότε το συστατικό επεκτείνει τα στοιχεία προσθέτοντας ένα χρονοδιάγραμμα selectedts {Number} λόγω της παραγγελίας

Χρησιμοποιήστε το με <ui-component name="directory">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

example.html

<style>
	body { background-color: #F0F0F0; }
</style>

<ui-component name="directory" config="placeholder:Search ..."></ui-component>

<div class="container">
	<div><a href="javascript:void(0)" data-name="classic">Open directory - classic</a></div>
	<div><a href="javascript:void(0)" data-name="checkboxes">Open directory - checkboxes</a></div>
</div>

<script>
	$(document).on('click', 'a', function() {


		var opt = {};
		opt.element = $(this);

		if (opt.element.attrd('name') === 'checkboxes') {
			opt.checkbox = true;
			opt.items = [{ name: 'Total.js', selected: true }, { name: 'Express.js', selected: true }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];
		} else
			opt.items = [{ name: 'Total.js', template: '<b>{{ name }}</b>' }, { name: 'Express.js' }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];

		opt.callback = function(value) {
			if (opt.checkbox)
				console.log('SELECTED:', value);
			else
				console.log('CLICKED:', value);
		};

		SETTER('directory/show', opt);
	});
</script>