Версия: 3.x
Микроразметка

Общие сведения

Для удобства быстрой разработки интерактивных функций в административной панели, мы определили ряд CSS классов, которые будут придавать поведение элементам, к которым они присвоены. Такой подход, мы называем микроразметкой.

Технически, javascript, активирующий микроразметку располагается в файле /resource/js/jquery.rs.admindebug.js

Рассмотрим классы и поведение, которое они присваивают:

AJAX зоны

С помощью перечисленных ниже классов можно быстро создать обновляемые с помощью ajax запросов зоны в административной панели.

updatable

Определяет границу обновляемой зоны. Если внутри неё будут клики по ссылкам с классом .call-update, то в данную зону будет помещен загруженный через AJAX контент. В атрибуте data-url следует указывать текущий URL для случая, когда вызывается обновление контента, но не передается URL. Это может быть после успешного создания нового объекта(через crud-add) или после редактирования существующего объекта(crud-edit)

1 <div class="updatable" data-url="Текущий URL">
2  //Здесь некоторый контент, который будет обновлен после нажатия на ссылку "Обновить".
3 
4  <a data-update-url="http://ссылка" class="call-update">Обновить</a>
5  или
6  <a href="http://ссылка" class="call-update">Обновить</a>
7 </div>

В случае, если на экране расположены несколько .updatable зон, необходимо присваивать им идентификаторы через атрибут data-updtable-block-id

1 <div class="updatable" data-url="Текущий URL" data-update-replace data-updtable-block-id="zone1">
2  //В случае наличия атрибута data-update-replace, элемент .updatable будет заменен результатом AJAX запроса.
3 
4  <a data-update-url="http://ссылка" class="call-update">Обновить</a>
5 </div>
6 
7 <div class="updatable" data-url="Текущий URL" data-updtable-block-id="zone2">
8  //Здесь некоторый контент, который будет обновлен после нажатия на ссылку "Обновить".
9 
10  <a data-update-url="http://ссылка" class="call-update">Обновить</a>
11 </div>

default-updatable

Обновляемая по-умолчанию зона, если была нажата ссылка с классом .call-update, расположенная вне какого-либо контейнера .updatable

1 <div class="default-updatable">
2  <div class="updatable" data-url="Текущий URL">
3  <a href="http://ссылка" class="call-update">Обновить ближайшую зону</a>
4  </div>
5 
6  <div class="some-other-class">
7  <a href="http://ссылка" class="call-update">Обновить зону по умолчанию, потому что другой зоны нет</a>
8  </div>
9 </div>

call-update

Класс, присваиваемый к ссылке. При нажатии на такую ссылку произойдет загрузка контента по ссылке через AJAX и обновление ближайшей обновляемой зоны. Можно указывать ссылку в атрибуте href или в атрибуте data-update-url. Это будет влиять на возможность или невозможность открыть ссылку в новом окне без AJAX. Если к ссылке добавить класс no-update-hash, то URL не будет изменяться, при нажатии на ссылку.

1 <div class="updatable" data-url="Текущий URL">
2  //Здесь некоторый контент, который будет обновлен после нажатия на ссылку "Обновить".
3 
4  <a href="http://ссылка 1" class="call-update">Обновить 1</a>
5  <a href="http://ссылка 2" class="call-update">Обновить 2</a>
6  <a href="http://ссылка 3" class="call-update no-update-hash">Обновить 3</a>
7  //Если добавлен класс no-update-hash, то URL не будет изменяться
8 </div>

form-call-update

Класс, присваиваемый к элементу form, означает, что текущую форму нужно отправить через ajax и обновить ближайшую обновляемую зону.

1 <div class="updatable" data-url="Текущий URL">
2  <form class="form-call-update" action="http://ссылка1" method="POST">
3  <label>Ваше имя</label>
4  <input type="text" name="name">
5  <input type="submit" value="Отправить">
6  </form>
7 
8  <form class="form-call-update" action="http://ссылка2" method="GET">
9  <label>Ваше имя</label>
10  <input type="text" name="name">
11  <input type="submit" value="Отправить">
12  </form>
13 
14 
15  //Здесь какой-либо контент, который будет перезагружен после обновления updatable
16 </div>

