---
title: Виджет из HTML-документа
slug: примеры-сниппеты-общее-html-документы/виджет-из-html-документа
---

HTML-документ можно использовать для создания нестандартных элементов управления. Ниже приведен пример создания виджетов
```bsl
&НаКлиенте
Функция Текст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>",
		ЗаголовокВиджета,
		КоличествоНовых,
		КоличествоВРаботе,
		КоличествоЗакрытых);
	
	Возврат Текст;
	
КонецФункции
```

В результате получается что-то вроде
![пример виджета.png](https://sinenikolsky.ru/s/QEWSKmHn7HKGJX4/download?path=%2F2025%2F04%2F15&files=c04e4c34-8a25-42a1-bb74-da0929bfa69c.png)

Для отработки кликов на элементах виджета нужно переопределить событие элемента «ПриНажатии», например:
```bls
&НаКлиенте
Процедура ВиджетПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    
    СписокКлассов = СтрРазделить(ДАнныеСобытия.Element.className, " ", Ложь);
    Если СписокКлассов.Найти("link-opened") <> Неопределено Тогда
        // Свой обработчик
    КонецЕсли;
КонецПроцедуры
```
В тексте HTML-класс «link-opened» созданного элемента расположен в следующем блоке
```html
        <div class=""status status-opened"">
            <p><a href=""#"" class=""link-opened"">Новые</a></p>
            <p>%2</p>
        </div>
```
Соответственно можно создавать произвольные элементы — кнопки, ссылки, параграфы и пр., что допускается HTML+CSS