Экспромптум

Контролы
<input class="number" data-xp="
	type: 'number',
	min: 0,
	max: 10,
	step: 2
"/>
<input type="password"/>
<span class="datemonth">
	<input/>
</span>

<br/><br/>

<span>
	<input class="datemonth picker" data-xp='{min: new Date(2016,4,1), max: new Date(2018,3,1)}'/>
</span>


<span class="date">
	<input/>
</span>

<br/><br/>

<span>
	<input name="date_picker_example" class="date picker" data-xp='{min: new Date(2016,4,1), max: new Date(2018,3,1)}'/>
</span>


<span class="datetime">
	<input/>
</span>

<br/><br/>

<span>
	<input name="date_picker_example4" class="datetime picker" value="11:00" data-xp='{ "minute_round": 10}'/>
</span>


<input class="email"/>
<input class="phone"/>
<div class="option">
	<input type="radio" name="radio" value="1" id="radio1" checked="true"/><label for="radio1">Пункт 1</label>
</div>
<div class="option">
	<input type="radio" name="radio" value="2" id="radio2"/><label for="radio2">Пункт 2</label>
</div>

<p><button id="append_radio_option">Добавить пару пунктов</button></p>

<script>
	(function(){
		xP();

		$('#append_radio_option').click(function(){
			var select = xP('[name=radio]'), options = [],
				i = select.length + 1, ii = i + 2;

			for(; i < ii; i++)
				options.push(['Пункт ' +  i, i]); // или {label: 'Пункт ' +  i, value: i}

			select.last().append(options);
		});
	})();
</script>

<select name="select" size="5">
	<option value="1" selected="true">Пункт 1</option>
	<option value="2">Пункт 2</option>
</select>

<p><button id="append_select_option">Добавить пару пунктов</button></p>

<script>
	(function(){
		xP();

		$('#append_select_option').click(function(){
			var select = xP('[name=select]'), options = [],
				i = select.last()._param('options').length + 1, ii = i + 2;

			for(; i < ii; i++)
				options.push(['Пункт ' +  i, i]); // или {label: 'Пункт ' +  i, value: i}

			select.last().append(options);
		});
	})();
</script>

<style>
.selectus .comment {display: block; font-size: 80%;}
.selectus .select .comment {display: none;}
</style>

<p class="selectus">
	<input type="radio" name="s_radio" value="1" id="s_radio1" checked="true"/>
	<label for="s_radio1">Пункт 1<ins class="comment">Комментарий к пункту 1</ins></label>

	<input type="radio" name="s_radio" value="2" id="s_radio2"/>
	<label for="s_radio2">Пункт 2<ins class="comment">Комментарий к пункту 2</ins></label>
</p>

<p class="selectus">
	<input type="checkbox" name="s_checkbox" value="1" id="s_checkbox1" checked="true"/>
	<label for="s_checkbox1">Пункт 1<ins class="comment">Комментарий к пункту 1</ins></label>

	<input type="checkbox" name="s_checkbox" value="2" id="s_checkbox2" checked="true"/>
	<label for="s_checkbox2">Пункт 2<ins class="comment">Комментарий к пункту 2</ins></label>
</p>

<label>База данных</label>
<span class="field_control">
	<input name="db_name" list="db_id" data-xp="search_from_start: false"/>
	<select name="db_id" id="db_id">
		<option value="1">MS SQL</option>
		<option value="2">MySQL</option>
		<option value="3">Oracle</option>
		<option value="4">PostgreSQL</option>
	</select>
</span>
<div class="sheets">
	<label class="tab" for="example_1">Поле для числа</label>
	<label class="tab" for="example_2">Поле для пароля</label>
	...
	<div id="example_1" class="sheet">...</div>
	<div id="example_2" class="sheet">...</div>
	...
</div>

Можете наблюдать на этой странице.

<label for="foldable1"><span class="pseudo_link underline">Пункт 1</span></label>
<div class="foldable" id="foldable1">
	<p>Содержимое пункта 1.</p>
</div>
<br/><br/>
<label for="foldable2" class="unfolded"><span class="pseudo_link underline">Пункт 2</span></label>
<div class="foldable" id="foldable2">
	<p>Содержимое пункта 2 (показано сразу, class="unfolded").</p>
</div>

Содержимое пункта 1.



Содержимое пункта 2 (показано сразу, class="unfolded").

Тип контрола определяется значением свойства type в атрибуте data-xp или CSS-селектором (все селекторы указаны в документации, например, для числового поля он выглядит так: input.number, .number input).



Заказать дизайн...