includeHTML - простая модульная разработка пользовательского интерфейса приложения на HTML/JS/CSS


Верстаете многостраничные шаблоны для сайтов, разрабатываете сложную админку, создаёте мобильное, PWA, RIA или SPA-приложение?
Этот инструмент поможет "склеивать" вашу вёрстку и JS-код внутри приложения максимально просто и удобно, и, разумеется, динамически управлять загрузкой любых блоков, стилей и javascript-скриптов на протяжении всей работы приложения.

includeHTML - решение всех проблем в плане модульной разработки интерфейса и предотвращение полной перезагрузки страницы при обновлении одного или нескольких блоков!

Поддержка работы в следующих браузерах: IE9+, FireFox, Chrome и других.
Поддержка протоколов: http://, https://, file:///
Вставка через теги или javascript: HTML, JS, CSS, TXT

Рекурсивная загрузка блоков из других блоков и вложенных каталогов.


Давайте посмотрим более подробно на то, что может данная библиотека.


Основные преимущества:

1. Всего ОДНА ФУНКЦИЯ!
2. Вставка любой HTML-разметки через HTML-тег или через JS-функцию.
3. Асинхронная и синхронная загрузка (по желанию).
4. Рекурсивная загрузка всех вложенных зависимых блоков.
5. Создание своей функции-обработчика после окончания загрузки нужного блока.
6. Возможность любой компоновки блоков (включая бесконечную вложенность одних в другие!) на одной странице.
7. Возможность многократного повторного использования блока(-ов) на разных страницах.
8. Возможность создания своих представлений интерфейса (layouts) в зависимости от целей конкретного пункта в главном (или второстепенном) меню раздела/категории/страницы.


Подключение:
<script src="js/includeHTML.js"></script>

Загрузка блока (пример):
<div data-src="header.html"></div>

Загрузка любым тегом (HTML, асинхронная):
<div data-src="menu.html"></div>
<div data-include="menu.html"></div>
<include src="menu.html"></include>
<div data-src="js/1.js"></div>
<div data-src="log"></div>

Асинхронная загрузка (javascript):
<script>
   includeHTML('header.html', document.getElementById('header'));
   includeHTML('menu.html', document.getElementById('mainMenu'));
   includeHTML('green.css');
   includeHTML('js/1.js');
   includeHTML('log.txt','log');
</script>

Синхронная загрузка (javascript):
<script>
  includeHTML('header.html', document.getElementById('header'), function(){
    includeHTML('menu.html', document.getElementById('mainMenu'));
  });
</script>

inlcudeHTML крайне проста в использовании и, поэтому, это вся документация!

Код библиотеки inlcudeHTML (и demo) доступен на github.com: Перейти


Подписка на новости:

Самые полезные и признанные экспертами публикации в сферах IT-бизнеса и Web-разработки:

Сертификат

Certificate for nickname xmoonlight, is registered to: https://sitecoder.blogspot.com