Экспромптум

Повторения
<form>
	<p class="field">
		<input name="name" data-xp="repeat: true"/>

		<button class="repeat_append_button">+</button>
		<button class="repeat_remove_button">&minus;</button>
	</p>
</form>

<form>
	<p class="fields" data-xp="name: 'person', repeat: true">
		<input name="first_name" placeholder="Имя"/>
		<input name="last_name" placeholder="Фамилия"/>

		<button class="repeat_append_button">+</button>
		<button class="repeat_remove_button">&minus;</button>
	</p>
</form>

<form>
	<div class="fields" data-xp="name: 'person', repeat: true">
		<input name="first_name" placeholder="Имя"/>
		<input name="last_name" placeholder="Фамилия"/>

		<p class="fields" data-xp="name: 'contact', repeat: true">
			<input name="contact"/>
			<select name="contact_type">
				<option>телефон</option>
				<option>эл. почта</option>
			</select>

			<button class="repeat_append_button">+</button>
			<button class="repeat_remove_button">&minus;</button>
		</p>

		<p>
			<button class="repeat_append_button">Добавить контактное лицо</button>
			<button class="repeat_remove_button">Удалить</button>
		</p>
	</div>
</form>

<form>
	<!-- Необходим reset, если нет шаблона. -->
	<div class="fields" data-xp="name: 'person', repeat: {reset: true}">
		<input name="first_name" placeholder="Имя" value="Сидор"/>
		<input name="last_name" placeholder="Фамилия" value="Иванов"/>

		<p class="fields" data-xp="name: 'contact', repeat: {reset: true}">
			<input name="contact" value="si@mail.some"/>
			<select name="contact_type">
				<option>телефон</option>
				<option selected="true">эл. почта</option>
			</select>

			<button class="repeat_append_button">+</button>
			<button class="repeat_remove_button">&minus;</button>
		</p>

		<p class="fields" data-xp="name: 'contact', repeat: {reset: true}">
			<input name="contact" value="ivanov@mail.some"/>
			<select name="contact_type">
				<option>телефон</option>
				<option selected="true">эл. почта</option>
			</select>

			<button class="repeat_append_button">+</button>
			<button class="repeat_remove_button">&minus;</button>
		</p>

		<p>
			<button class="repeat_append_button">Добавить контактное лицо</button>
			<button class="repeat_remove_button">Удалить</button>
		</p>
	</div>

	<div class="fields" data-xp="name: 'person', repeat: {reset: true}">
		<input name="first_name" placeholder="Имя" value="Иван"/>
		<input name="last_name" placeholder="Фамилия" value="Сидоров"/>

		<!-- Вложенным повторениям необходимо задать суффиксы. -->
		<p class="fields" data-xp="name: 'contact[1]', repeat: {reset: true}">
			<input name="contact[1][0]" value="is@mail.some"/>
			<select name="contact_type[1][0]">
				<option>телефон</option>
				<option selected="true">эл. почта</option>
			</select>

			<button class="repeat_append_button">+</button>
			<button class="repeat_remove_button">&minus;</button>
		</p>

		<p>
			<button class="repeat_append_button">Добавить контактное лицо</button>
			<button class="repeat_remove_button">Удалить</button>
		</p>
	</div>
</form>

<form autocomplete="off">
	<div class="fields" data-xp="name: 'education', repeat: true">
		<input name="institute" placeholder="Учебное заведение"/>
		<span class="number">
			<input name="graduation" placeholder="Год выпуска" data-xp="min: 1950, max: 2014, def: 2000"/>
		</span>

		<p>
			<button class="repeat_append_button">Добавить</button>
		</p>
	</div>

	<div class="fields" data-xp="name: 'education', repeat: {template: true}">
		<input name="institute" placeholder="Учебное заведение"/>
		<span class="number">
			<input name="graduation" placeholder="Год выпуска" data-xp="min: 1950, max: 2014, def: 2000"/>
		</span>

		<p>
			<button class="repeat_append_button">Добавить</button>
			<button class="repeat_remove_button">Удалить</button>
		</p>
	</div>
</form>

<span class="datemonth">
	<input name="month" value="2024-3"/>
</span>

<table>
	<thead>
		<tr>
			<th>Пн</th>
			<th>Вт</th>
			<th>Ср</th>
			<th>Чт</th>
			<th>Пт</th>
			<th class="weekend">Сб</th>
			<th class="weekend">Вс</th>
		</tr>
	</thead>
	<tbody id="days" data-xp="type: 'fields'" align="right">
		<tr data-xp="type: 'fields', name: 'week', repeat: true">
			<td data-xp="type: 'html_week_day', name: 'mo'"></td>
			<td data-xp="type: 'html_week_day', name: 'tu'"></td>
			<td data-xp="type: 'html_week_day', name: 'we'"></td>
			<td data-xp="type: 'html_week_day', name: 'th'"></td>
			<td data-xp="type: 'html_week_day', name: 'fr'"></td>
			<td data-xp="type: 'html_week_day', name: 'sa'" class="weekend"></td>
			<td data-xp="type: 'html_week_day', name: 'su'" class="weekend"></td>
		</tr>
	</tbody>
</table>

<style>
	th.weekend, td.weekend {color: red;}
	td.sibling {opacity: 0.3;}
</style>

<script>
	xP.controls.register({name: 'html_week_day', base: 'html', prototype: {
		classed: {
			on: '[this] * 1 > [this].parent()._param(\'repeat_position\') * 7 + 7'
				+ ' || [this] * 1 < [this].parent()._param(\'repeat_position\') * 7 - 7',
			do: 'sibling'
		}
	}});

	xP();

	xP('[name=month]').first().change(function(){
		var dt = this.date(),
			weeks = [], i;

		dt.setDate(dt.getDate() - (dt.getDay() == 1 ? 8 : dt.getDay() || 7));

		for(i = 0; i < 6; i++){
			weeks[i] = {
				mo: dt.setDate(dt.getDate() + 1) && dt.getDate() || '<br/>',
				tu: dt.setDate(dt.getDate() + 1) && dt.getDate() || '',
				we: dt.setDate(dt.getDate() + 1) && dt.getDate() || '',
				th: dt.setDate(dt.getDate() + 1) && dt.getDate() || '',
				fr: dt.setDate(dt.getDate() + 1) && dt.getDate() || '',
				sa: dt.setDate(dt.getDate() + 1) && dt.getDate() || '',
				su: dt.setDate(dt.getDate() + 1) && dt.getDate() || ''
			};
		}

		xP('#days').first().val({week: weeks});
	});
</script>
Пн Вт Ср Чт Пт Сб Вс


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