InlineEditBox

InlineEditBox часто описывается как виджетобертка, которая предоставляет возможность статического отображения того, что в действительности является элементом ввода. Когда потребуется изменить содержимое элемента, пользователь должен просто выбрать его. Например, вместо того чтобы добавлять в страницу элемент редактирования фиксированного размера, такой как TextBox, всегда видимый на экране, его можно обернуть диджитом InlineEditBox, который на экране отображается как обычный текст (подобно метке), но при выборе преобразуется в TextBox, готовый к редактированию. По завершении редактирования, например по нажатию клавиши Enter или по щелчку мыши за пределами диджита, он опять превращается в обычный текст.

В простейшем случае можно просто обернуть TextBox диджитом InlineEditBox, сделав его, например, частью шаблона письма, как показано в следующем примере. Обратите внимание, что та часть, которая должна была бы отображаться как TextBox и загромождала бы изображение, выглядит как обычная разметка, но после щелчка мышью преобразуется в элемент редактирования:
Dear editor="dijit.form.TextBox">Valued Customer:
We have received your request to be removed from our spam list.


Not to worry, we'll remove you when we’re good and ready. In the meanwhile, please do not hesitate to contact us with further complaints.

Sincerely,

editor="dijit.form.TextBox">Customer Service

В этом примере атрибут autosave устанавливается в значение false, благодаря чему в элементе управления появляются две кнопки Сохранить (Save)1 и Отменить (Cancel) (в противном случае текст сохранялся бы автоматически по мере набора и эти кнопки вообще не отображались бы). Это очень важно. Теперь попробуем расширить базовую концепцию и создадим другой шаблон для составления письма.

Ниже приводится короткий пример, где диджитом InlineEditBox обернут диджит Textarea. Обратите внимание, что атрибут renderAsHtml позволяет отображать и редактировать исходный текст разметки:
Dear editor="dijit.form.TextBox">Valued Customer:
editor="dijit.form.Textarea" renderAsHtml="true"> Insert(br)
Form(br)
Letter(br)
Here(br)

Sincerely,

autoSave="false" editor="dijit.form.TextBox">Customer Service

Как и для других диджитов, рассматривавшихся выше в этой главе, типичное использование InlineEditBox не вызывает сложностей.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
ColorPalette
Dialog
Editor
Menu
ProgressBar

Вернуться в раздел: Dojo / Виджеты приложения