j-Parts

Αυτό το περιεχόμενο μπορεί να χειριστεί πολλαπλές parts αποθηκευμένες στο Array και να επικεντρωθεί σε ένα συγκεκριμένο μέρος.

ΕΠΙΤΡΟΦΗ:

• Το μέγεθος της γονικής περιοχής parent {String} λόγω του μερικού μεγέθους (προεπιλεγμένο: auto)
• Φυσικά, η οριζόντια περιθώριο margin {Number} (προεπιλεγμένη: 0)
• create {String} ένα σύνδεσμο με το function(part), εκτελείται εάν δημιουργηθεί το μέρος (αποκαλείται μία φορά)
• Το focus {String} συνδέεται με το function(part), εκτελείται εάν το μέρος εστιάζει
• Το close {String} συνδέεται με το function(part), εκτελείται εάν το τμήμα είναι κλειστό

Καλό να γνωρίζεις 1:

• Οι φράσεις ~PATH~ αντικαθίστανται αυτόματα από item.path
• Οι φράσεις ~ID~ αντικαθίστανται αυτόματα από item.id

Ετικέτες Ειδικότητα:

• item.id {String} Πολύ σημαντικό, αναγνωριστικό μέρους
• item.blur {String/Function(el, item)} προαιρετική, μια σύνδεση με το function(element, item) αν το μέρος είναι εστιασμένο
• item.focus {String/Function(el, item)} ή item.reload {String} προαιρετική, μια σύνδεση με το function(element, item) εάν το μέρος είναι εστιασμένο
• item.remove {String/Function(el, item)} προαιρετική, σύνδεση με το function(element, item) εάν το μέρος αφαιρείται
• item.html {String}: Περιεχόμενο HTML ή χρήση item.url
• Η διεύθυνση URL του item.import {String} για το περιεχόμενο
• Το item.path {String} αντικαθιστά αυτόματα όλες τις φράσεις του ~PATH~.
• item.delay {Number} καθυστέρηση για την αφαίρεση της κατηγορίας invisible
• NEW item.attrd {Object} προσθέτει χαρακτηριστικά data-key στο στοιχείο

Η επέκταση του συστατικού:

• Το item.focused {Boolean} καθορίζει αν το μέρος είναι εστιασμένο ή όχι
• Παρουσίαση item.element {jQuery}

Μέθοδοι:

• Το component.close(id) κλείνει
• Το component.focus(id) επικεντρώνεται
• component.rename(id, name, [icon]) ανακαλείται

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

<ui-component name="exec">

	<ui-bind path="myparts" config="template" class="block">
		<script type="text/html">
			{{ foreach m in value }}
			<button class="exec" data-exec="changepart" data-id="{{ m.id }}"><i class="ti ti-times exec mr5" data-prevent="true" data-exec="closepart"></i>{{ m.name }}</button>
			{{ end }}
		</script>
	</ui-bind>
	<br />

	<div style="width:600px;height:300px;border:1px solid #E0E0E0">
		<ui-component name="parts" path="myparts" config="parent:auto"></ui-component>
	</div>

</ui-component>

<script>
	var myparts = [];

	myparts.push({ id: '1', name: 'Part 1', html: '<div class="padding">Part 1</div>' });
	myparts.push({ id: '2', name: 'Part 2', html: '<div class="padding">Part 2</div>' });
	myparts.push({ id: '3', name: 'Part 3', html: '<div class="padding">Part 3</div>' });

	function changepart(el ,e) {
		var id = ATTRD(el);
		SETTER('parts/focus', id);
	}

	function closepart(el, e) {
		var id = ATTRD(el);
		SETTER('parts/close', id);
	}

</script>