Динамическое меню с JSON
Этот компонент позволяет загрузить список страниц, которые вы создадите, на свой будущий веб-сайт и создать из него меню.
Позже мы дадим ему немного более стильный дизайн, благодаря стильной таблице, но пока его достаточно, чтобы добавить новый кирпич в нашу CMS. Нужно просто добавить строку в JSON-файл при создании новой страницы, чтобы завершить меню.
Аякс
Это скрипт Ajax, который имеет преимущество в том, что освобождается от любого языка программирования со стороны сервера. Простая функция Ajax позволяет создать объект XHR.
Файл JSON
Этот файл, который представляет интерес для динамического меню, может автоматически создаваться приложением, особенно при создании новой статьи и ее добавлении в сводку.
Сценарий меню
Этот сценарий включается в раздел head демонстрационной страницы и вызывается для загрузки с помощью события onload:
window.onload=loadJSON
Он имеет две функции:
- loadJSON
- Она вызывает функцию создания объекта XHR и загружает файл в атрибут responseTxt. Затем его содержимое вводится в параметр функции buildMenu, вызываемой в callback (его имя - аргумент функции loadJSON).
- buildMenu
- Она начинается с вызова функции eval (), которая преобразует данный текстовый файл в аргумент в объекте JavaScript.
Затем объект проходит итеративно (он мог бы быть рекурсивно, если бы захотелось иметь подменю).
Тег хранилища находит функция DOM getElementByID и добавляет к его содержанию следующий пункт меню, присваивая его атрибуту innerHTML.
Этот сценарий также хорошо работает на локальном компьютере без сервера.
Показ
В этой демонстрации отображается меню, заданное в файле JSON gamic-menu.json.
Это благодаря сценарию JavaScript menu.js, который связан в разделе head этой страницы.
Это сценарий Ajax, он использует функцию, определенную в файле ajax.js.
Демонстрация автоматически отображает меню загрузки страницы.