Customisable Toolbar (Context Menu + Cookies) - Blowsie

by blowsie

HTML

<script src="http://dl.dropbox.com/u/14037764/Development/cdn/jquery.edocuments.js"></script>
<ul id="toolbar">
    <li>Save</li>
    <li>Edit</li>
    <li>Print</li>
    <li>Bold</li>
    <li>Italic</li>
</ul>



<ul id="myToolMenu" class="contextMenu">
    <li>Buttons</li>
    <li class="Save separator"><a href="#Save">Save</a></li>
    <li class="Edit"><a href="#Edit">Edit</a></li>
    <li class="Print"><a href="#Print">Print</a></li>
    <li class="Bold"><a href="#Bold">Bold</a></li>
    <li class="Italic"><a href="#Italic">Italic</a></li>
</ul>

CSS

#toolbar {min-width:100px; min-height: 100px; background:#eee; display:block}
#toolbar li { display:inline; background:moccasin; margin:1px; padding:5px; border:1px solid darkorange; font-size:11px; display:none;}
#myToolMenu {font-size:11px;}
.on {background:yellow}
/*=============CONTEXT MENU=================*/
.contextMenu {
    position: absolute;
    width: 120px;
    z-index: 99999;
    border: solid 1px #CCC;
    background: #EEE;
    padding: 0px;
    margin: 0px;
    display: none;
}
.contextMenu LI {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.contextMenu A {
    color: #333;
    text-decoration: none;
    display: block;
    line-height: 20px;
    height: 20px;
    background-position: 6px center;
    background-repeat: no-repeat;
    outline: none;
    padding: 1px 5px;
    padding-left: 28px;
}
.contextMenu LI.hover A {
    color: #FFF;
    background-color: #16AAFF;
}
.contextMenu LI.disabled A {
    color: #AAA;
    cursor: default;
}
.contextMenu LI.hover.disabled A {
    background-color: transparent;
}
.contextMenu LI.separator {
    border-top: solid 1px #CCC;
}

JavaScript

$('#toolbar li').each(function() {
    var text = $(this).text();
    if ($.cookie('tools' + text) == '1') {
        $('.' + text).addClass('on');
        $('#toolbar li:contains(' + text+ ')').show();
    }
});


$("#toolbar").contextMenu({
    menu: 'myToolMenu'
}, function(action, el, pos) {
    if ($('.' + action).is('.on')) {
        $('.' + action).removeClass('on');
        $('#toolbar li:contains(' + action + ')').hide();
        $.cookie('tools' + action, '0', {
            expires: 100,
            path: '/'
        });
    }
    else {
        $('.' + action).addClass('on');
        $('#toolbar li:contains(' + action + ')').show();
        $.cookie('tools' + action, '1', {
            expires: 100,
            path: '/'
        });
    }
});