**nojs.js: описание документа**

Цель nojs.js — «уничтожить JavaScript-код в HTML», это попытка реализовать идею «соглашения вместо конфигурации» в веб-разработке. В этом документе подробно описаны все соглашения nojs.

**Расширяемые блоки**

Расширяемый блок включает в себя controller и content. При нажатии на controller происходит разворачивание или сворачивание content.

* **Соглашение:** все блоки с классом «collapsible» определяются как расширяемые блоки. Элемент с атрибутом for является controller, а значение этого атрибута представляет собой ID content.

Пример:

```
<div class="collapsible">
    <label for="collapsible1" style="cursor:pointer;">Развернуть/свернуть</label>

    <div id="collapsible1">
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
    </div>
</div>
```

**Флажки «Все/Ничего»: взаимодействие**

Когда флажок типа leader изменяется, он взаимодействует с флажками типа member. И наоборот.

* **Соглашение**: все флажки с атрибутом data-member определяются как leader. Значение атрибута data-member представляет собой имя требуемого для взаимодействия флажка типа member. Один leader может взаимодействовать только с одним именем member, и группа флажков с одинаковым именем становится членом leader. Имя атрибута называется «именем взаимодействия».

Флажок взаимодействия может быть привязан к кнопке. Когда ни один из member не выбран, кнопка будет отключена.

Чтобы связать кнопку, просто добавьте атрибут data-checkbox-require="$name" к элементу кнопки, где $name — это «имя взаимодействия».

Пример:

```
<label><input type="checkbox" data-member="pks"/> Все</label>
<label><input type="checkbox" name="pks"/>Вариант 1</label>
<label><input type="checkbox" name="pks"/>Вариант 2</label>
<label><input type="checkbox" name="pks"/>Вариант 3</label>
<label><input type="checkbox" name="pks"/>Вариант 4</label>
<label><input type="checkbox" name="pks"/>Вариант 5</label>
<div>
    <button class="btn btn-info" type="button" data-checkbox-require="pks">Удалить</button>
</div>
```

**Привязка значения к select**

Добавьте атрибут data-value к select, и соответствующее значение option будет выбрано автоматически.

* **Соглашение**: значение атрибута data-value select соответствует значению выбранного option.

Пример:

```
<select data-value="5">
    <option>--Не выбрано--</option>
    <option value="1">Вариант 1</option>
    <option value="2">Вариант 2</option>
    <option value="3">Вариант 3</option>
    <option value="4">Вариант 4</option>
    <option value="5">Вариант 5</option>
    <option value="6">Вариант 6</option>
</select>
``` **Текст запроса на русском языке:**

«Обрезка пробелов в текстовых полях.

**Соглашение**:
Все текстовые поля (`input[type=text]`) автоматически удаляют пробелы в начале и в конце текста при изменении значения. Если текстовое поле имеет атрибут `data-skip-trim`, обрезка не выполняется.

Сброс формы поиска.

**Соглашение**: 
Форма поиска обозначается классом `lookup`. Кнопка сброса, обозначенная классом `reset`, очищает все условия поиска и отправляет форму поиска.

Имитация гиперссылок (GET).

**Соглашение**:  
Любой элемент с классом `action-get` становится гиперссылкой. При клике происходит переход по адресу, указанному в атрибуте `data-href`. Все атрибуты, начинающиеся с `data-`, добавляются к URL как параметры.

Если элемент имеет атрибут `data-confirm-require`, то перед переходом выполняется проверка предварительных условий. Атрибут `data-confirm-require` содержит jQuery-селектор, который проверяет наличие элемента. Если элемент не существует, выводится сообщение с помощью `window.alert()`. Можно добавить атрибут `data-confirm-require-message` для указания сообщения.

Если элемент имеет атрибут `data-confirm`, перед переходом появляется подтверждающее окно с использованием `window.confirm`. Значение атрибута `data-confirm` может быть логическим или строковым.

**Пример**:

```
<p class="action-get" data-href="lib/artDialog-5.0.4/index.html" data-id="12" data-confirm-require="[name=pks]:checked" data-confirm-require-message="Необходимо выбрать флажок" data-confirm="Вы уверены, что хотите перейти?\nПосле перехода внимательно проверьте адресную строку браузера;\nНажмите кнопку «Назад», чтобы вернуться на эту страницу!">
    Кликните здесь, чтобы перейти к ./lib/artDialog-5.0.4/index.html
</p>
<p><label><input type="checkbox" name="pks" />Обязательный</label></p>
```

Имитация отправки формы (POST).

**Соглашение**:
Любой элемент с классом `action-post` становится кнопкой отправки формы. При нажатии отправляется POST-запрос по адресу, указанному в атрибуте `data-href`. Все атрибуты, начинающиеся с `data-`, отправляются как параметры.

Если элемент имеет атрибут `data-form`, то он указывает на форму, которая будет отправлена. В этом случае необходимо изменить метод формы на POST и адрес на указанный в `data-href`, а затем отправить форму.

В противном случае, если элемент находится внутри формы, можно сразу изменить метод и адрес формы и отправить её.

В ином случае создаётся временная форма и отправляется.

**Пример**:

```
<button type="button" class="btn btn-info action-post" data-form="#test-post-form" data-href="lib/artDialog-5.0.4/index.html" data-id="12" data-confirm-require="[name=pks2]:checked" data-confirm-require-message="Необходимо выбрать флажок"
        data-confirm="Вы уверены, что хотите перейти?\nПосле перехода нажмите F5, чтобы обновить страницу и убедиться, что это действительно POST-отправка;\nНажмите кнопку «Назад», чтобы вернуться на эту страницу!">
    Отправить запрос на ./lib/artDialog-5.0.4/index.html
</button>
<form id="test-post-form">
    <label><input type="checkbox" name="pks2" value="выбрано pks"/>Обязательный</label>
</form>
```

Модальные окна.

**Зависимость**:
$.dialog, см. artDialog (http://aui.github.io/artDialog/).

**Соглашение**:
Элементы с классом `dialog` привязывают модальное окно. При щелчке на таком элементе открывается модальное окно с содержимым, загруженным через AJAX. Адрес запроса AJAX указан в атрибуте `data-url`, а параметры включают все атрибуты, начинающиеся с `data-`.

Содержимое запроса AJAX должно быть частью HTML-кода и не может содержать теги `<html> <head> <body>` и т. д.

По умолчанию в модальном окне есть кнопки «Сохранить» и «Отменить», текст которых можно определить с помощью атрибутов `data-ok-value` и `data-cancel-value`. Если у триггерной кнопки есть атрибут `data-readonly=true`, кнопка «Сохранить» не отображается.

Действие кнопки «Сохранить»:
В содержимом, загруженном через AJAX, находится элемент `form`, и его внутренняя кнопка `button[type=submit]` выполняет действие нажатия».