Tabs with Content and ACE Editor

Tabs with Content and ACE Editor

by santosh_patnala

HTML

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<ul class="tabs">
    <li><a href="#">Tab 1</a>
    </li>
    <li><a href="#">Tab 2</a>
    </li>
</ul>
<!-- tab "panes" -->
<div class="panes">
    <div id="pane1">Tab1 content</div>
    <div id="pane2">function foo(items){ var x = "All this is syntax highlighted"; return x; }</div>
</div>

CSS

body {
    margin: 0;
    padding:50px 80px;
    font-size: 14px;
    font-family:"Helvetica Neue", Helvetica;
}
.panes>div {
    display:none;
    padding:15px 10px;
    border-top :1px solid #999;
    height:500px;
    font-size:14px;
    background-color:#fff;
}
ul.tabs {
    list-style:none;
    margin:0 !important;
    padding:0;
    height:30px;
}
ul.tabs li {
    float:left;
    text-indent:0;
    padding:0;
    margin:0 !important;
}
ul.tabs a {
    font-size:11px;
    display:block;
    height: 30px;
    line-height:30px;
    width: 134px;
    text-align:center;
    text-decoration:none;
    color:#333;
    padding:0px;
    margin:0px;
    position:relative;
    top:1px;
}
ul.tabs a:active {
    outline:none;
}
ul.tabs a:hover {
    color:red;
}
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
    font-size: 14px;
    cursor:default !important;
    color:#000 !important;
}
#pane2 {
    position: absolute;
    top: 80px;
    bottom: 10px;
    left: 80px;
    right: 10px;
}

JavaScript

$(function () {
    $("ul.tabs").tabs("div.panes > div");
});

var editor = ace.edit("pane2");
editor.getSession().setUseWorker(false);
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/javascript");