Частные атрибуты тегов в Mobile SMARTS

Применимо к продуктам: Mobile SMARTS платформа
Последние изменения: 2023-11-20

Многие атрибуты в HTML являются общими для всех элементов, однако большинство из них являются специфическими для данного элемента или группы элементов. Это так называемые частные атрибуты.

Атрибуты обеспечивают дополнительную информацию об элементе, при этом они всегда определяются в начальном теге независимо от того парный это тег, либо одиночный. Пользователь не может создавать свои собственные атрибуты или использовать значения, не определенные cпецификацией, так как это может вызывать проблемы правильной интерпретации.

Рассмотрим частные атрибуты подробнее с примерами.

Тег <div> и его частные атрибуты

Пример простого синтаксиса:

Текст вне тега div
{text = "Текст из переменной"}
<div>
<p>{text}</p>
<p>Текст внутри тега div</p>
</div>

По умолчанию, при использовании тега <div> используется вся доступная область экрана, изменить размер можно с помощью атрибута width.

Пример простого синтаксиса:

<div>
<div style="border:1dp solid red;">
Ширина по-умолчанию
</div>
<div style="border:1dp solid green; width:50%;">
Ширина: 50%
</div>
<div style="border:1dp solid blue; width:100dp;">
Ширина: 100dp;
</div>
</div>

Как видим из примера, блоки <div> размещаются вертикально.

Для тега <div> доступны следующие частные атрибуты:

Атрибут Значение Описание
align right, left, center горизонтальное выравнивание
bgcolor цвет определяет цвет фона блока/контейнера
border числовое значение определяет толщину границ блока/контейнера
height числовое значение определяет высоту
maxlines числовое значение обрезает текст до N строк

Еще пример использования атрибутов тега <div>:

<div height="20%" align="center" bgcolor="lightblue" border="2dp">Текст в блоке с голубым фоном и черной рамкой.</div>


Тег <p> и его частные атрибуты

Представляет собой абзац. По умолчанию использует всю доступную область родительского элемента.

Пример синтаксиса:

<div>

Текст без тега<p>without align</p><p align="left">align = left</p><p align="center" height="20%" bgcolor="lightblue" border="2dp">align = center</p><p align="right">align = right</p><p width="50%" align="right">align = right width = 50%</p>Текст без тега

</div>


Для тега <p> доступны следующие частные атрибуты:

Атрибут Значение Описание
align right, left, center горизонтальное выравнивание
bgcolor цвет определяет цвет фона блока/контейнера
border числовое значение определяет толщину границ блока/контейнера
height числовое значение определяет высоту
width числовое значение ширина элемента
maxlines числовое значение обрезает текст до N строк

Теги <table>, <tr>, <td> и их частные атрибуты

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы.

Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>.

Внутри <table> допустимо использовать такие атрибуты как bgcolor, cellpadding, cols, valign (подробнее см. список ниже).

Теги <table>, <tr>, <td> обязательно должны иметь завершающий тег.

Тег <td> предназначен для создания одной ячейки таблицы. Данный тег должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

Пример простого синтаксиса:

<div>
<table width="100%">
<tr>
<td style="border:1dp solid green;" width="50%">
Блок слева
</td>
<td style="border:1dp solid blue;">
Блок справа
</td>
</tr>
</table>
</div>

Для тега <table> доступны следующие частные атрибуты:

Атрибут Значение Описание
align right, left, center горизонтальное выравнивание
bgcolor цвет определяет цвет фона таблицы
border числовое значение определяет толщину границ таблицы, а также включает границы ячеек толщиной 1px
height числовое значение определяет высоту таблиц
valign top, middle, bottom вертикальное выравнивание содержимого ячеек
width числовое значение определяет ширину таблиц
cellpadding любое целое значение в пикселах или процентах от доступного пространства определяет отступ содержимого ячейки от границы ячейки
cellspacing любое целое положительное число определяет отступ между ячейками
cols любое целое положительное число определяет количество колонок

Пример использования несколько атрибутов сразу:

<div width="100%" height="50%">
<table width="100%" cols="4" align="right" valign="top" cellpadding="5dp" cellspacing="5dp" border="3dp" bgcolor="#87cefa">
<tr>
<td height="25%">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td height="25%">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td height="25%">9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td height="25%">13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>
</div>

