-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (101 loc) · 6.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en-gb" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<base href="" />
<title>web-template-2</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<style>
pre {
overflow: auto;
}
</style>
<link rel="stylesheet" href="Stylesheets/Constants.css" />
<link rel="stylesheet" media="screen and (max-width: 719px)" href="Stylesheets/VariablesM.css" />
<link rel="stylesheet" media="screen and (min-width: 720px) and (max-width: 1079px)" href="Stylesheets/VariablesDS.css" />
<link rel="stylesheet" media="screen and (min-width: 1080px)" href="Stylesheets/VariablesDM.css" />
<link rel="stylesheet" href="Stylesheets/Apply_Common.css" />
<link rel="stylesheet" href="Stylesheets/Apply_Header.css" />
<link rel="stylesheet" href="Stylesheets/Apply_Content.css" />
<link rel="stylesheet" href="Stylesheets/Apply_Footer.css" />
<link rel="stylesheet" href="Stylesheets/Apply_Buttons.css" />
<link rel="stylesheet" href="Stylesheets/Apply_SocialMedia.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ccampbell/rainbow/themes/css/github.css" />
<meta name="author" content="Martin de Spirlet" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="msapplication-navbutton-color" content="#4285F4"> <!-- Edge / Internet Explorer -->
<meta name="theme-color" content="#4285F4"> <!-- Chrome / Firefox / Opera -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer type="text/javascript" src="Scripts/Ajax.js"></script>
<script defer type="text/javascript" src="Scripts/Device.js"></script>
<script defer type="text/javascript" src="Scripts/Dom.js"></script>
<script defer type="text/javascript" src="Scripts/Header.js"></script>
<script defer type="text/javascript" src="https://cdn.jsdelivr.net/gh/ccampbell/rainbow/dist/rainbow.min.js"></script>
</head>
<body data-ajax-text-files="header.txt footer.txt" data-ajax-xml-files="" data-device-mouse-classes="HeaderNavigationContentBlockDropdownButton" data-device-touch-classes="HeaderNavigationContentBlockItemLink" onload="Ajax_Document_StartText(Device_Touch_ReplaceClass);">
<table class="Header" data-ajax-text-file="header.txt"></table>
<div class="Spacer"></div>
<ul class="Content">
<li class="ContentBlock ContentBlock_S100M100">
<div class="ContentBlockColumn">
<div class="ContentBlockColumnRow">
<h1>web-template-2</h1>
<p>
The header and footer of this page are loaded dynamically using Ajax.
Find out more <a href="https://github.com/martindes01/web-template-2" target="_blank">here</a>.
</p>
<h2>How does it work?</h2>
<p>
The <code>body</code> element of <a href="https://github.com/martindes01/web-template-2/blob/main/header.txt" target="_blank">this page</a> has been given an HTML data attribute named <code>data-ajax-text-files</code> that specifies the space-delimited paths to <a href="https://github.com/martindes01/web-template-2/blob/main/header.txt" target="_blank">header.txt</a> and <a href="https://github.com/martindes01/web-template-2/blob/main/footer.txt" target="_blank">footer.txt</a>.
These files contain the HTML markup for the header and footer of this page.
The <code>data-ajax-text-files</code> attribute <em>must</em> be placed on the <code>body</code> element.
</p>
<pre><code data-language="html"><body data-ajax-text-files="header.txt footer.txt"></body></code></pre>
<p>
Suitable container elements have each been given a data attribute named <code>data-ajax-text-file</code> that specifies the path to one of the files.
This indicates that the content of the file at the specified path should be appended to the inner HTML of the container element.
In this case, the header and footer are inserted into <code>table</code> elements at the top and bottom of the page, respectively.
</p>
<pre><code data-language="html"><body data-ajax-text-files="header.txt footer.txt">
<table data-ajax-text-file="header.txt"></table>
...
<table data-ajax-text-file="footer.txt"></table>
</body></code></pre>
<p>
When appropriate, the asynchronous function <code>Ajax_Document_StartText(<callback>)</code> is called.
This function
</p>
<ol>
<li>
loads the files specified by <code>data-ajax-text-files</code> dynamically,
</li>
<li>
appends the contents of each file to the inner HTML of all container elements with a corresponding <code>data-ajax-text-file</code> attribute, and
</li>
<li>
executes the given callback function.
</li>
</ol>
<p>
In this case, the function is called via the <code>window.onload</code> global event handler, and the callback function prints a simple message to the console.
</p>
<pre><code data-language="html"><body data-ajax-text-files="header.txt footer.txt"
onload="Ajax_Document_StartText(function () {
console.log('Hello, World!');
});">
<table data-ajax-text-file="header.txt"></table>
...
<table data-ajax-text-file="footer.txt"></table>
</body></code></pre>
<p>
This framework can also be used to retrieve tags from XML files using the analogous <code>data-ajax-xml-files</code>, <code>data-ajax-xml-file</code> and <code>data-ajax-xml-tag</code> attributes, and the asynchronous <code>Ajax_Document_StartXml()</code> function.
Find out more <a href="https://github.com/martindes01/web-template-2" target="_blank">here</a>.
</p>
</div>
</div>
</li>
</ul>
<table class="Footer" data-ajax-text-file="footer.txt"></table>
</body>
</html>