Архивы html

1С: использование HTML поля на форме

17.03.2025 Павел Грибов 1C

Сиё может понадобиться, если необходимо ну…например вывести какую-то динамическую информацию на форму, причём со стилями не стандартными для 1С, т.е. штатными средствами 1С не выполнимыми или трудновыполнимыми.

В моём случае, я в это поле просто вывожу динамический список напоминаний. При клике на который открывается соответствующий документ.

Итак, создаём на форме реквизит «Прочие напоминания» с типом строка. Длина -0, т.е. не ограниченная. Затем перетаскиваем реквизит на форму и выбираем вид «Поле HTML документа»:

При открытии формы, заполняем HTML:

&НаСервере
Функция СформироватьСписокНапоминанийНаСервере(Исполнитель)
список_напоминаний=СК_ОбщиеФункции.СформироватьУведомленияОНапоминаемыхДатах(ложь,Исполнитель);
	body="<ul>";
	для каждого стр из список_напоминаний цикл
		body=body+"<li><a href='"+стр.ссылка.номер+"'>"+стр.Пояснение+"</a></li>";
	конеццикла;	
	body=body+"</ul>";
	возврат body;
КонецФункции

&НаКлиенте
Процедура ПриОткрытии(Отказ)
	ПрочиеНапоминания="<html><head></head><body>"+СформироватьСписокНапоминанийНаСервере(Исполнитель)+"</body></html>";	
КонецПроцедуры

&НаСервере

Функция СформироватьСписокНапоминанийНаСервере(Исполнитель)

список_напоминаний=СК_ОбщиеФункции.СформироватьУведомленияОНапоминаемыхДатах(ложь,Исполнитель);

body="<ul>";

для каждого стр из список_напоминаний цикл

body=body+"<li><a href='"+стр.ссылка.номер+"'>"+стр.Пояснение+"</a></li>";

конеццикла;

body=body+"</ul>";

возврат body;

КонецФункции

&НаКлиенте

Процедура ПриОткрытии(Отказ)

ПрочиеНапоминания="<html><head></head><body>"+СформироватьСписокНапоминанийНаСервере(Исполнитель)+"</body></html>";

КонецПроцедуры

Далее отлавливаем клик по полю HTML, и открываем документ:

&НаКлиенте
Процедура ПрочиеНапоминанияПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
	если ДанныеСобытия.Свойство("href") тогда
		РазделёныйМассивСсылки=СтрРазделить(ДанныеСобытия.href,"/");		
		НомерДокумента=РазделёныйМассивСсылки[РазделёныйМассивСсылки.Количество()-1];
		ОткрытьЗначение(ПолучитьСсылкуНаДокумент(НомерДокумента));
	конецесли;
	СтандартнаяОбработка=ложь;
КонецПроцедуры

&НаКлиенте

Процедура ПрочиеНапоминанияПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)

если ДанныеСобытия.Свойство("href") тогда

РазделёныйМассивСсылки=СтрРазделить(ДанныеСобытия.href,"/");

НомерДокумента=РазделёныйМассивСсылки[РазделёныйМассивСсылки.Количество()-1];

ОткрытьЗначение(ПолучитьСсылкуНаДокумент(НомерДокумента));

конецесли;

СтандартнаяОбработка=ложь;

КонецПроцедуры

Оставить комментарий 1с, html

HTML: Ограничение ввода числа, с дробной частью более двух знаков

26.09.2024 Павел Грибов WEB

Задача: позволять вносить в поле input числа со значимой частью не более 2-х знаков после запятой.

Решение: к сожалению стандарт HTML на текущий момент не предусматривает в штатном виде такое колдовство. Единственно что возможно — проставить в теге тип равным «число», и шаг равным .01, например вот так:

<input type="number" step=".01">

1	<input type="number" step=".01">

Но это будет действовать только если пользователь ввод числа осуществляет при помощи стрелочки. Если руками — то поле всё равно позволит ввести любое число. Значит придётся задействовать javascript. На обработчик onchange навесим задание приводить любое значение в поле к числу с разрядностью 2:

<input type="number" step=".01" onchange="this.value = parseFloat(this.value).toFixed(2);">

1	<input type="number" step=".01" onchange="this.value = parseFloat(this.value).toFixed(2);">

Оставить комментарий html, input, ввод числа

Таблица в массив на php

27.06.2024 Павел Грибов PHP

Задача: Есть некая очень захламленная сторонними элементами страница в разметке html. Необходимо преобразовать находящуюся на ней таблица в массив данных.

Решение: сначала вычленим «грязное» содержимое таблицы между тегами <tbody></tbody>, затем преобразуем его в DOM документ, а далее уже распарсим его обходами и разложим элементы в массив.

Получилось что-то вроде:

 //вычленяю таблицу
        $t1=explode("<tbody>",$res);
        $t2=explode("</tbody>",$t1[1]);
        $tbody="<html><head><meta charset='UTF-8'></head><body><table><tbody>".$t2[0]."</tbody></table></body></html>";
        
        $mass=[];
        $dom = new domDocument('1.0', 'utf-8'); 
        @$dom->loadHTML($tbody);         
        $tables= $dom->getElementsByTagName('table');
        foreach ($tables as $table) {
            $trs= $table->getElementsByTagName('tr');
            foreach ($trs as $tr) {
                $tds=$tr->getElementsByTagName('td');
                $info=[];
                foreach ($tds as $td) {                    
                    $info[]=$td->textContent;
                };
                $mass[]=$info;
            }
        }

