Span on Dynamic UI Tabs with Tab Icon

by Darth Vader

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/google.png"></script>
<div class="grid-container"/>

CSS

.grid-tab-span {
		background-image: url('http://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/google.png');
	    background-position: left center;
	    background-repeat: no-repeat;
	    background-size: 16px auto;
	    display: inline-block;
	    padding-left: 20px;
	    width: auto;
	    height: 16px;
	}

JavaScript

$(document).ready(function () {
    var $tabContainer = $(".grid-container");
    var tabCount = 2;

    var globalCSSPrefix = "dynamic-tabs-";

    //Holds the <UL> element
    var $tabContentHolder = $("<ul>", {
        class: globalCSSPrefix + "ul grid-tab-ul"
    });

    //Random alphanumeric text.
    var linkPrefix = Math.random().toString(36).substring(2, 9);

    for (var index = 0; index < tabCount; index++) {
        var groupKey = "group-key" + index;
        var groupName = "group-name" + index;

        //Create the listitem.
        var $listItem = $("<li>", {
            class: globalCSSPrefix + "li grid-tab-li"
        });

        //Create the anchor.
        var $anchor = $("<a>", {
            href: "#" + linkPrefix + "-" + index,
            class: globalCSSPrefix + "link grid-tab-a"
        });

        //Create the span element.
        var $listTitle = $("<span>", {
            class: globalCSSPrefix + "title-" + groupKey + " grid-tab-span"
        });
        $listTitle.html(groupName);

        $anchor.append($listTitle);
        $listItem.append($anchor);
        $tabContentHolder.append($listItem);
        //Create the content holder for this span element.

        var $tabContent = $("<div>", {
            id: linkPrefix + "-" + index,
            class: globalCSSPrefix + "content grid-tab-content " + groupKey + "-content"
        });

        $tabContainer.append($tabContent);
    }

    //Prepend the tab content holder so that the div that contains the table grid is present here.
    $tabContainer.prepend($tabContentHolder);
    $tabContainer.tabs();

});