<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
).