CRUD действия

ReadyScript предоставляет набор классов для простой организации наиболее востребованных функций в административной панели. К таким операциям относятся: открытие форм, отправка форм, выполнение AJAX запроса и обновление рабочей зоны, отправка отмеченных элементов таблицы в POST запросе и др.

crud-ajax-group

Данный класс определяет границы AJAX группы. Это означает, что кнопки с классами .crud-form-save, .crud-form-apply могут находиться за пределами формы .crud-form. При нажатии на такие кнопки, будет происходить поиск формы в границах элементах crud-ajax-group.

1 <div class="crud-ajax-group">
2  <form class="crud-form" action="" method="POST">
3  //Здесь ваша форма
4  </form>
5 
6  <a class="crud-form-save">Сохранить</a>
7  <a class="crud-form-cancel">Отмена</a>
8 </div>

crud-add

Открывает в диалоговом окне форму создания объекта. Класс навешивается на ссылку. Необходимо обязательно указывать у ссылки атрибут href или data-url, в котором должна быть представлена ссылка на необходимый метод контроллера, который вернет форму. После успешного сохранения объекта, будет автоматически обновлена рабочая область updatable, ссылка из которой была нажата.

1 <div class="crud-ajax-group">
2  <div class="updatable" data-url="Текущий URL">
3  //Здесь список объектов, например товаров
4 
5  <a href="/admin/catalog-ctrl/?do=add" class="crud-add">Создать товар</a>
6  </div>
7 </div>

crud-edit

Открывает в диалоговом окне форму редактирования объекта. В настоящее время поведение идентично поведению класса crud-add.

1 <div class="crud-ajax-group">
2  <div class="updatable" data-url="Текущий URL">
3  <div class="list">
4  <div class="item">
5  Элемент 1
6  <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-edit">редактировать</a>
7  </div>
8  <div class="item">
9  Элемент 2
10  <a href="/admin/catalog-ctrl/?do=edit&id=2" class="crud-edit">редактировать</a>
11  </div>
12  <div class="item">
13  Элемент 3
14  <a href="/admin/catalog-ctrl/?do=edit&id=3" class="crud-edit">редактировать</a>
15  </div>
16  </div>
17  </div>
18 </div>

crud-list-form

Отмечает элемент как форму, внутри зоны .updatable. Должен быть присвоен элементу form. Именно данные этой формы будут отправляться при нажатии на элементы с классами .crud-post, .crud-remove, .crud-multiedit. Внутри формы должны быть input[name="chk[]"], value которых должно содержать ID элементов, с которыми нужно производить действия.

1 <div class="crud-ajax-group">
2  <div class="updatable" data-url="Текущий URL">
3  <form class="crud-list-form">
4  <div class="item">
5  <input type="checkbox" name="chk[]" value="1">
6  Элемент ID:1
7  </div>
8  <div class="item">
9  Элемент ID:2
10  <input type="checkbox" name="chk[]" value="2">
11  </div>
12  </form>
13 
14  <a href="/admin/catalog-ctrl/?do=multidelete" class="crud-remove" data-confirm-text="Вы действительно желаете удалить выбранные элементы?">Удалить выбранное</a>
15  <a href="/admin/catalog-ctrl/?do=some-custom" class="crud-post">Выполнить произвольное действие с выбранными элементами</a>
16  <a href="/admin/catalog-ctrl/?do=multiedit" class="crud-multiedit">Редактировать массово выбранные элементы</a>
17  </div>
18 </div>

crud-remove

Выполняет запрос на удаление выбранных элементов списка, перед этим спрашивает подтверждение от пользователя, указанное в атрибуте data-confirm-text. Данный класс необходимо ставить кнопке в панели действий.

