Posted By

crypticsoft on 06/03/12

Tagged

Versions (?)

Last Edited at 06/03/12 03:31am

Statistics

Viewed 1360 times

Favorited by 0 user(s)

Related snippets

twitter bootstrap button toggle

/ Published in: JavaScript

Include twitter bootstrap, as of this writing is at v2.0.4 and the following JS / html to your page and also uses Glyphicons.

Highlighted TextExpand

// JS source
$(".btn-status .dropdown-menu a").click(function(){

var status = $(this).attr('data-status');
    var status_html = $(this).html();
    var toggle = $(".btn-status .btn-toggle");
    var dropdown_toggle = $(".btn-status .dropdown-toggle");
    var status_input = $("input[name='att_status']");

switch(status){
        case "publish":
            toggle.removeAttr('class').addClass('btn btn-toggle btn-success');
            dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-success');
        break;
        case "draft":
            toggle.removeAttr('class').addClass('btn btn-toggle btn-info');
            dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-info');
        break;
        case "archive":
            toggle.removeAttr('class').addClass('btn btn-toggle btn-inverse');
            dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-inverse');
        break;
    }
    toggle.html( status_html ); //reset toggle with new status
    
    if(status!='archive') toggle.find("i").addClass('icon-white'); //set icon to white
    
    status_input.attr('value',status); //set the hidden input field

});

// add this to your HTML
<div class="btn-group alignright btn-status">
          <a href="#" class="btn btn-toggle btn-info"><i class="icon-pencil icon-white"></i> Draft</a>
          <a data-toggle="dropdown" href="#" class="btn dropdown-toggle btn-info"><span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a data-status="draft" href="#"><i class="icon-pencil"></i> Draft</a></li>
            <li><a data-status="publish" href="#"><i class="icon-ok-sign"></i> Publish</a></li>
            <li><a data-status="archive" href="#"><i class="icon-lock"></i> Archive</a></li>
          </ul>
          <input type="hidden" value="draft" name="att_status">
</div>

URL: http://jsfiddle.net/cSkcy/

Report this snippet Tweet