twitter bootstrap button toggle


/ Published in: JavaScript
Save to your folder(s)

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


Copy this code and paste it in your HTML
  1. // JS source
  2. $(".btn-status .dropdown-menu a").click(function(){
  3.  
  4. var status = $(this).attr('data-status');
  5. var status_html = $(this).html();
  6. var toggle = $(".btn-status .btn-toggle");
  7. var dropdown_toggle = $(".btn-status .dropdown-toggle");
  8. var status_input = $("input[name='att_status']");
  9.  
  10. switch(status){
  11. case "publish":
  12. toggle.removeAttr('class').addClass('btn btn-toggle btn-success');
  13. dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-success');
  14. break;
  15. case "draft":
  16. toggle.removeAttr('class').addClass('btn btn-toggle btn-info');
  17. dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-info');
  18. break;
  19. case "archive":
  20. toggle.removeAttr('class').addClass('btn btn-toggle btn-inverse');
  21. dropdown_toggle.removeAttr('class').addClass('btn dropdown-toggle btn-inverse');
  22. break;
  23. }
  24. toggle.html( status_html ); //reset toggle with new status
  25.  
  26. if(status!='archive') toggle.find("i").addClass('icon-white'); //set icon to white
  27.  
  28. status_input.attr('value',status); //set the hidden input field
  29.  
  30. });
  31.  
  32. // add this to your HTML
  33. <div class="btn-group alignright btn-status">
  34. <a href="#" class="btn btn-toggle btn-info"><i class="icon-pencil icon-white"></i> Draft</a>
  35. <a data-toggle="dropdown" href="#" class="btn dropdown-toggle btn-info"><span class="caret"></span></a>
  36. <ul class="dropdown-menu">
  37. <li><a data-status="draft" href="#"><i class="icon-pencil"></i> Draft</a></li>
  38. <li><a data-status="publish" href="#"><i class="icon-ok-sign"></i> Publish</a></li>
  39. <li><a data-status="archive" href="#"><i class="icon-lock"></i> Archive</a></li>
  40. </ul>
  41. <input type="hidden" value="draft" name="att_status">
  42. </div>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.