Тег <tr> используется для разметки строки таблицы. Обязательно должен иметь завершающий тег. Данный тег не имеет дополнительных атрибутов.

Тег <td> используется внутри тега <tr> и определяет ячейку таблицы. Обязательно должен иметь завершающий тег.

Для данного тега доступны следующие частные атрибуты:

Атрибут Значение Описание
align right, left, center горизонтальное выравнивание в данной ячейке
bgcolor цвет определяет цвет фона ячейки
border числовое значение определяет толщину границ ячеек
colspan любое целое положительное число больше 1 определяет горизонтальное количество ячеек для объединения
height числовое значение определяет высоту ячейки
rowspan любое целое положительное число больше 1 определяет вертикальное количество ячеек для объединения
valign top, middle, bottom вертикальное выравнивание содержимого ячеек
width числовое значение определяет ширину ячейки

Пример использования нескольких атрибутов сразу:

<div width="100%">
<table width="100%" border="1dp" align="center">
<tr>
<td height="15%" valign="bottom" border="2dp" bgcolor="#87cefa">1</td>
<td colspan="2" rowspan="2">2, 3<br />6, 7</td>
<td>4</td>
</tr>
<tr>
<td height="15%">5</td>
<td>8</td>
</tr>
<tr>
<td height="15%">9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</div>

Тег <input> и его частные атрибуты

Тег используется для создания полей ввода текста, чекбоксов или выпадающих списков.

У данного тега есть основной атрибут type с помощью которого определяется, как будет выглядеть поле ввода.

Рассмотрим на следующем примере:

<div><div>
<table col="2" width="100%"style="vertical-align:middle;">
<tr>
<td width="30%" height="10%">
type="text"
</td>
<td width="70%" align= "center">
<input type="text" width="90%" tabIndex="1" placeholder="Поле ввода текста" value="{textValue}" datatype="char" />
</td>
</tr>
<tr>
<td width="30%" height="10%">
type="checkbox"
</td>
<td width="70%" align= "center">
<input type="checkbox" tabIndex="2" value="{chkbxValue}" onselected ="1" />
</td>
</tr>
<tr>
<td width="30%" height="10%">
type="combobox"
</td>
<td width="70%" align= "center">
<input type="combobox" width="90%" tabIndex="3" placeholder ="пусто" source="СтрокиДляОтображения.Rows" listItemDisplayTemplate ="{Item.Наименование}" SelectedValue="{listValue}" onselected="Возврат" />
</td>
</tr>
</table>
</div>

Для создания полей ввода текста доступны следующие частные атрибуты:

Атрибут Значение Описание
enabled true/false, булевая переменная или выражение отвечает за доступность элемента
placeholder текстовая строка, если внутри строки предполагается пробел, ее необходимо брать в двойные или одинарные кавычки подсказка, отображаемая в тот момент, когда поле ввода пусто (android)
datatype decimal, string, datetime тип данных, которые можно вводить
height числовое значение определяет высоту поля ввода
format типы входных данных в формате HTML принимает regExp, по которому происходит валидация введенных данных
width числовое значение определяет ширину поля ввода
value имя переменной переменная для занесения вводимой строки
value = {var}
mask содержит маску для текстовых/числовых данных содержит в себе шаблон, с помощью которого формируются вводимые данные
Синтаксис: mask = "##.##" — для ввода чисел
mask = "__.__" — для ввода букв и чисел
onBlur имя действия указывает действие, на которое будет выполнен переход по смене фокуса (для ОС Android)
id/class/style см. Общие атрибуты работают по стандартным правилам HTML

Пример использования нескольких атрибутов сразу:

