4.7 KiB
4.7 KiB
title, slug
| title | slug |
|---|---|
| Виджет из HTML-документа | примеры-сниппеты-общее-html-документы/виджет-из-html-документа |
HTML-документ можно использовать для создания нестандартных элементов управления. Ниже приведен пример создания виджетов
&НаКлиенте
Функция ТекстHTMLДляВиджета(КоличествоНовых, КоличествоВРаботе, КоличествоЗакрытых, КоличествоВсего)
ЗаголовокВиджета = "Информация о заявках";
Текст = СтрШаблон(
"<!DOCTYPE html>
|<html lang=""ru"">
|
|<head>
| <meta charset=""UTF-8"">
| <meta http-equiv=""X-UA-Compatible"" content=""IE=edge"">
| <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
| <title>Document</title>
| <style>
| p {
| margin: 0;
| padding: 0;
| }
| .wrap {
| padding: 0px;
| }
| .status {
| font-family: ""Arial"";
| font-weight: 600;
| font-size: 12px;
| margin-bottom: 5px;
| margin-left: 2px;
| margin-right: 5px;
| padding: 3px;
| border-radius: 5px;
| display: flex;
| justify-content: space-between;
| }
| .status-opened {
| border: 1px solid #A0A0A0;
| background-color: #F4F7FC;
| }
| .status-work {
| border: 1px solid #A0A0A0;
| background-color: #FBED9E;
| }
| .status-closed {
| border: 1px solid #A0A0A0;
| background-color: #ddffdd;
| }
| .status-all {
| border: 1px solid #A0A0A0;
| font-size: 16px;
| }
| .status-header {
| margin-bottom: 3px;
| padding: 2px;
| font-size: 12px;
| }
| .bottom {
| padding: 0px;
| margin-top: 6px;
| text-align: right;
| font-size: 11px;
| font-family: ""Arial"";
| }
| </style>
|</head>
|
|<body>
| <div class=""wrap"">
| <div class=""status status-header"">
| <p><b>%1</b></p>
| </div>
| <div class=""status status-opened"">
| <p><a href=""#"" class=""link-opened"">Новые</a></p>
| <p>%2</p>
| </div>
| <div class=""status status-work"">
| <p><a href=""#"" class=""link-work"">В работе</a></p>
| <p>%3</p>
| </div>
| <div class=""status status-closed"">
| <p><a href=""#"" class=""link-closed"">Закрытые</a></p>
| <p>%4</p>
| </div>
| <div class=""bottom"">
| <div class=""bottom bottom-refresh"">
| <p><a href=""#"" class=""link-refresh"">Сбросить</a></p>
| </div>
| </div>
|</body>
|
|</html>",
ЗаголовокВиджета,
КоличествоНовых,
КоличествоВРаботе,
КоличествоЗакрытых);
Возврат Текст;
КонецФункции
В результате получается что-то вроде
Для отработки кликов на элементах виджета нужно переопределить событие элемента «ПриНажатии», например:
&НаКлиенте
Процедура ВиджетПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
СписокКлассов = СтрРазделить(ДАнныеСобытия.Element.className, " ", Ложь);
Если СписокКлассов.Найти("link-opened") <> Неопределено Тогда
// Свой обработчик
КонецЕсли;
КонецПроцедуры
В тексте HTML-класс «link-opened» созданного элемента расположен в следующем блоке
<div class=""status status-opened"">
<p><a href=""#"" class=""link-opened"">Новые</a></p>
<p>%2</p>
</div>
Соответственно можно создавать произвольные элементы — кнопки, ссылки, параграфы и пр., что допускается HTML+CSS