Add Tab - Direct

by Andy Blueman

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<BR />
<div id="dialog" title="Tab data">
    <form>
        <fieldset class="ui-helper-reset">
<label for="tab_title">Title</label>
            <input type="text" name="tab_title" id="tab_title" value="Tab Title" class="ui-widget-content ui-corner-all">

            
        </fieldset>
    </form>
</div>
    
<div id="tabs">
    <ul class="uloutline">
        <li><a href="#tabs-1">Notepad 1</a>  <span class="ui-icon ui-icon-closethick" role="presentation">Remove Tab</span>

        </li>
        <li><a href="#tabs-2">Notepad 2</a>  <span class="ui-icon ui-icon-closethick" role="presentation">Remove Tab</span>

        </li>
        <li><a href="#tabs-3">Notepad 3</a>  <span class="ui-icon ui-icon-closethick" role="presentation">Remove Tab</span>

        </li>
        <div id="buttonZ">
            <button id="add_tab"></button>
        </div>
        <div class="clearZ"></div>
    </ul>
    <div id="tabs-1">
        <textarea id="notepad1"></textarea>
    </div>
    <div id="tabs-2">
        <textarea id="notepad2"></textarea>
    </div>
    <div id="tabs-3">
        <textarea id="notepad3"></textarea>
    </div>
</div>

CSS

body {
    font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 65%;
}
#dialog label, #dialog input {
    display:block;
}
#dialog label {
    margin-top: 0.6em;
}
#dialog input, #dialog textarea {
    width: 95%;
}
#tabs {
    margin-top: 2em;
}
#tabs li .ui-icon-closethick {
    float: left;
    margin: 0.3em 0.3em 0 0;
    cursor: pointer;
}
#add_tab {
    cursor: pointer;
    margin: 0.3em 0.3em 0 0;
}
.uloutline {
    outline: 0px solid green;
}
#buttonZ {
    float:right;
    outline: 0px solid grey;
}
.clearZ {
    clear:both;
    outline: 0px solid red;
}
/*-----------------------------------------*/
 #tabs {
    padding: 0px;
}
#tabs .ui-tabs-nav {
    background: transparent;
    border-width: 0px 0px 1px 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
#tabs .ui-tabs-panel {
    margin: 0.0em 0.2em 0.2em 0.2em;
}
#tabs .ui-tabs-nav li {
    margin-top: 0.0em;
    font-size: 80%;
}
#tabs .ui-tabs-nav li.ui-tabs-selected, #tabs .ui-tabs-nav li.ui-state-active {
    margin-top: 0.2em;
    font-size: 80%;
}
.ui-button-text {
    font-size: 75%;
}
.ui-icon-closethick {
    float: left;
    margin: 0.3em 0.3em 0 0;
    cursor: pointer;
}

JavaScript

//src http://tinymce.cachefly.net/4.1/tinymce.min.js
tinymce.init({
    selector: 'textarea'
});
// --------------------------------------------------

$(function () {
    var tabTitle = $("#tab_title"),
        tabContent = $("#tab_content"),
        tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",

        tabCounter = 4; // Why isnt this found out automagically? Starting tab number.

    var tabs = $("#tabs").tabs();


    // modal dialog init: custom buttons and a "close" callback resetting the form inside
    var dialog = $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Add: function () {
                addTab();
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            form[0].reset();
        }
    });

    // addTab form: calls addTab function on submit and closes the dialog
    var form = dialog.find("form").submit(function (event) {
        addTab();
        dialog.dialog("close");
        event.preventDefault();
    });

    // actual addTab function: adds new tab using the input from the form above
    function addTab() {
        var label = tabTitle.val() || "Tab " + tabCounter,
            id = "tabs-" + tabCounter,
            li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
            tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

        tabs.find(".ui-tabs-nav").prepend(li);
        tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
        tabs.tabs("refresh");
        tabCounter++;
    }

    // addTab button: just opens the dialog
    $("#add_tab").button().click(function () {
        dialog.dialog("open");
    });
    $("button:first").button({
        icons: {
            primary:...