Этот инструмент поможет "склеивать" вашу вёрстку и 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: Перейти