jQuery UI Taskbar - Bottom Menu

by bizamajig

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="https://github.com/cowboy/jquery-bbq/raw/v1.2.1/jquery.ba-bbq.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<div id="switcher"></div>

<div id="viewport"></div>
<div id="taskbar"></div>

CSS

html, body {
    font-size: .9em;
    overflow: hidden;
}

#taskbar {
    position: absolute;
    height: 31px;
    bottom: 0;
    left: 0;
    right: 0;
}

#viewport {
    position: absolute;
    bottom: 32px;
    left: 0;
    top: 0;
    right: 0;
    overflow: hidden;
}

.ui-viewport {
    width: 100%;
    height: 100%;
    border: 0;
    overflow: auto;
}

.ui-taskbar {
    overflow: visible;
    vertical-align: bottom;
}

.ui-taskbar ul li {
    position: relative;
    float: left;
    vertical-align: middle;
}

.ui-taskbar ul li a.ui-state-default {
    position: relative;
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    vertical-align: middle;
    border-width: 0;
    border-right-width: 1px;
}

.ui-taskbar ul li.ui-sortable-helper a {
    border-left-width: 1px;
}

.ui-taskbar ul li a.ui-state-active {
    position: relative;
    margin-top: -1px;
    margin-bottom: 1px;
}

.ui-taskbar ul li:first-child a.ui-state-active {
    border-left-color: transparent;
}

.ui-taskbar ul li.ui-state-highlight {
    border-width: 0;
    border-right-width: 1px;
}

.ui-taskbar ul li a span.ui-icon {
    display: inline-block;
    margin-bottom: -3px;
}

.ui-taskbar ul li a span.ui-icon:first-child {
    margin-right: 8px;
}

.ui-taskbar ul li a span.ui-icon:last-child {
    margin-left: 3px;
}

.ui-taskbar-bottom {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.ui-taskbar-top {
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.ui-taskbar .ui-icon.dashboard {
    background: url(//static.maklarpaket.se/admin/img/icons/dashboard.png);
}

.ui-taskbar .ui-icon.settings {
    background: url(//static.maklarpaket.se/admin/img/icons/application.png);
}

.ui-taskbar .ui-icon.users {
    background: url(//static.maklarpaket.se/admin/img/icons/user.png);
}

.ui-taskbar .ui-icon.loading {
    background: url(//static.maklarpaket.se/admin/img/icons/loading.gif) !important;
}

JavaScript

(function($){

var increments = 0;
$.widget("ui.taskbar",{
    options: {
        viewport: "#viewport",
        location: "bottom",
        loadingIcon: "loading.png"
    },
    _init: function() {
        var self = this;
        
        // task placeholder
        this.tabs = {};
        this.viewports = {};
        
        // taskbar
        this.taskbar = $("<ul></ul>").sortable({
            placeholder: "ui-state-highlight",
            revert: true,
            axis: "x",
            tolerance: "pointer",
            start: function(e,ui){
                ui.placeholder
                    .height(ui.item.innerHeight())
                    .width(ui.item.innerWidth());
                ui.helper.width(ui.helper.width()+1);
            },
            stop: function(e,ui){
                console.log(ui);
            }
        }).disableSelection();
        
        // container
        this.element
            .addClass("ui-taskbar ui-widget ui-widget-content ui-widget-header ui-state-default")
            .append(this.taskbar);
        
        if (this.options.location == "bottom") {
            this.element.addClass("ui-taskbar-bottom");
        }
        
        // viewport container
        this.viewportContainer = $(this.options.viewport);
        
        // bind to hashchange, depends on BBQ
        $(window).bind('hashchange', function(e) {
            var url = $.param.fragment();
            self.taskbar.find("a[href='#"+url+"']:not(.ui-state-active)").click();
        });
        
    },
    add: function(task, options){
        // generate unique id
        task.id = increments++;
        // create tab
        this.tabs[task.id] =
            new $.ui.taskbar.tab(this)._create(task);
        // create viewport
        this.viewports[task.id] =
            new $.ui.taskbar.viewport(this)._create(task);
        
        if (this.taskbar.find('li').length > 1) {
            this.taskbar.find('span.ui-icon-close:hidden').show();
        } else...