j-Detach

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

Το συστατικό μπορεί να αποσυνδέσει/αποσυνδεθεί όλα τα παιδιά (τα στοιχεία HTML). Για παράδειγμα, εάν έχετε στοιχεία μέσα σε ένα πάνελ, μπορείτε να μετακινήσετε τα στοιχεία για παράδειγμα στο j-Windows.

Το στοιχείο watch δρόμο {Boolean} και αν η τιμή περιέχει true, τα στοιχεία θα αποσυνδεθούν διαφορετικά.

ΕΠΙΤΡΟΦΗ:

detach {String} Ένας σύνδεσμος με το function(children, element)
attach {String} Ένας σύνδεσμος με το function(children, element)
remove {String} Ένας σύνδεσμος με το function(children)

Το detach εκτελείται όταν το περιεχόμενο αποσυνδέεται
Το attach εκτελείται όταν το περιεχόμενο πρέπει να επιστρέψει
Το remove εκτελείται όταν αφαιρείται το συστατικό (ή ένα γονικό στοιχείο)

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

example.html

<style>
	body { padding: 0; margin: 0; overflow: hidden; }
</style>

<ui-component name="windows" path="common.windows"></ui-component>

<div class="center padding"><button onclick="togglewindow()">Toggle windowed mode</button></div>

<div style="margin:30px auto;border:1px solid #E0E0E0;max-width:500px;width:100%;min-height:100px;">
	<ui-component name="detach" path="common.detach" config="detach:el_detach;attach:el_attach;remove:el_remove">
		<div class="padding">
			<h2>Your content</h2>
			<div><img src="https://cdn.componentator.com/logo.svg" width="200" /></div>
		</div>
	</ui-component>
</div>

<script>

	var common = {};

	common.detach = false;
	common.windows = [];

	function el_detach(children, element) {

		var id = 'mywin';
		var div = document.createElement('DIV');

		var win = {};
		win.id = id;
		win.cachekey = id;
		win.offset = { x: 200, y: 100, width: 840, height: 500, minwidth: 450, minheight: 300 };
		win.actions = { move: true, close: true, resize: true, maximize: true, minimize: false, autosave: true };
		win.title = 'Example';
		win.html = div;

		win.close = function(next) {
			SET('common.detach', false);
			next();
		};

		for (var m of children)
			div.appendChild(m);

		PUSH('common.windows', win);
	}

	function el_attach(children, element) {

		var id = 'mywin';

		for (var m of children)
			element[0].appendChild(m);

		common.windows.splice(common.windows.findIndex('id', id), 1);
		UPD('common.windows');
	}

	function el_remove(children) {
		var id = 'mywin';
		var index = common.windows.findIndex('id', id);
		if (index !== -1) {
			common.windows.splice(index, 1);
			UPD('common.windows');
		}
	}

	function togglewindow() {
		var path = 'common.detach';
		var val = GET(path);
		SET(path, !val);
	}

</script>