Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/ace-editor-multiple-tabs-js.markdown

Created May 2, 2023 12:26
Show Gist options
  • Save neisdev/ebc888c61ae2f2fc0a5360294c1601df to your computer and use it in GitHub Desktop.
Save neisdev/ebc888c61ae2f2fc0a5360294c1601df to your computer and use it in GitHub Desktop.
Download ZIP
Ace Editor Multiple Tabs JS
Raw
index.html
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/4ef6481b3d.js"></script>
</head>
<body>
<div class="container">
<h3>Inline List</h3>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li id="addTabIcon" role="presentation" onclick="Editor.addNewTab()"><a href="#"><i class="fa fa-plus-square" aria-hidden="true"></i>
</a></li>
</ul>
</div>
</body>
</html>
Raw
script.js
var Editor = Editor || {};
Editor = {
tabs : 0,
addNewTab : function(){
var self = this;
var addTab = document.getElementById('addTabIcon');
var liElement = document.createElement('LI');
liElement.setAttribute('role','presentation');
var iElement = document.createElement('SPAN');
iElement.className = 'fa fa-times';
iElement.addEventListener('click', function(event){
self.deleteTab(iElement);
}, false);
var anchorElement = document.createElement('A');
anchorElement.href = "#";
this.tabs++;
anchorElement.appendChild(iElement);
var textChild = document.createElement('SPAN');
textChild.innerHTML = 'Tab[' + this.tabs + ']&nbsp;&nbsp;';
anchorElement.insertBefore(textChild, iElement);
liElement.appendChild(anchorElement);
addTab.parentNode.insertBefore(liElement, addTab);
},
deleteTab : function(tab){
while(tab.nodeName != 'LI'){
tab = tab.parentNode;
}
tab.parentNode.removeChild(tab);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment