Конструктор HTML, CSS и javascript

11.01.25

Разработка - Инструментарий разработчика

+126 –

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование		По подписке [?]	Купить один файл
Конструктор HTML, CSS и javascript .epf 14,38Kb ver:1.0 167	167	Скачать (3 SM)	Купить за 2 450 руб.

Как работать

Пользовательский интерфейс обработки состоит из трех блоков, слева направо:

• Иерархия элементов HTML в виде дерева;

• Область редактирования текущего (выделенного в дереве) элемента;

• Просмотр результата.

Состав и структуру элементов программист определяет сам. Предполагается, что одним элементом в иерархии является узел (тег HTML), однако это не является обязательным правилом. К примеру, все функции JS или несколько логически взаимосвязанных можно поместить в один элемент иерархии. Точно так же и с CSS.

Пример работы

Выведем веселенькую анимацию.

1. Разносим следующую заготовку страницы в обработке так, как на картинке:

<!DOCTYPE html>
<HTML>
	<style type="text/css">
	</style>
	<body>
	</body>
	<script type="text/javascript">
	</script>
</HTML>

2. Выделим строку с объявлением стилей (<style...), нажмем кнопку "Внутрь" и в содержимое вставим следующий текст со стилями CSS:

CSS

.aquarium {
  position: relative;
  overflow: hidden;
  background: white;
  width: 800px; height: 500px;
  margin: auto;
}
  .aquarium *, .aquarium *::before, .aquarium *::after {
    position: absolute;
    content: '';
  }
  .aquarium__table {
    left: 230px; top: 381px;
    width: 341px; height: 6px;
    border-radius: 3px;
    background: black;
  }
    .aquarium__table:before {
      left: 105px; top: -15px;
      width: 131px; height: 19px;
      box-sizing: border-box;
      border-radius: 6px;
      border: 4px solid black;
      background: #00AAFF;
    }
  .aquarium__aquarium {
    left: 296px; top: 223px;
    width: 209px; height: 148px;
    box-sizing: border-box;
    border: 5px solid black;
    border-radius: 40px 40px 50px 50px / 74px 74px 74px 74px;
    box-shadow: inset -30px 0 0 0 rgba(54, 125, 231, 0.2);
    overflow: hidden;
    z-index: 1;
  }
  .aquarium__water {
    left: 0; top: 39px;
    width: 100%; height: 100%;
    opacity: .5;
    background: #5bb8ff;
    animation: sponge-water 2.5s linear infinite;
  }
  .aquarium__drops {
    top: 142px; left: 304px;
    width: 190px; height: 125px;
    overflow: hidden;
  }
  .aquarium__drop {
    top: 100px; left: 93px;
    width: 8px; height: 8px;
    border-radius: 100%;
    background: #80D5FF;
    animation: sponge-drop 2.5s linear infinite;
  }
  .aquarium__water-column {
    top: 122px; left: 70px;
    width: 60px; height: 130px;
    opacity: .5;
    background: #5bb8ff;
    animation: sponge-water-column 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(2) {
    left: 30px; top: 25px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-1 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(3) {
    left: 140px; top: 84px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-2 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(4) {
    left: 139px; top: 58px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-3 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(5) {
    left: 48px; top: 67px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-4 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(6) {
    left: 48px; top: 92px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-5 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(7) {
    left: 140px; top: 92px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-6 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(8) {
    left: 139px; top: 93px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-7 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(9) {
    left: 48px; top: 82px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-8 2.5s linear infinite;
  }
  .aquarium__splash:nth-child(3) {
    top: 84px; left: 30px;
    height: 8px; width: 4px;
    border-radius: 2px;
    opacity: .5;
    background: #5bb8ff;
    animation: sponge-splash-1 2.5s linear infinite;
  }
    .aquarium__splash:nth-child(3):before {
      top: 22px; left: -23px;
      height: 4px; width: 8px;
      border-radius: 2px;
      background: #5bb8ff;
    }
    .aquarium__splash:nth-child(3):after {
      top: 22px; left: 18px;
      height: 4px; width: 8px;
      border-radius: 2px;
      background: #5bb8ff;
    }
  .aquarium__splash:nth-child(4) {
    top: 84px; left: 155px;
    height: 8px; width: 4px;
    border-radius: 2px;
    opacity: .5;
    background: #5bb8ff;
    animation: sponge-splash-2 2.5s linear infinite;
  }
    .aquarium__splash:nth-child(4):before {
      top: 22px; left: -23px;
      height: 4px; width: 8px;
      border-radius: 2px;
      background: #5bb8ff;
    }
    .aquarium__splash:nth-child(4):after {
      top: 22px; left: 18px;
      height: 4px; width: 8px;
      border-radius: 2px;
      background: #5bb8ff;
    }
  .aquarium__sponge-box {
    width: 86px; height: 106px;
    left: 357px; top: 233px;
    animation: sponge-box 2.5s linear infinite;
  }
  .aquarium__body {
    width: 100%; height: 100%;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 5px black, inset -10px 0 0 5px rgba(221, 165, 33, 0.47);
    border-radius: 13px;
    background: #FAEF37;
    overflow: hidden;
    animation: sponge-body 2.5s linear infinite;
  }
    .aquarium__body:before {
      top: 62px; left: 74px;
      width: 24px; height: 24px;
      box-sizing: border-box;
      background: white;
      border-radius: 100%;
      border: 5px solid black;
    }
    .aquarium__body:after {
      top: 93px; left: 14px;
      width: 24px; height: 24px;
      box-sizing: border-box;
      background: white;
      border-radius: 100%;
      border: 5px solid black;
    }
  .aquarium__body-hole {
    width: 22px; height: 22px;
    left: -3px; top: 67px;
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.1);
  }
    .aquarium__body-hole:before {
      width: 15px; height: 15px;
      left: 70px; top: -46px;
      border-radius: 100%;
      background: rgba(0, 0, 0, 0.1);
    }
    .aquarium__body-hole:after {
      width: 10px; height: 10px;
      left: 57px; top: 17px;
      border-radius: 100%;
      background: rgba(0, 0, 0, 0.1);
    }
  .aquarium__body-stripe {
    width: 23px; height: 13px;
    left: 45px; top: 0;
    border-radius: 0 10px 0 0;
    border-top: 5px solid black;
    border-right: 5px solid black;
  }
    .aquarium__body-stripe:before {
      width: 5px; height: 10px;
      left: 23px; top: 9px;
      border-radius: 3px;
      background: black;
    }
  .aquarium__face {
    width: 46px; height: 56px;
    left: 20px; top: 42px;
  }
    .aquarium__face:before {
      width: 9px; height: 9px;
      border-radius: 100%;
      background: black;
      animation: sponge-eye 2.5s linear infinite;
    }
    .aquarium__face:after {
      left: 37px; top: 0px;
      width: 9px; height: 9px;
      border-radius: 100%;
      background: black;
      animation: sponge-eye 2.5s linear infinite;
    }
  .aquarium__mouth {
    left: 13px; top: 14px;
    width: 20px; height: 14px;
    box-sizing: border-box;
    border-radius: 4px 4px 14px 14px;
    border: 3px solid black;
    border-top-width: 6px;
    background: red;
    animation: sponge-mouth 2.5s linear infinite;
  }
  .aquarium__smile {
    left: 24px; top: 12px;
    animation: sponge-smile 2.5s linear infinite;
  }
    .aquarium__smile:before {
      left: -10px;
      width: 6px; height: 6px;
      border-radius: 0 0 0 6px;
      border-bottom: 3px solid black;
      border-left: 3px solid black;
      transform: rotate(-45deg);
    }
    .aquarium__smile:after {
      left: -2px;
      width: 6px; height: 6px;
      border-radius: 0 0 0 6px;
      border-bottom: 3px solid black;
      border-left: 3px solid black;
      transform: rotate(-45deg);
    }

@keyframes sponge-splash-1 {
  0% { transform: scale(0) translateY(30px); }
  9.01% { transform: scale(0) translateY(30px); }
  16.84% { transform: scale(1) translateY(0); }
  16.9% { transform: scale(0) translateY(0); }
  72.64% { transform: scale(0) translateY(30px); }
  81.44% { transform: scale(1) translateY(0); }
  81.5% { transform: scale(0) translateY(0); }
  100% { transform: scale(0) translateY(30px); }
}
@keyframes sponge-splash-2 {
  0% { transform: scale(0) translateY(30px); }
  14.4% { transform: scale(0) translateY(30px); }
  20.64% { transform: scale(1) translateY(0); }
  20.7% { transform: scale(0) translateY(0); }
  77% { transform: scale(0) translateY(30px); }
  83.24% { transform: scale(1) translateY(0); }
  83.3% { transform: scale(0) translateY(30px); }
  100% { transform: scale(0) translateY(30px); }
}
@keyframes sponge-bubble-1 {
  0% { transform: scale(0) translate(0, 0); }
  45.9% { transform: scale(0) translate(8px, 16px); }
  46% { transform: scale(0.2) translate(8px, 16px); }
  50% { transform: scale(1) translate(17px, 33px); }
  50.1% { transform: scale(0) translate(17px, 33px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-2 {
  0% { transform: scale(0) translate(0, 0); }
  47.9% { transform: scale(0) translate(0, 0); }
  48% { transform: scale(0.2) translate(0, 0); }
  52% { transform: scale(1) translate(25px, -58px); }
  52.1% { transform: scale(0) translate(25px, -58px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-3 {
  0% { transform: scale(0) translate(0, 0); }
  50.9% { transform: scale(0) translate(0, 0); }
  51% { transform: scale(0.2) translate(0, 0); }
  55% { transform: scale(1) translate(18px, -34px); }
  55.1% { transform: scale(0) translate(18px, -34px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-4 {
  0% { transform: scale(0) translate(0, 0); }
  52.9% { transform: scale(0) translate(0, 0); }
  53% { transform: scale(0.2) translate(0, 0); }
  57% { transform: scale(1) translate(-10px, -42px); }
  57.1% { transform: scale(0) translate(-10px, -42px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-5 {
  0% { transform: scale(0) translate(0, 0); }
  54.9% { transform: scale(0) translate(0, 0); }
  55% { transform: scale(0.2) translate(0, 0); }
  60% { transform: scale(1) translate(-18px, -68px); }
  60.1% { transform: scale(0) translate(-18px, -68px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-6 {
  0% { transform: scale(0) translate(0, 0); }
  57.9% { transform: scale(0) translate(0, 0); }
  58% { transform: scale(0.2) translate(0, 0); }
  62% { transform: scale(1) translate(-2px, -68px); }
  62.1% { transform: scale(0) translate(-2px, -68px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-7 {
  0% { transform: scale(0) translate(0, 0); }
  60.9% { transform: scale(0) translate(0, 0); }
  61% { transform: scale(0.2) translate(0, 0); }
  65% { transform: scale(1) translate(20px, -68px); }
  65.1% { transform: scale(0) translate(20px, -68px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-8 {
  0% { transform: scale(0) translate(0, 0); }
  62.9% { transform: scale(0) translate(0, 0); }
  63% { transform: scale(0.2) translate(0, 0); }
  67% { transform: scale(1) translate(-8px, -56px); }
  67.9% { transform: scale(0) translate(-8px, -56px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-eye {
  9.36% { transform: scale(1); }
  9.37% { transform: scale(0); }
  14.0% { transform: scale(0); }
  14.01% { transform: scale(1); }
}
@keyframes sponge-mouth {
  0% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(1);
    background: red;
  }
  9.36% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(0);
    background: red;
  }
  28.08% {
    border-radius: 100%;
    transform: scale(0);
    background: black;
  }
  40.56% {
    border-radius: 100%;
    transform: scaleY(1.4);
    background: black;
  }
  42.12% {
    border-radius: 100%;
    transform: scaleY(1.4);
    background: black;
  }
  48.36% {
    border-radius: 100%;
    transform: scale(0);
    background: black;
  }
  76.4% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(0);
    background: red;
  }
  76.44% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(0.3);
    background: red;
  }
  93.6% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(1);
    background: red;
  }
  100% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(1);
    background: red;
  }
}
@keyframes sponge-smile {
  0%, 48.2% { opacity: 0; }
  48.36%, 76.44% { opacity: 1; }
  76.5%, 100% { opacity: 0; }
}
@keyframes sponge-water {
  6.24% { transform: translateY(0); }
  12.48% { transform: translateY(-11px); }
  78% { transform: translateY(-11px); }
  85.8% { transform: translateY(0); }
}
@keyframes sponge-drop {
  0% { transform: scale(0) translate(0, 24px); }
  7% { transform: scale(0) translate(0, 24px); }
  15.44% { transform: scale(2) translate(0, -36px); }
  27.8% { transform: scale(0) translate(0, 24px); }
  100% { transform: scale(0) translate(0, 24px); }
}
@keyframes sponge-water-column {
  0% { transform: scaleX(0) translateY(20px); }
  7.8% { transform: scaleX(1) translateY(20px); }
  18.72% { transform: scaleX(0.1) translateY(-12px); }
  29.64% { transform: scaleX(0.3) translateY(28px); }
  81.12% { transform: scaleX(1.4) translateY(28px); }
  95.16% { transform: scaleX(0) translateY(-132px); }
  100% { transform: scaleX(0) translateY(-132px); }
}
@keyframes sponge-box {
  0% { transform: translateY(-145px); }
  9.36% { transform: translateY(20px); }
  18.72% { transform: translateY(-5px); }
  28.08% { transform: translateY(-7px); }
  43.68% { transform: translateY(0px); }
  60.84% { transform: translateY(14px); }
  78% { transform: translateY(14px); }
  85.8% { transform: translateY(-144px); }
  93.6% { transform: translateY(-197px); }
  100% { transform: translateY(-164px); }
}
@keyframes sponge-body {
  0% { transform: rotate(-134deg) scale(1) translateX(0); }
  9.36% { transform: rotate(0deg) scale(1) translateX(0); }
  48.36% { transform: rotate(0deg) scale(1) translateX(0); }
  59.28% { transform: rotate(0deg) scale(0.95) translateX(0); }
  60.84% { transform: rotate(0deg) scale(0.9) translateX(-1px); }
  62.4% { transform: rotate(0deg) scale(0.9) translateX(-3px); }
  65.52% { transform: rotate(0deg) scale(0.9) translateX(3px); }
  68.64% { transform: rotate(0deg) scale(0.9) translateX(-3px); }
  71.76% { transform: rotate(0deg) scale(0.9) translateX(5px); }
  74.88% { transform: rotate(0deg) scale(0.9) translateX(-5px); }
  78% { transform: rotate(0deg) scale(0.9) translateX(0); }
  85.8% { transform: rotate(135deg) scale(1) translateX(0); }
  93.6% { transform: rotate(180deg) scale(1) translateX(0); }
  100% { transform: rotate(210deg) scale(1) translateX(0); }
}

3. Выделим строку с телом HTML (<body>), нажмем кнопку "Внутрь", в поле "Тег и его свойства" вставим <div class="aquarium"> а в поле "содержимое" - все блоки div:

div's

<div class="aquarium__table"></div>
  <div class="aquarium__aquarium">
    <div class="aquarium__water"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
  </div>
  <div class="aquarium__drops">
    <div class="aquarium__drop"></div>
    <div class="aquarium__water-column"></div>
    <div class="aquarium__splash"></div>
    <div class="aquarium__splash"></div>
  </div>
  <div class="aquarium__sponge-box">
    <div class="aquarium__body">
      <div class="aquarium__body-stripe"></div>
      <div class="aquarium__body-hole"></div>
    </div>
    <div class="aquarium__face">
      <div class="aquarium__mouth"></div>
      <div class="aquarium__smile"></div>
    </div>
  </div>

Готово. Нажимаем кнопку "Сформировать" и любуемся демонстрационной анимацией.

Обработкой удобно отлаживать вызов функций javascript из встроенного языка платформы 1С и наоборот, вызов процедур и функций 1С из странички html с javascript.

Проверено на платформе 8.3.21.1709 (64), но будет работать на всех версиях платформы 8.3.

Смотрите и другие мои публикации - делаю удобные инструменты для работы.

Обработка 1С HTML CSS Javascript инструменты разработки web-разработка

+126 –

См. также

Infostart Toolkit — Инструменты разработчика 1С 8.3

Инструментарий разработчика Роли и права Запросы СКД Программист Руководитель проекта Платформа 1С v8.3 Управляемые формы Запросы Система компоновки данных Платные (руб)

Инструменты для разработчиков 1С 8.3: Infostart Toolkit. Автоматизация и ускорение разработки на управляемых формах. Легкость работы с 1С.

12000 руб.

02.09.2020 169256 937 403

905

Database Compression Tool (DCT) Универсальный инструмент сжатия, свертки и конвертации баз данных 1С

Инструментарий разработчика Чистка данных Свертка базы Инструменты администратора БД Системный администратор Программист Руководитель проекта Платформа 1С v8.3 Россия Платные (руб)

Инструмент представляет собой обработку для проведения свёртки или обрезки баз данных. Работает на ЛЮБЫХ конфигурациях (УТ, БП, ERP и т.д.). Поддерживаются серверные и файловые базы, управляемые и обычные формы. Может выполнять свертку сразу нескольких баз данных и выполнять их автоматически без непосредственного участия пользователя. Решение в Реестре отечественного ПО

8400 руб.

20.08.2024 12582 99 42

101

OneDebugger - инструмент для отладки кода в 1С без использования конфигуратора

Инструментарий разработчика Программист Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Инструмент для написания и отладки кода в режиме «1С:Предприятие». Представляет собой консоль кода с возможностью пошаговой отладки, просмотра значений переменных любых типов, использования процедур и функций, просмотра стека вызовов, вычисления произвольных выражений на встроенном языке в контексте точки останова, синтаксического контроля и остановки по ошибке. В консоли используется удобный редактор кода с подсветкой, контекстной подсказкой, возможностью вызова конструкторов запроса и форматной строки.

9360 руб.

17.05.2024 26521 90 48

134

Infostart PrintWizard (конструктор печатных форм)

Пакетная печать Печатные формы Инструментарий разработчика Программист Платформа 1С v8.3 Запросы 1С:Зарплата и кадры бюджетного учреждения 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 Платные (руб)

Инструмент, позволяющий абсолютно по-новому взглянуть на процесс разработки печатных форм. Благодаря конструктору можно значительно снизить затраты времени на разработку печатных форм, повысить качество и "прозрачность" разработки, а также навести порядок в многообразии корпоративных печатных форм.

22200 руб.

06.10.2023 16819 41 15

SALE! %

PowerTools: Инструменты администратора 1С 8.3

Инструментарий разработчика Инструменты администратора БД Системный администратор Программист Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Россия Платные (руб)

Универсальный инструмент программиста для администрирования конфигураций. Сборник наиболее часто используемых обработок под единым интерфейсом.

~~4800~~ 3840 руб.

14.01.2013 190540 1150 0

918

Infostart DataFormWizard: Управление данными и формами 1С 8.3

Инструменты администратора БД Инструментарий разработчика Роли и права Программист Платформа 1С v8.3 Конфигурации 1cv8 Россия Платные (руб)

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

15000 руб.

10.11.2023 11390 40 27

Конструктор АРМ

Инструментарий разработчика Платформа 1С v8.3 Конфигурации 1cv8 1С:ERP Управление предприятием 2 Платные (руб)

Разработка Конструктор автоматизированных рабочих мест "Конструктор АРМ" реализована в виде расширения и является универсальным инструментом для создания АРМ любой сложности в пользовательском режиме.

3600 руб.

27.12.2024 768 2 0

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Системный администратор Программист Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016 55300 17 23

Отзывы

24. adhocprog 1143 29.04.23 01:04 Сейчас в теме

Ниже добавил вариант css и html для тех, кому ближе велосипед )

Прикрепленные файлы:

Css2.txt
Div2.txt

22. adhocprog 1143 29.04.23 00:53 Сейчас в теме

Потратил 20 минут, но взлетело )

Прикрепленные файлы:

Остальные комментарии

Подписаться на ответы Инфостарт бот

Свернуть все

1. ubnkfl 10.04.23 22:36 Сейчас в теме

Используете ли вы свой механизм в реальной работе? Можете показать примеры, когда это нужно?

3. acces969 365 11.04.23 08:31 Сейчас в теме

(1) Постоянно. Особенно при разработке мобильных приложений - там все на веб-страницах. Потому и написал этот инструмент. К сожалению, показывать их я не могу.

Прикрепленные файлы:

14. maksa2005 553 12.04.23 07:05 Сейчас в теме

(3)тут от части html

30. acvatoris 557 04.08.23 14:22 Сейчас в теме

Добрый день. Вы говорите, что разрабатываете мобильные приложения в html, js. Скажите, я правильно вам понимаю, что вы при разработке мобильных приложений используйте технологическую платформу 1С, но верстаете страницы в html и навешиваете обработчики js? Если это так, то меня интересует быстродействие таких приложений. А так же не возникает ли при эксплуатации такого рода приложений каких либо непонятных моментов, например приложение просто закрылось.
Я написал с десяток несколько мобильных приложений на платформе 1С, но я не использовал веб. Но когда я открыл для себя flutter, то полностью перешел на него, это было в 2020 году. Ни на секунду об этом не жалею. (Агитирую вас поэкспериментировать с ним. :))

2. maksa2005 553 11.04.23 07:02 Сейчас в теме

Лично я красивый интерфейс для мобилки делал через dw

5. pyrkin_vanya 497 11.04.23 09:52 Сейчас в теме

(2)любопытна эта тема. Можно чуть точнее? Через что делали? Что такое dw?

7. maksa2005 553 11.04.23 10:00 Сейчас в теме

(5)через Adobe DreamWeaver мне удобнее чем через 1с.
Написано 3 успешных проекта с использованием js+html5+css. Посмотрите в гугле плей: Мастерок86 ,а там уже в разделе Автора)

11. Созинов 11.04.23 20:12 Сейчас в теме

(7) интересно было узнать, что DW еще жив. Пользовался им лет 15 назад.

13. maksa2005 553 12.04.23 07:04 Сейчас в теме

(11)жив не жив. не важно. мне удобно там)

15. Созинов 12.04.23 07:31 Сейчас в теме

(13)
(13)я без наезда, каждый выбирает свой инструмент. Интересно было узнать, что он развивается. Свои задачи он решает и решает хорошо.

19. maximus_2712 19 16.04.23 16:30 Сейчас в теме

(7) ваш мастерок какая то шляпа, это вы называете успешный проект? скачал, но зарегистрироваться не даёт, в настройках доступна отладка, сразу при открытии нужен доступ к файлам

20. maksa2005 553 16.04.23 19:22 Сейчас в теме

(19)шляпа это то что у вас на плечах, а проект был под заказчика. И правильно что Вас и не пустил)

4. sandr13 35 11.04.23 08:33 Сейчас в теме

Идеи интересные. Спасибо!

6. acces969 365 11.04.23 09:55 Сейчас в теме

Интересно - как сделал обработку бесплатной, так все переставили ставить плюсики)

8. cheshirshik 72 11.04.23 10:25 Сейчас в теме

(6) плюсик поставил. Не переживай. Ещё минус влепить могут.

9. arsvlg 11.04.23 11:03 Сейчас в теме

Большое спасибо!
Тоже сейчас размышляем на тему рисования мобильных форм.

10. akR00b 24 11.04.23 16:45 Сейчас в теме

спасибо

12. kirill_sh 2 11.04.23 21:57 Сейчас в теме

Классная тема, плюс автору в карму :)

16. Matveev_VS 166 12.04.23 09:32 Сейчас в теме

Отличная идея, интересно. Спасибо)

17. JohnyDeath 302 14.04.23 09:57 Сейчас в теме

Непонятно самое главное: откуда берутся все эти CSS и скрипты?
Надо гуглить в определенном месте? По каким ключевым словам?

18. acces969 365 15.04.23 10:58 Сейчас в теме

(17) Да, все гуглить - там ничего сложного нет, если начинать делать свое с нуля.

21. Viktor_Ermakov 371 17.04.23 15:18 Сейчас в теме

Я так и не понял чем этот инструмент облегчает работу, есть например
https://codepen.io/
Там можно сверстать страницу так же, и посмотреть.
Какую именно дополнительную пользу дает инструмент?

25. acces969 365 02.05.23 08:08 Сейчас в теме

(21) тем, что создаваемая страничка нацелена на работу с 1С, и разрабатывать, проверять ее удобно тут же, в 1С. Это позволяет, помимо прочего, решить два важных вопроса:
1. Как web-станичка нарисуется и будет работать в 1С, а не в обычных веб-браузерах
2. Отладить взаимодействие и обмен данными, вызов функций между js и исполняемым кодом 1С.
Касаемое второго пункта замечу, что сейчас такого функционала в обработке нет, но я планирую его добавить в будущем. Сейчас же, тот, кому это нужно, может сам добавить этот функционал в обработку так, как ему удобно.

26. Viktor_Ermakov 371 02.05.23 18:14 Сейчас в теме

(25)

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

Идею понял, спасибо за ответ.

22. adhocprog 1143 29.04.23 00:53 Сейчас в теме

Потратил 20 минут, но взлетело )

Прикрепленные файлы:

23. adhocprog 1143 29.04.23 00:54 Сейчас в теме

(0) Когда выйдет релиз с кнопками Сохранить/Открыть? )

24. adhocprog 1143 29.04.23 01:04 Сейчас в теме

Ниже добавил вариант css и html для тех, кому ближе велосипед )

Прикрепленные файлы:

Css2.txt
Div2.txt

27. Viktor_Ermakov 371 02.05.23 18:19 Сейчас в теме

А не сравнивали свой инструмент и вот расширение https://github.com/cpr1c/tools_ui_1c ?
Там помимо разнообразных возможностей есть так же редактор HTML.

28. ip0593 20 10.05.23 13:25 Сейчас в теме

а каким редактором/сервисов для создания html и css пользуетесь?

29. Viktor_Ermakov 371 06.07.23 13:43 Сейчас в теме

(28) я исключительно VSC, оттуда переношу уже в например макет текстовый, а его уже подсовываю в HTML поле.

31. Светлый ум 438 28.08.23 11:48 Сейчас в теме

а для XML / JSON есть такие конструкторы ?

Оставьте свое сообщение

E-mail:

Автор:

Николай Волкотюк (acces969)

Рейтинг: 365

Для получения уведомлений о новых публикациях автора подключите телеграм бот: Инфостарт бот

Публикация:

№ 1843000

Создание 10.04.23 16:30

Обновление 11.01.25 08:30

Статистика:

Просмотры 12487

Загрузки 167

Рейтинг 126

Комментарии 31

Характеристики:

Код открыт Да

Рубрики Инструментарий разработчика Работа с интерфейсом

Кому Программист

Тип файла Внешняя обработка (ert,epf)

Платформа Платформа 1С v8.3

Конфигурация Конфигурации 1cv8

Операционная система Не имеет значения

Страна Не имеет значения

Отрасль Не имеет значения

Налоги Не имеет значения

Вид учета Не имеет значения

Доступ к файлу Абонемент ($m)