Метка: html

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

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>";	
КонецПроцедуры

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

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

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

WEB

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

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

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

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

<input type="number" step=".01" onchange="this.value = parseFloat(this.value).toFixed(2);">
два знака после запятой в поле input

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

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

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;
            }
        }
Оставить комментарий , ,

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

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;    
}

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

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

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

$(".application").show()

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

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

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

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>

Сначала я хотел решить задачу «в лоб», а именно искать теги в тексте, писать функционал по вычленению данных между тегами.. Но потом подумал, что «наверное всё уже придумано до нас», для подобных задач. Ну и собственно оказался прав. Задачу решил без лишних усилий в течении минут 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);

Так я получаю построенное 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);

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

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

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

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