j-Modificator

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

Αυτό το συστατικό μπορεί να τροποποιήσει τη συμπεριφορά του στοιχείου σύμφωνα με το προκαθορισμένο σχήμα.Το συστατικά μπορεί να χτυπηθεί σε ένα στοιχείο body (επειδή είναι singleton) και βελτιστοποιείται για την απόδοση.

Υποστηριζόμενα χαρακτηριστικά:

data-m="SOME.PATH" - το συστατικό θα παρακολουθήσει αυτό το μονοπάτι
data-m-schema="schema_name" - ο τροποποιητής χρησιμοποιεί αυτό το εγγεγραμμένο σχήμα
data-m-selector=".ui-textbox-label" (επιλεκτικά) ένα στοχευμένο στοιχείο θα είναι ένα στοιχείο σύμφωνα με τον επιλέκτη (προσδιορισμός: null)
NEW UPDATE: data-m="SOME.PATH + schema_name" Αυτό το χαρακτηριστικό μπορεί να περιέχει path και schema_name μαζί

Υποστηριζόμενες τάξεις:

Το modify επιτρέπει το γεγονός click για αυτό το στοιχείο e.type θα περιέχει τον τύπο click

Σχεδιασμός καταγραφής:

Μπορείτε να ορίσετε πολλαπλά σχήματα

instance.register('schema_name', function(value, element, e) {

    // value: according to the "data-m"
    // element: jQuery element (target)
    // e: contains additional data { type: 'init/click/bind' } and can be used as a repository

    // here you can modify the element
});

Στόχοι:

j-Modificator Υποστήριξη jComponent Ο καθένας, όμως, πρέπει να περιέχει το ? Ερώτηση για το Γ.Γ. data-m="?.name" Η οποία αντικαθίσταται από ένα πεδίο. Σημαντικό: jComponent Το scope πρέπει να περιέχει κάποια jComponents.

<div data-scope="user">
	<div data---="textbox__?.name">Your name</div>
	<div data-m="?.name"></div>
</div>

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

example.html

<ui-component name="modificator">
	<div><a href="javascript:void(0)" class="modify" data-m="obj.a" data-m-schema="link">Click 1</a> second: <a href="javascript:void(0)" class="modify" data-m="obj.a" data-m-schema="link">Click 2</a></div>
	<br />
	<div><button class="modify" data-m="obj.b" data-m-schema="button"><i></i><b>Submit</b></button></div>
</ui-component>

<script>

	// v20 STYLE(), v19 CSS()
	(W.STYLE?W.STYLE:W.CSS)('.sending{color:black;font-weight:bold;cursor:not-allowed}.done{color:green;font-weight:bold;}button .ti{margin-right:5px;}');

	// Register modificator schemas

	SETTER(true, 'modificator', 'register', 'link', function(value, element, e) {
		switch (e.type) {
			case 'init':
				break;
			case 'click':
				element.aclass('sending').html('Sending...');
				break;
			default:
				if (value != null)
					element.rclass().aclass('done').html(value);
				break;
		}

	});

	SETTER(true, 'modificator', 'register', 'button', function(value, element, e) {
		switch (e.type) {
			case 'init':
				e.icon = element.find('i');
				e.html = element.html();
				break;
			case 'click':
				e.icon.rclass().aclass('ti ti-spinner ti-refresh');
				element.prop('disabled', true).find('b').html('Sending...');
				break;
			default:
				e.icon.rclass();
				element.prop('disabled', false);
				element.find('b').html(e.html);
				if (value != null)
					e.icon.aclass('ti ' + (value ? 'ti-check-circle' : 'ti-times-circle'));
				break;
		}
	});

	var obj = {};

	obj.a = null;
	obj.b = null;

	// Only for test
	$(document).on('click', '.modify', function(e) {
		var path = $(this).attr('data-m');
		if (path === 'obj.a') {
			SET(path, 'Success', 3000);
		} else {
			SET(path, true, 3000);
			SET(path, null, 5000);
		}
	});


</script>