j-InlineProperties

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Szingapúr

konfiguráció:

close {String} a záró gomb címkéje (default: Close)
dateformat {String} egy alapértelmezett dátumformátum (default: [date])
dirsearch {String} egy alapértelmezett helytartó a j-Directory (alapértelmezés: Search)
width {Number} egy alapértelmezett szélesség (default: 200)

Használat

var opt = {};

// opt.offsetX {Number}      : adds X offset (default: 0)
// opt.offsetY {Number}      : adds Y offset (default: 0)
// opt.align {String}        : align "left" (default), "center" or "right"
// opt.position {String}     : position "top" (default) or "bottom"
// opt.class {String}        : adds class to the parent

opt.element = YOUR_ELEMENT;
// or if you want to use a fixed position:
// opt.x {Number}            : "x" position
// opt.y {Number}            : "y" position

opt.items = []
opt.items.push({ id: 'firstname', name: 'First name', type: 'string', value: 'Peter' });
opt.items.push({ id: 'lastname', name: 'Last name', type: 'string', value: 'Širka', placeholder: 'String' });
opt.items.push({ id: 'age', name: 'Age', type: 'number', value: 33 });
// |---- id {String}               : identifier/a property name
// |---- name {String}             : label
// |---- value {Object}            : a value
// |---- type {String}             : supported types: string, number, boolean, icon, color, date, list
// |---- items {String/Array}      : a list for "list" type

// If you want to assign values from a model instead of filling a value in the "items" field, you can use:
// opt.value {Object}

opt.callback = function(model, changed) {
	// @model {Object}
	// @changed {String Array}
	console.log(model);
};

SETTER('inlineproperties/show', opt);

Használja a <ui-component name="inlineproperties">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

example.html

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

<ui-component name="LAZY directory"></ui-component>
<ui-component name="LAZY colorpicker"></ui-component>
<ui-component name="LAZY icons"></ui-component>
<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="inlineproperties" config="dateformat:yyyy-MM-dd"></ui-component>

<div class="container">
	<div class="row">
		<div class="col-xs-4 col-xs-offset-4" style="text-align:center">
			<a href="javascript:void(0)" style="color:black;font-size:20px"><i class="ti ti-ellipsis-v"></i></a>
		</div>
	</div>
</div>

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

		var cities = [{ id: 2, name: 'Banská Bystrica' }, { id: 3, name: 'Bratislava' }];

		var opt = {};
		opt.items = [];
		opt.items.push({ id: 'firstname', name: 'First name', type: 'string', value: 'Peter' });
		opt.items.push({ id: 'lastname', name: 'Last name', type: 'string', value: 'Širka' });
		opt.items.push({ id: 'age', name: 'Age', type: 'number', value: 33 });
		opt.items.push({ id: 'birth', name: 'Birth date', type: 'date', value: NOW });
		opt.items.push({ id: 'newsletter', name: 'Newsletter', type: 'boolean', value: true });
		opt.items.push({ id: 'city', name: 'City', type: 'list', value: 2, items: cities, dirsearch: 'Search city' });
		opt.items.push({ id: 'color', name: 'Color', type: 'color', value: '#e73323' });
		opt.items.push({ id: 'icon', name: 'Icon', type: 'icon', value: 'ti ti-home' });

		opt.align = 'center';
		opt.element = this;

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

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