|
1
|
<!DOCTYPE html>
|
|
2
|
<html>
|
|
3
|
<head>
|
|
4
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
5
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
|
|
8
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
|
9
|
|
|
10
|
<link rel="stylesheet" href="https://material-components-web.appspot.com/assets/drawer/drawer.css">
|
|
11
|
<link rel="stylesheet" href="https://material-components-web.appspot.com/assets/toolbar/toolbar.css">
|
|
12
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
|
|
13
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
|
|
14
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
15
|
<title>Demo Demo</title>
|
|
16
|
|
|
17
|
<script src="https://material-components-web.appspot.com/ready.js"></script>
|
|
18
|
</head>
|
|
19
|
<body class="mdc-typography">
|
|
20
|
<header class="mdc-toolbar">
|
|
21
|
<div class="mdc-toolbar__row">
|
|
22
|
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
|
|
23
|
<div class="mdc-menu-anchor">
|
|
24
|
<a href="#" class="material-icons mdc-toolbar__icon toggle" id="fwd-pages-btn">menu</a>
|
|
25
|
<div class="mdc-menu" tabindex="-1" id="fwd-pages">
|
|
26
|
<ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true" style="transform: scale(1, 1);">
|
|
27
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.069s;" id="page1">Page 1</li>
|
|
28
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.124s;" id="page2">Page 2</li>
|
|
29
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.179s;" id="page3">Page 3</li>
|
|
30
|
</ul>
|
|
31
|
</div>
|
|
32
|
</div>
|
|
33
|
<span class="mdc-toolbar__title" id="windowTitle">Window 1 - Page 1</span>
|
|
34
|
</section>
|
|
35
|
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar" id="fwdToolbar">
|
|
36
|
</section>
|
|
37
|
</div>
|
|
38
|
<div class="mdc-toolbar__row">
|
|
39
|
<div class="mdc-menu-anchor">
|
|
40
|
<button class="mdc-button mdc-button--unelevated toggle" id="sub-menu-1-btn">
|
|
41
|
Sub-menu 1
|
|
42
|
</button>
|
|
43
|
<div class="mdc-menu" tabindex="-1" id="sub-menu-1">
|
|
44
|
<ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true" style="transform: scale(1, 1);">
|
|
45
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.069s;" id="sub-menu-1-1">Item 1-a</li>
|
|
46
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.124s;" id="sub-menu-1-2">Item 1-b</li>
|
|
47
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.179s;" id="sub-menu-1-3">Item 1-c</li>
|
|
48
|
</ul>
|
|
49
|
</div>
|
|
50
|
</div>
|
|
51
|
<div class="mdc-menu-anchor">
|
|
52
|
<button class="mdc-button mdc-button--unelevated toggle" id="sub-menu-2-btn">
|
|
53
|
Sub-menu 2
|
|
54
|
</button>
|
|
55
|
<div class="mdc-menu" tabindex="-1" id="sub-menu-2">
|
|
56
|
<ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true" style="transform: scale(1, 1);">
|
|
57
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.069s;" id="sub-menu-2-1">Item 2-a</li>
|
|
58
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.124s;" id="sub-menu-2-2">Item 2-b</li>
|
|
59
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.179s;" id="sub-menu-2-3">Item 2-c</li>
|
|
60
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.179s;" id="sub-menu-2-4-btn">
|
|
61
|
Sub-menu 2-d
|
|
62
|
<i class="material-icons">keyboard_arrow_right</i>
|
|
63
|
<div class="mdc-menu-anchor">
|
|
64
|
<div class="mdc-menu" tabindex="-1" id="sub-menu-2-4">
|
|
65
|
<ul class="mdc-menu__items mdc-list" role="menu" aria-hidden="true" style="transform: scale(1, 1);">
|
|
66
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.069s;" id="sub-menu-2-4-1">Item 2-d-a</li>
|
|
67
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.124s;" id="sub-menu-2-4-2">Item 2-d-b</li>
|
|
68
|
<li class="mdc-list-item" role="menuitem" tabindex="0" style="transition-delay: 0.179s;" id="sub-menu-2-4-3">Item 2-d-c</li>
|
|
69
|
</ul>
|
|
70
|
</div>
|
|
71
|
</div>
|
|
72
|
</li>
|
|
73
|
</ul>
|
|
74
|
</div>
|
|
75
|
</div>
|
|
76
|
<button class="mdc-button mdc-button--unelevated">
|
|
77
|
Exit
|
|
78
|
</button>
|
|
79
|
</div>
|
|
80
|
</header>
|
|
81
|
<div class="mdc-toolbar-fixed" style="display: flex">
|
|
82
|
<nav class="mdc-drawer mdc-drawer--permanent">
|
|
83
|
<div class="mdc-list-group">
|
|
84
|
<nav class="mdc-list">
|
|
85
|
<a class="mdc-list-item mdc-list-item--selected" href="#">
|
|
86
|
Module 1
|
|
87
|
</a>
|
|
88
|
<a class="mdc-list-item" href="#">
|
|
89
|
Module 2
|
|
90
|
</a>
|
|
91
|
<a class="mdc-list-item" href="#">
|
|
92
|
Module 3
|
|
93
|
</a>
|
|
94
|
<a class="mdc-list-item" href="#">
|
|
95
|
</a>
|
|
96
|
</nav>
|
|
97
|
</div>
|
|
98
|
</nav>
|
|
99
|
<main>
|
|
100
|
<div id="mainView">
|
|
101
|
<div id="p2jIframeParent" class="centered">
|
|
102
|
<div id="embeddedP2J"
|
|
103
|
name="embeddedP2J"
|
|
104
|
style="height: 530px; width: 890px; padding: 10px 5px 5px 5px; border: 1px solid;">Here is the IFRAME</div>
|
|
105
|
</div>
|
|
106
|
</main>
|
|
107
|
</div>
|
|
108
|
<script src="https://material-components-web.appspot.com/assets/material-components-web.js" async></script>
|
|
109
|
<script src="https://material-components-web.appspot.com/assets/common.js" async></script>
|
|
110
|
<script>
|
|
111
|
demoReady(function() {
|
|
112
|
$("#fwd-pages > ul > li").on("click", function(evt) { $.proxy(function() { $("#windowTitle").text(this.id); }, this, evt)(); });
|
|
113
|
|
|
114
|
var btn1 = $("<a id=\"btn1\" class=\"material-icons mdc-toolbar__icon\" aria-label=\"Download\" alt=\"Download\">file_download</a>");
|
|
115
|
var btn2 = $("<a id=\"btn2\" class=\"material-icons mdc-toolbar__icon\" aria-label=\"Print this page\" alt=\"Print this page\">print</a>");
|
|
116
|
var btn3 = $("<a id=\"btn3\" class=\"material-icons mdc-toolbar__icon\" aria-label=\"Bookmark this page\" alt=\"Bookmark this page\">bookmark</a>");
|
|
117
|
$("#fwdToolbar").append(btn1);
|
|
118
|
$("#fwdToolbar").append(btn2);
|
|
119
|
$("#fwdToolbar").append(btn3);
|
|
120
|
|
|
121
|
$("#fwdToolbar > a").on("click", function(evt) { $.proxy(function() { alert("Toolbar " + this.id); }, this, evt)(); });
|
|
122
|
|
|
123
|
{
|
|
124
|
var menuEl1 = document.querySelector('#fwd-pages');
|
|
125
|
var menu1 = new mdc.menu.MDCMenu(menuEl1);
|
|
126
|
menu1.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
|
|
127
|
var toggle1 = document.querySelector('#fwd-pages-btn');
|
|
128
|
toggle1.addEventListener('click', function() { menu1.open = !menu1.open; });
|
|
129
|
}
|
|
130
|
|
|
131
|
{
|
|
132
|
var menuEl2 = document.querySelector('#sub-menu-1');
|
|
133
|
var menu2 = new mdc.menu.MDCMenu(menuEl2);
|
|
134
|
menu2.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
|
|
135
|
var toggle2 = document.querySelector('#sub-menu-1-btn');
|
|
136
|
toggle2.addEventListener('click', function() { menu2.open = !menu2.open; });
|
|
137
|
}
|
|
138
|
|
|
139
|
{
|
|
140
|
var menuEl3 = document.querySelector('#sub-menu-2');
|
|
141
|
var menu3 = new mdc.menu.MDCMenu(menuEl3);
|
|
142
|
menu3.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.BOTTOM_START);
|
|
143
|
var toggle3 = document.querySelector('#sub-menu-2-btn');
|
|
144
|
toggle3.addEventListener('click', function() { menu3.open = !menu3.open; });
|
|
145
|
}
|
|
146
|
|
|
147
|
{
|
|
148
|
var menuEl4 = document.querySelector('#sub-menu-2-4');
|
|
149
|
var menu4 = new mdc.menu.MDCMenu(menuEl4);
|
|
150
|
menu4.setAnchorCorner(mdc.menu.MDCMenuFoundation.Corner.TOP_END);
|
|
151
|
var toggle4 = document.querySelector('#sub-menu-2-4-btn');
|
|
152
|
toggle4.addEventListener('click', function() { menu4.open = !menu4.open; });
|
|
153
|
}
|
|
154
|
|
|
155
|
});
|
|
156
|
</script>
|
|
157
|
</body>
|
|
158
|
</html>
|