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, "mousedown", function(e) {
40
e.preventDefault()
41
panels[node.id].clear();
42
});
43
label = node.appendChild(document.createElement("span"));
44
label.textContent = "I'm panel n°" + id;
45
return node;
46
}
47
function addPanel(where) {
48
var node = makePanel(where);
49
panels[node.id] = editor.addPanel(node, {position: where, stable: true});
50
}
51
52
addPanel("top");
53
addPanel("bottom");
54
55
function replacePanel(form) {
56
var id = form.elements.panel_id.value;
57
var panel = panels["panel-" + id];
58
var node = makePanel("");
59
60
panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top", stable: true});
61
return false;
62
}
63
</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: