bootstrap menus test

by antouank

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<div class="container menus">
    <!-- menu button original -->
    <span>menu button original</span>
    <div class="btn-group"> 
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            <!-- <i class="icon-i"></i> -->
            <i class="icon-black icon-cog"></i>
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <!-- dropdown menu links -->
            <li>
                <a>Option 1</a>
            </li>
                <li class="divider"></li>
            <li>
                <a class="optionToChange" data-run="changeMe">Option 2</a>
            </li>
            <li>
                <a>Option 3</a>
            </li>
        </ul>
    </div>
    
    <div class="separator"></div>

    <!-- menu button 2 -->
    <span>menu button 2</span>
    <div class="btn-group"> 
        <a class="btn dropdown-toggle dropdown-toggle-small" data-toggle="dropdown" href="#">
            <span class="icon"></span>
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <!-- dropdown menu links -->
            <li>
                <a>Option 1</a>
            </li>
                <li class="divider"></li>
            <li>
                <a class="optionToChange" data-run="changeMe">Option 2</a>
            </li>
            <li>
                <a>Option 3</a>
            </li>
        </ul>
    </div>

    <div class="separator"></div>

    <!-- menu button 3 -->
    <span>menu button 3 (left)</span>
    <div class="btn-group" style="float: right;"> 
        <a class="btn dropdown-toggle dropdown-toggle-small" data-toggle="dropdown" href="#">
            <span...

CSS

[class*="span"] {
    background: #EEF;
}

.icon-i {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('https://dev-rm.teamviewer.com/Content/themes/base/images/gear.png');
}

/* override for gear icon */
.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('https://dev-rm.teamviewer.com/Content/themes/base/images/gear.png');
}

.dropdown-toggle-small {
    height: 20px;
    padding: 4px 6px;
}

/* override to left bottom */
.dropdown-menu.leftMenu {
    left: auto;
    right: 0;
    float: right; /* needed? */
}


/* icon before text */
.iconBefore:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('https://dev-rm.teamviewer.com/Content/themes/base/images/gear.png');
}

.menus {
    width: 200px;
    margin: 10px;
    padding: 10px;
    border: dotted 1px #999;
}

.separator {
    height: 20px;
}

JavaScript

var fMap = [];

fMap['changeMe'] = function(){
    var $this = $(this),
        text = $this.text();
    console.log(text);
    $this.text(text+text);
};

$('.optionToChange').click(function(){
    fMap[$(this).data('run')].apply(this);
});