j-FloatingInput

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Синглът
Поддържат тъмния режим

Методи:

Методът: component.show(options)

options.element {Element/jQuery Element}
options.offsetX {Number} опция, x отстъпка (дефолт: 0)
options.offsetY {Number} опция, y отстъпка (дефолт: 0)
options.offsetWidth {Number} опция, width отстъпка (дефолт: 0)
options.placeholder {String} опция, място за търсене
options.minwidth {Number} опция, минимална ширина, стандартна 200
options.maxwidth {Number} опция, максимална ширина, стандартна infinite
options.maxlength {Number} опция, максимална дължина на стойността, стандартно 50
options.callback(value, element) {Function} се освобождава, когато потребителят кликне върху елемента
options.icon {String} опция, Font-Awesome икона
options.close {Function} опционално, може да определи затварянето на панела
options.align {String} опционален, left (предварително), right или center
options.value {String} опционална стойност за вход
options.position {String} опционален, top (предварително), bottom
options.summary {String} допълнително съдържание
options.monospace {Boolean} позволява монопространствен шрифт
options.select {Boolean} Избор на текст
NEW options.multiline {Boolean} позволява мултилин
NEW options.height {Number} височина за мултилин (предварително: 100)

Методът: component.hide()

Конфигуриране:

placeholder - място за вход

Използвайте го с <ui-component name="floatinginput">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

example.html

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

<ui-component name="floatinginput" config="placeholder:Type something ..."></ui-component>

<div class="container">
	<a href="javascript:void(0)">Type your name</a>
</div>

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

		var opt = {};
		opt.element = this;
		opt.callback = function(value) {
			console.log('CLICK', value);
		};

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