<div width="100%">
<table cols="2" width="100%" style="vertical-align:middle;">
<tr>
<td width="30%" height="10%" >Ввод текста</td>
<td width="70%" ><input type="text" value="{textValue}" width="100%" onBlur="Возврат" placeholder="введите текст" /></td>
</tr>
<tr>
<td height="10%">Введено:</td>
<td>{textValue:(0)}</td>
</tr>
<tr>
<td>Ввод числа</td>
<td>
<input type="text" value="{decimalValue}" enabled="false" width="100%" onblur="Возврат" placeholder="введите число" datatype="decimal" /></td>
</tr>
<tr>
<td height="10%">Введено:</td>
<td>{decimalValue:(0)}</td>
</tr>
<tr>
<td>Ввод 3х цифр</td>
<td><input type="text" value="{formatValue}» width="100%" onblur="Возврат" placeholder="введите число" format="[0-9]{3}" datatype="decimal" /></td>
</tr>
<tr>
<td height="10%">Введено:</td>
<td>{formatValue:(0)}</td>
</tr>
</table>
</div>

Пример использования атрибутов mask и pattern:

<div width="100%">
<table cols="2" width="100%" style="vertical-align:middle;">
<tr>
<td width="30%" height="10%" >Ввод текста по маске</td>
<td width="70%" >
<input type="text" value="{maskValue}" width="100%" onBlur="Возврат" placeholder="введите текст" mask="___, ___" /></td>
</tr>
<tr>
<td height="10%">Введено:</td>
<td>{maskValue:(0)}</td>
</tr>
<tr>
<td>Ввод номера телефона</td>
<td>
<input type="text" value="{numValue}" width="100%" onblur="Возврат" placeholder="введите число» mask="+7(###)-###-##-##» /></td>
</tr>
<tr>
<td height="10%">Введено:</td>
<td>{numValue:(0)}</td>
</tr>
<tr>
<td>Ввод даты</td>
<td><input type="text" value="{dateValue}" width="100%" onblur="Возврат" placeholder="введите дату" pattern="dd.MM.yy" datatype="datetime" /></td>
</tr>
<tr>
<td height="10%">Введено:</td>
<td>{dateValue:(0)}</td>
</tr>
</table>
</div>

Для чекбокса доступны следующие частные атрибуты:

Атрибут Значение Описание
value для переключателей уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь переменная для занесения вводимой строки
value = {var}
id/class/style см. Общие атрибуты работают по стандартным правилам HTML

Пример использования нескольких атрибутов сразу:

<div width="100%" >
<table cols="2" width="100%" style="vertical-align:middle;" >
<tr>
<td width="70%" height="10%">Параметр 1</td>
<td width="30%"><input type="checkbox" value="{par1}" onblur="Возврат" /></td>
</tr>
<tr>
<td width="70%" height="10%">Значение:</td>
<td width="30%">{par1:True;False}</td>
</tr>
<tr>
<td width="70%" height="10%">Параметр 2</td>
<td width="30%"><input type="checkbox" value="{par2}" onblur="Возврат" /></td>
</tr>
<tr>
<td width="70%" height="10%">Значение:</td>
<td width="30%">{par2:True;False}</td>
</tr>
<tr>
<td width="70%" height="10%">Параметр 3</td>
<td width="30%"><input type="checkbox" value="{par3}" onblur="Возврат" /></td>
</tr>
<tr>
<td width="70%" height="10%">Значение:</td>
<td width="30%">{par3:True;False}</td>
</tr>
</table>
</div>

Для комбобокса доступны следующие частные атрибуты:

Атрибут Значение Описание
enabled true|false отвечает за доступность элемента
height числовое значение определяет высоту поля ввода
width числовое значение определяет ширину поля ввода
value является атрибутом без значения атрибут, в котором указывается переменная для занесения выбранной строки
Синтаксис: value="{var}"
onSelected имя действия указывает действие, на которое будет осуществлен переход после выбора элемента выпадающего списка (для ОС Android)
source источник элементов для показа атрибут, который используется для получения коллекции строк.
Синтаксис: source = "ItemsCollection". Для того, чтобы передать строки таблицы, необходимо явно (!) указывать строки, т. е.: source = "TableName.Rows"
ListItemDisplayTemplate если строка имеет поле ShortName, то будет отображаться оно, если нет — поле Имя позволяет выбрать столбец коллекции для отображения. Синтаксис: ListItemDisplayTemplate = "{Item.ColumnName}"
ListItemValueTemplate шаблон вычисления значения поля при выборе позиции списка позволяет произвести вычисление с полем выбранной строки. Синтаксис: ListItemValueTemplate = "{Item.ColumnName = 3+2}"
id|class|style см. Общие атрибуты работают по стандартным правилам HTML

<div>
<input type="combobox" source="СтрокиДляОтображения.Rows" value ="{SelPos}" listItemDisplayTemplate ="{Item.Наименование}" listItemValueTemplate="{Item.ВычисляемоеПоле=Item.Код+Item.Характеристика}" onselected="Возврат" /><br />
{SelPos.Наименование:Выбрано: (0), }{SelPos.Код:(0), }{SelPos.ВычисляемоеПоле:(0)}<br />
</div>

Тег <img> и его частные атрибуты

Тег используется для отображения изображения. Обязательно должен иметь завершающий тег. С помощью данного тега можно отображать изображения из файла-ресурсника, хранимого в папке «Documents» базы, по ссылке, через переменную из таблицы/по ссылке.

Для отображения изображений доступны следующие частные атрибуты:

Атрибут Значение Описание
width числовое значение определяет ширину изображения
height числовое значение определяет высоту изображения
size stretch атрибут, с помощью которого указывается поведение формирования ширины/высоты изображения. В качестве параметра можно указать только stretch (о других неизвестно). Если указано stretch — в случае если изображение больше по ширине или высоте оно будет подогнано под максимальный допустимый размер, ограниченный версткой
tcolor цвет
id/class/style см. Общие атрибуты работают по стандартным правилам HTML

<div width="100%">
<img size="stretch">bigPict.jpg</img>
<img width="50%" height="30%">bigPict.jpg</img>
</div>

Тег <button> и его частные атрибуты

Тег используется для создания кнопки. Обязательно должен иметь завершающий тег. С помощью данного тега можно создать дополнительные кнопки управления в различных частях окон (в верхней/нижней части/в списке/в самом окне/etc).

Единственное визуальное действие. в котором нельзя использовать данный тег — действие «Меню», так как оно само состоит из кнопок.

Для создания полей ввода текста доступны следующие частные атрибуты:

Атрибут Значение Описание
width числовое значение определяет ширину поля ввода
height числовое значение определяет высоту поля ввода
enabled нет указывает, доступна кнопка для нажатия или нет
direction указывается название действия для перехода или:
cancel — отмена действия
finishproc — возврат на одно действие
return — завершить операцию
abort — прервать операцию
указывает, переход на какое действие будет совершен при нажатии кнопки
visible отображает элемент как видимый указывает, отображать кнопку или нет
type="submit" кнопка для отправки данных формы на сервер означает, что по нажатию кнопки будет обработаны введенные в поля ввода данные и произведен переход на следующее действие. Раньше, для выполнения подобного действия использовался атрибут direction="ok"
id|class|style см. Общие атрибуты работают по стандартным правилам HTML
command Пример:
command="x = y + 1"
позволяет производить простые вычисления без перехода на другое действие

Пример использования атрибутов кнопок:

<div height="100%" width="100%">
<button width="100%" height="10%" command="value=2+3">Расчет</button><br />
<button width="75%" enabled="false">Недоступная кнопка</button><br />
<button width="100%" visible="false">Невидимая кнопка</button><br />
<button width="50%" height="15%" direction="finishproc">Назад</button><button width="50%" height="15%" direction="Далее" type="submit">Подтвердить</button>
</div>

Тег <a> и его частные атрибуты

Тег используется для создания гиперссылки на другое действие в алгоритме. Обязательно должен иметь закрывающий тег. Сама ссылка определяется через атрибут href. С помощью атрибута style можно задать цвет гиперссылки.

Пример синтаксиса:

<a href="//www.cleverence.ru/support/2565/Название операции» style="color:#800080">ссылка</a>


Цвет можно задавать как через hex коды цветов, так и по названию цвета.

style="color:purple"

Атрибут size задаёт размер текста гиперссылки

<a href="//www.cleverence.ru/support/2565/Название операции" size="18">ссылка</a>

Для создания ссылки можно вместо атрибута href иcпользовать атрибут direction

<a direction="Название операции">ссылка</a>



Была ли статья полезна?
Спасибо за ваш отзыв!
Отзыв
Заполните, пожалуйста, данную форму, что конкретно вы не нашли, оставьте свои комментарии о работе сайта / полезности / сложности с навигацией
0/500