j-Modificator

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Acest component poate modifica comportamentul elementului în conformitate cu schema predefinită. componentul poate fi acoperit pe un element body (dacă este singleton) și este optimizat pentru performanță.

Atributele susținute:

data-m="SOME.PATH" - componenta va urmări acest drum
data-m-schema="schema_name" - modificatorul utilizează acest schemă înregistrată
data-m-selector=".ui-textbox-label" (opțional) un element țintă va fi un element în funcție de selector (default: null)
NEW UPDATE: data-m="SOME.PATH + schema_name" Acest atribut poate conține path și schema_name împreună

Cursuri susținute:

modify permite evenimentul click pentru acest element e.type va conține tipul click

Schema de înregistrare:

Puteți defini mai multe scheme

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
});

Scopul:

j-Modificator susţinere jComponent Fiecare traseu trebuie să conţină ? Întrebări despre e.g data-m="?.name" care este înlocuită cu o cale de scară. Important: jComponent Scope trebuie să conțină unele jComponente.

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

Utilizați-l cu <ui-component name="modificator">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>