1 <div class="crud-ajax-group">
2  <div class="updatable" data-url="Текущий URL">
3  <form class="crud-form list">
4  <div class="item">
5  <input type="checkbox" name="chk[]" value="1">
6  Элемент ID:1
7  </div>
8  <div class="item">
9  Элемент ID:2
10  <input type="checkbox" name="chk[]" value="2">
11  </div>
12  </form>
13 
14  <a href="/admin/catalog-ctrl/?do=multidelete" class="crud-remove" data-confirm-text="Вы действительно желаете удалить выбранные элементы?">Удалить выбранное</a>
15  </div>
16 </div>

crud-post

Отправляет форму .crud-list-form с отмеченными элементами на заданный URL методом POST. URL должен быть указан в атрибуте data-url или href.

1 <div class="crud-ajax-group">
2  <div class="updatable" data-url="Текущий URL">
3  <form class="crud-list-form">
4  <div class="item">
5  <input type="checkbox" name="chk[]" value="1">
6  Элемент ID:1
7  </div>
8  <div class="item">
9  Элемент ID:2
10  <input type="checkbox" name="chk[]" value="2">
11  </div>
12  </form>
13 
14  <a data-url="/admin/catalog-ctrl/?do=some-custom" class="crud-post">Выполнить произвольное действие с выбранными элементами</a>
15  </div>
16 </div>

crud-remove-one

Отправляет GET запрос на удаление одного элемента в списке и обновляет зону .updatable. URL для удаления элемента должен быть указан в атрибуте data-url или href.

1 <div class="crud-ajax-group">
2  <div class="updatable" data-url="Текущий URL">
3  <div class="list">
4  <div class="item">
5  Элемент 1
6  <a href="/admin/catalog-ctrl/?do=del&id=1" class="crud-remove-one">удалить</a>
7  </div>
8  <div class="item">
9  Элемент 2
10  <a href="/admin/catalog-ctrl/?do=del&id=2" class="crud-remove-one">удалить</a>
11  </div>
12  <div class="item">
13  Элемент 3
14  <a href="/admin/catalog-ctrl/?do=del&id=3" class="crud-remove-one">удалить</a>
15  </div>
16  </div>
17  </div>
18 </div>

crud-multiedit

Добавляет ID выбранных элементов к URL с целью открытия диалога массового редактирования. URL должен быть указан в атрибуте data-url или href. Если выбран один элемент, то происходит поиск элемента на странице по селектору .crud-edit[data-id="ID выбранного элемента"], если он находится то по этому элементу эмитируется нажатие. Если элемент по такому селектору не найден, то выдается сообщение "Выберите как минимум 2 элемента для мультиредактирования".

1 <div class="crud-ajax-group">
2  <div class="updatable" data-url="Текущий URL">
3  <form class="crud-list-form">
4  <div class="item">
5  <input type="checkbox" name="chk[]" value="1">
6  Элемент ID:1
7  <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-edit" data-id="1">редактировать</a>
8  </div>
9  <div class="item">
10  Элемент ID:2
11  <input type="checkbox" name="chk[]" value="2">
12  <a href="/admin/catalog-ctrl/?do=edit&id=2" class="crud-edit" data-id="2">редактировать</a>
13  </div>
14  </form>
15 
16  <a data-url="/admin/catalog-ctrl/?do=multiedit" class="crud-multiedit">Редактировать</a>
17  </div>
18 </div>

crud-form

Отмечает элемент как форму редактирования одного объекта. Должен быть присвоен элементу form. Данные именно с этой формы будут отправлены при нажатии на кнопки с классами .crud-form-save, .crud-form-apply. Этот элемент необходим для корректной работы кнопки .crud-form-cancel.

1 <div class="crud-ajax-group">
2  <form class="crud-form">
3  //Здесь ваша форма
4  </form>
5 </div>

crud-form-save

