HTML-многоуровневый шаблон (только HTML и JS)

Привет Я хочу сделать что-то очень простое: многоуровневая система шаблонов, использующая только HTML и JS.HTML-многоуровневый шаблон (только HTML и JS)

Мне хотелось бы сделать это только с HTML, я попытался использовать теги объектов и встраивания, но я не могу заставить его работать должным образом (вставка не отображается, а объект создает новый HTML-документ с и, некрасиво).

Итак, в следующий раз я попробовал handlebars.js, но мне не удалось его использовать, чтобы поместить HTML из файла в другой.

Я просто хочу отделить отдельные компоненты моей страницы от разных HTML-подобных документов (но не полных HTML-документов, только один с только заголовком, один только с навигационным меню и т. Д.). Затем на «уровне 2» у меня был бы «структурный» документ HTML-тела, который бы упорядочил предыдущие элементы, как я хочу (одна структура могла иметь меню слева, содержимое справа и нижний колонтитул, другое - меню на верхний, полноразмерный контент и заголовок и т. д., как разные темы CMS, намного проще). Затем, наконец, на «уровне 3» мои «реальные» страницы будут использовать шаблон «структура», и тогда, я думаю, я должен использовать что-то вроде рулей для передачи контента, заголовков и т. Д. До уровня 2 и снова до уровня 1.

Итак, есть ли простой способ сделать это? Без необходимости переписывать всю JS-библиотеку: P И если вы считаете, что handlebars.js подойдет моим потребностям (но мне действительно не нужны динамические части, просто заголовок и контент для каждой страницы, возможно, что-то, чтобы обрабатывать текущую позицию на веб-сайт для управления меню и панировки), не могли бы вы рассказать мне, как использовать его для включения HTML из одного файла в другой?

Большое спасибо :)

EDIT

Ну после того, как немного изо всех сил, я DIT это действительно легко только с JQuery. Я действительно не знаком с JavaScript (но я все еще немного стыдно) вот путь:

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test</title> 
    </head> 
    <body> 
     <script src="jquery.js"></script> 
     <script> 
      $(document).ready(function() { 
       $("body").load("structure.html", function() { 
        $("nav").load("nav.html"); 
        $("section").load("section.html", function() { 
         $("section hgroup h1")[0].innerHTML = document.title; 
        }); 
        $("footer").load("footer.html"); 
       }); 
      }); 
     </script> 
    </body> 
</html>

с structure.html, содержащие только пустые теги в порядке, вы хотите их следующим образом:

и раздел, nav и footer.html, охватывающий то, что должно быть внутри соответствующих тегов.

источник

2014-02-11 DeleteMePlease

Похоже, http://codegolf.stackexchange.com/ более подходит для такого вопроса (и даже не уверен) – davidkonrad

-1

Не было бы проще просто использовать пару фреймов? Что-то вроде:

<html> 
    <body> 
     <iframe src="nav.html"/> 
     <iframe src="content.html"/> 
    </body> 
</html>

Или я не понимаю ваш вопрос?

источник

2014-02-11 23:54:01 meriton

Но проблема с этим, как и с объектом, заключается в том, что он вставляет полный документ внутри страницы как это: ' ... <объект данных =" нав.HTML»Тип = "текст/html"> #document нав тело ' И это просто неправильно. Пробовал с IFRAME он делает то же самое. – DeleteMePlease

Почему это неправильно? Почему возникает проблема с полным документом? – meriton

Ну, с полным документом внутри другого, не так ли? Должен быть только один , с одним и т. Д., В противном случае страница недействительна. При использовании iFrame я получил полную страницу, вложенную в основную. – DeleteMePlease

HTML-многоуровневый шаблон (только HTML и JS)

ответ

Смежные вопросы