twitter引导按钮切换

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了twitter引导按钮切换相关的知识,希望对你有一定的参考价值。

Include twitter bootstrap, as of this writing is at v2.0.4 and the following JS / html to your page and also uses Glyphicons.
  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>

以上是关于twitter引导按钮切换的主要内容,如果未能解决你的问题,请参考以下文章

Twitter引导单选按钮不起作用

Bootstrap单选按钮切换问题

样式化 twitter 引导按钮

Twitter 引导重置按钮

在按钮中添加 twitter 引导图标

如何使 twitter 引导按钮更大?