Класс, который наделяет кнопку поведением "Сохранить и закрыть". Применется в формах создания и редактирования объектов. При нажатии на такую кнопку будет отправлена форма .crud-form и в случае успешного ответа, диалоговое окно будет закрыто. Если действие происходит на отдельной странице, то произойдет переход на страницу к списку объектов.

1 <div class="crud-ajax-group">
2  <form class="crud-form">
3  //Здесь ваша форма
4  </form>
5 
6  <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-form-save">Сохранить и закрыть</a>
7 </div>

crud-form-apply

Класс, который наделяет кнопку поведением "Сохранить". Применется в формах редактирования объектов. При нажатии на такую кнопку будет отправлена форма .crud-form и в случае успешного ответа, диалоговое окно не будет закрыто. Если действие происходит на отдельной странице, то над формой отобразится надпись "Изменения успешно сохранены".

1 <div class="crud-ajax-group">
2  <form class="crud-form">
3  //Здесь ваша форма
4  </form>
5 
6  <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-form-apply">Сохранить</a>
7 </div>

crud-form-cancel

Закрывает диалоговое окно без сохранения изменений. В случае, если редактирование происходит на отдельной странице, то переходит на страницу со списком объектов. Используется в формах редактирования объектов.

1 <div class="crud-ajax-group">
2  <form class="crud-form">
3  //Здесь ваша форма
4  </form>
5 
6  <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-form-apply">Сохранить</a>
7  <a href="/admin/catalog-ctrl/" class="crud-form-cancel">Сохранить</a>
8 </div>

crud-dialog

Открывает диалоговое окно с произвольным контентом, полученным из заданного URL с помощью AJAX запроса. URL должен быть указан в атрибуте href или data-url.

1 <a href="/admin/modulename-customctrl/" class="crud-dialog">Открыть диалоговое окно</a>

crud-sm-dialog

Применяется совместно с классами .crud-dialog, .crud-add, .crud-edit. Если данный класс указан, то диалоговое окно будет иметь небольшой размер 500x500 px.

1 <a href="/admin/modulename-customctrl/" class="crud-dialog crud-sm-dialog">Открыть диалоговое окно</a>

crud-switch

Класс необходимо устанавливать переключателям, совместно с классом rs-switch. Позволяет выполнять запрос на URL, указанный в атрибуте data-url без отображения индикатора загрузки.

1 <div class="toggle-switch rs-switch crud-switch on" data-url="/admin/catalog-ctrl/?id=1&do=ajaxTogglePublic">
2  <label class="ts-helper"></label>
3 </div>

crud-get

Выполняет GET запрос на URL, заданный в атрибуте data-url или href. После выполнения запроса обновляет ближайшую зону .updatable. Может использоваться для выполнения любых произвольных действий для объекта.

1 <div class="crud-ajax-group">
2  <div class="updatable" data-url="Текущий URL">
3  //Здесь произвольный контент
4 
5  <a href="/admin/modulename-customctrl/" class="crud-get">Выполнить действие</a>
6  </div>
7 </div>

crud-form-error

Отмечает блок, в котором будут отображаться ошибки после сохранения объекта. Используется на странице с формой редактирования объекта.

1 <div class="crud-ajax-group">
2  <div class="crud-form-error"></div>
3  <form class="crud-form">
4  //Здесь ваша форма
5  </form>
6 
7  <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-form-save">Сохранить и закрыть</a>
8 </div>

crud-form-success

Отмечает блок, в котором отображаться надпись об успешном сохранении изменений, после сохранения объекта. Используется на странице с формой редактирования объекта.

1 <div class="crud-ajax-group">
2  <div class="crud-form-error"></div>
3  <div class="crud-form-success"></div>
4  <form class="crud-form">
5  //Здесь ваша форма
6  </form>
7 
8  <a href="/admin/catalog-ctrl/?do=edit&id=1" class="crud-form-save">Сохранить и закрыть</a>
9 </div>