index.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="description" content="Turn checkboxes and radio buttons in toggle switches.">
  8. <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
  9. <title>Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches</title>
  10. <link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  11. <link href="docs/css/bootstrap.min.css" rel="stylesheet">
  12. <link href="docs/css/highlight.css" rel="stylesheet">
  13. <link href="dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
  14. <link href="docs/css/main.css" rel="stylesheet">
  15. <script>
  16. var _gaq = _gaq || [];
  17. _gaq.push(['_setAccount', 'UA-43092768-1']);
  18. _gaq.push(['_trackPageview']);
  19. (function () {
  20. var ga = document.createElement('script');
  21. ga.type = 'text/javascript';
  22. ga.async = true;
  23. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  24. var s = document.getElementsByTagName('script')[0];
  25. s.parentNode.insertBefore(ga, s);
  26. })();
  27. </script>
  28. </head>
  29. <body><a href="https://github.com/nostalgiaz/bootstrap-switch" id="github"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
  30. <header role="banner" class="navbar navbar-default navbar-fixed-top top">
  31. <div class="container">
  32. <div class="navbar-header">
  33. <button type="button" data-toggle="collapse" data-target="#collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="../" class="navbar-brand">Bootstrap Switch <strong>3</strong></a>
  34. </div>
  35. <nav id="collapse" role="navigation" class="collapse navbar-collapse">
  36. <ul class="nav navbar-nav">
  37. <li class="dropdown"><a href="#" data-toggle="dropdown">Download<span class="caret"></span></a>
  38. <ul class="dropdown-menu">
  39. <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip">3 (Stable)</a></li>
  40. <li><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip">2.0.1 (Legacy)</a></li>
  41. </ul>
  42. </li>
  43. <li><a href="#new">What's new</a></li>
  44. <li><a href="#start">Start</a></li>
  45. <li class="dropdown"><a href="#" data-toggle="dropdown">Documentation<span class="caret"></span></a>
  46. <ul class="dropdown-menu">
  47. <li><a href="/documentation-3.html">Version 3 (Stable)</a></li>
  48. <li><a href="/documentation-2.html">Version 2.0.1 (Legacy)</a></li>
  49. </ul>
  50. </li>
  51. <li><a href="https://github.com/nostalgiaz/bootstrap-switch/issues">Bug reports</a></li>
  52. </ul>
  53. </nav>
  54. </div>
  55. </header>
  56. <div class="container content">
  57. <div class="header">
  58. <h2 class="title">Bootstrap Switch <strong>3</strong> <span class="old-version">2.0.1</span></h2>
  59. <p class="lead">Turn checkboxes and radio buttons in toggle switches.</p>
  60. <p>Select the version to download:</p>
  61. <p>
  62. <input type="checkbox" name="download-version" checked data-size="large" data-on-text="3" data-off-text="2.0.1">
  63. </p>
  64. <p><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip" id="download-3" class="btn btn-lg btn-primary">Download 3</a><a href="https://github.com/nostalgiaz/bootstrap-switch/archive/v2.0.1.zip" id="download-2" class="btn btn-lg btn-primary">Download 2.0.1</a></p><br><br>
  65. <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=watch&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="184" height="30"></iframe>
  66. <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&amp;repo=bootstrap-switch&amp;type=fork&amp;count=true&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="144" height="30"></iframe><br><br><br>
  67. </div>
  68. <div class="alert alert-info">
  69. <p>
  70. <strong>Documentation in progress!</strong><br>
  71. It might not seem, but it's actually a lot of work. The goal is to make it as cleanest, most readable and
  72. understandable as possible.<br>
  73. If you feel there is something missing, submit a
  74. <a href="https://github.com/nostalgiaz/bootstrap-switch/pulls">pull request</a> with your changes. Every
  75. help is needed. Many thanks.
  76. </p>
  77. </div>
  78. <div id="new">
  79. <h1 class="page-header">What's new in version 3</h1>
  80. <ul>
  81. <li>API redesign for a more intuitive use</li>
  82. <li>Entire code source rewriting focused on cleanliness and performance</li>
  83. <li>Initialization options can be passed as JavaScript object or written as <code>data-*</code></li>
  84. <li>Plugin constructor publicly available from <code>$.fn.bootstrapSwitch.Constructor</code></li>
  85. <li>Plugin instance publicly available calling <code>.data('bootstrap-switch')</code></li>
  86. <li>Global overridable defaults options</li>
  87. <li>Improved flexibility with <code>baseClass</code> and <code>wrapperClass</code> options</li>
  88. <li>New <code>onInit</code> event</li>
  89. <li>Event namespacing</li>
  90. <li>Full Bootstrap 3 support</li>
  91. <li>A lot of fixed bug, as usual</li>
  92. </ul>
  93. </div>
  94. <div id="start">
  95. <h1 class="page-header">Getting Started</h1>
  96. <p>Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript.</p>
  97. <pre><code>[...]
  98. &lt;link href="bootstrap.css" rel="stylesheet"&gt;
  99. &lt;link href="bootstrap-switch.css" rel="stylesheet"&gt;
  100. &lt;script src="jquery.js"&gt;&lt;/script&gt;
  101. &lt;script src="bootstrap-switch.js"&gt;&lt;/script&gt;
  102. [...]</code></pre>
  103. <p>Add your checkbox.</p>
  104. <pre><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></pre>
  105. <p>Initialize Bootstrap Switch.</p>
  106. <pre><code>$("[name='my-checkbox']").bootstrapSwitch();</code></pre>
  107. <p>Enjoy.</p>
  108. </div>
  109. </div>
  110. <div class="container bottom">
  111. <p>
  112. Licensed under the
  113. <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>
  114. · Created by
  115. <a href="https://github.com/nostalgiaz" target="_blank">Mattia Larentis</a>
  116. · Mantained by
  117. <a href="https://github.com/lostcrew" target="_blank">Emanuele Marchi</a>
  118. </p>
  119. </div>
  120. <script src="docs/js/jquery.min.js"></script>
  121. <script src="docs/js/bootstrap.min.js"></script>
  122. <script src="docs/js/highlight.js"></script>
  123. <script src="dist/js/bootstrap-switch.js"></script>
  124. <script src="docs/js/main.js"></script>
  125. </body>
  126. </html>