twitter引导按钮切换

Posted 2021-02-24

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

// 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>