//вычленяю таблицу

$t1=explode("<tbody>",$res);

$t2=explode("</tbody>",$t1[1]);

$tbody="<html><head><meta charset='UTF-8'></head><body><table><tbody>".$t2[0]."</tbody></table></body></html>";

$mass=[];

$dom = new domDocument('1.0', 'utf-8');

@$dom->loadHTML($tbody);

$tables= $dom->getElementsByTagName('table');

foreach ($tables as $table) {

$trs= $table->getElementsByTagName('tr');

foreach ($trs as $tr) {

$tds=$tr->getElementsByTagName('td');

$info=[];

foreach ($tds as $td) {

$info[]=$td->textContent;

};

$mass[]=$info;

}

Оставить комментарий html, php, таблица в массив

Затененный задний фон для модального окна

28.03.2024 Павел Грибов WEB

Довольно часто встречающаяся задача: затененный задний фон модального окна или элемента веб страницы.Решается задача довольно просто, с использованием псевдоэлементов :before и :after. Обращаю внимание, что их можно использовать только в парных тегах вида <div></div>, и соответственно нельзя в тегах вида input (т.е. не парных). Еще одним нюансом является то, что значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.

Например задача получить страницу вида:

Решается примерно так: сначала определим стили CSS:

.application:before {
   content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;
  background-size: cover;
    filter: blur(2px);
}

.application:after {
  content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
}
.select_area_color_lent_tag{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  background-color: white;
  border: 1px solid black;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-around;
  z-index: 20;    
}

.application:before {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;

background-size: cover;

filter: blur(2px);

}

.application:after {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,.5);

}

.select_area_color_lent_tag{

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 250px;

height: 250px;

background-color: white;

border: 1px solid black;

padding: 20px;

display: flex;

flex-wrap: wrap;

text-align: center;

justify-content: space-around;

z-index: 20;

}

HTML для этих стилей может выглядеть таким:

        <div class="application" style="display: none">            <div class="select_area_color_lent_tag">            </div>        </div>

1	<div class="application" style="display: none"> <div class="select_area_color_lent_tag"> </div> </div>

В нужный момент достаточно показать блок application, и получим картинку как на скриншоте выше,а именно затененный задний фон модального окна:

$(".application").show()

1	$(".application").show()

А здесь можно посмотреть еще много советов по работе с CSS

Оставить комментарий css, html, затененный задний фон

Простой парсер таблицы в массив из HTML

06.03.2024 Павел Грибов PHP

Задача: необходимо преобразовать страницу HTML, в которой данные размещены в виде стандартной таблицы обрамленной тегами <table></table>, в двумерный массив на PHP (парсер таблицы в массив).

<table>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td>
	</tr>
	<tr>
		<td>1</td><td>2</td><td>3</td><td>4</td>
	</tr>
</table>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Сначала я хотел решить задачу «в лоб», а именно искать теги в тексте, писать функционал по вычленению данных между тегами.. Но потом подумал, что «наверное всё уже придумано до нас», для подобных задач. Ну и собственно оказался прав. Задачу решил без лишних усилий в течении минут 5.

Решение: воспользуюсь PHP функцией DOMDocument для того чтобы преобразовать текст в DOM объект:

    $contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";
    $DOM = new DOMDocument;
    $DOM->loadHTML($contents);

$contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";

$DOM = new DOMDocument;

$DOM->loadHTML($contents);

Так я получаю построенное DOM дерево. Затем получаю все «ветки» по имени tr, и перебираю их, одновременно перебирая «всех листья» (т.е. тэги td):

function tdrows($elements){
  $str = [];
    foreach ($elements as $element) {$str[]= $element->nodeValue;}
  return $str;
}

function getdata($contents){
    $contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";
    $DOM = new DOMDocument;
    $DOM->loadHTML($contents);
    $items = $DOM->getElementsByTagName('tr');
    $mass=[];
    foreach ($items as $node) {
        $mass[]=tdrows($node->childNodes);
    }
    return $mass;
}

$mass=getdata($table);
var_dump($mass);

function tdrows($elements){

$str = [];

foreach ($elements as $element) {$str[]= $element->nodeValue;}

return $str;

}

function getdata($contents){

$contents = '<html lang="ru-RU"><head><meta charset="UTF-8" /></head><table>'.$contents."</table></html>";

$DOM = new DOMDocument;

$DOM->loadHTML($contents);

$items = $DOM->getElementsByTagName('tr');

$mass=[];

foreach ($items as $node) {

$mass[]=tdrows($node->childNodes);

}

return $mass;

}

$mass=getdata($table);

var_dump($mass);

Данные я передал в двухмерный массив $mass, т.е. задача «парсер таблицы в массив» решена

парсер таблицы в массив через построение DOM

Ну а тут ссылка на подобную же задачу, но вместо HTML документа — файл формата XML

Оставить комментарий html, php, массив, таблица

1 2 3 4 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31