Panel Demo
✖I'm panel n°1
x
1
<p>
2
<a class="add-panel" onclick="addPanel('top')">top</a>
3
<a class="add-panel" onclick="addPanel('after-top')">after-top</a>
4
<a class="add-panel" onclick="addPanel('before-bottom')">before-bottom</a>
5
<a class="add-panel" onclick="addPanel('bottom')">bottom</a>
6
</p>
7
<p>
8
You can also replace an existing panel:
9
</p>
10
<form onsubmit="return replacePanel(this);" name="replace_panel">
11
<input type="submit" value="Replace panel n°">
12
<input type="number" name="panel_id" min="1" value="1">
13
</form>
14
15
<script>
16
var textarea = document.getElementById("code");
17
var demo = document.getElementById("demo");
18
var numPanels = 0;
19
var panels = {};
20
var editor;
21
22
textarea.value = demo.innerHTML.trim();
23
editor = CodeMirror.fromTextArea(textarea, {
24
lineNumbers: true,
25
mode: "htmlmixed"
26
});
27
28
function makePanel(where) {
29
var node = document.createElement("div");
30
var id = ++numPanels;
31
var widget, close, label;
32
33
node.id = "panel-" + id;
34
node.className = "panel " + where;
35
close = node.appendChild(document.createElement("a"));
36
close.setAttribute("title", "Remove me!");
37
close.setAttribute("class", "remove-panel");
38
close.textContent = "✖";
39
CodeMirror.on(close, "click", function() {
40
panels[node.id].clear();
41
});
42
label = node.appendChild(document.createElement("span"));
43
label.textContent = "I'm panel n°" + id;
44
return node;
45
}
46
function addPanel(where) {
47
var node = makePanel(where);
48
panels[node.id] = editor.addPanel(node, {position: where});
49
}
50
51
addPanel("top");
52
addPanel("bottom");
53
54
function replacePanel(form) {
55
var id = form.elements.panel_id.value;
56
var panel = panels["panel-" + id];
57
var node = makePanel("");
58
59
panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top"});
60
return false;
61
}
62
</script>
✖I'm panel n°2
The panel
addon allows you to display panels above or below an editor.
Click the links below to add panels at the given position:
top after-top before-bottom bottom
You can also replace an existing panel: