|
|
@@ -1,79 +1,382 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>Bootstrap switch - by Mattia Larentis, enhanced by Peter Stein aka BdMdesigN</title>
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <meta name="description" content="Switches for radio buttons and checkboxes">
|
|
|
+ <meta name="author" content="Mattia Larentis">
|
|
|
+ <meta name="subauthor" content="Peter Stein">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8;" />
|
|
|
+ <!-- Le styles -->
|
|
|
+ <!-- TODO: make sure bootstrap.min.css points to BootTheme generated file
|
|
|
+ -->
|
|
|
+ <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
|
|
|
+ <link href="static/stylesheets/styles.css" rel="stylesheet" type="text/css" />
|
|
|
+ <link href="static/stylesheets/pygment_trac.css" rel="stylesheet" type="text/css" />
|
|
|
+
|
|
|
+ <style type="text/css">
|
|
|
+ body {
|
|
|
+ padding-top: 60px;
|
|
|
+ padding-bottom: 40px;
|
|
|
+ }
|
|
|
+ .span4, h1 {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- <head>
|
|
|
- <meta charset='utf-8' />
|
|
|
- <meta http-equiv="X-UA-Compatible" content="chrome=1" />
|
|
|
- <meta name="description" content="Bootstrap-switch : unofficial bootstrap switch" />
|
|
|
+ h1 {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
|
|
|
- <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
|
|
|
+ h3 {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <!-- TODO: make sure bootstrap-responsive.min.css points to BootTheme
|
|
|
+ generated file -->
|
|
|
+ <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
|
|
|
+ <!--[if lt IE 9]>
|
|
|
+ <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
|
+ <![endif]-->
|
|
|
+ <!-- Fav and touch icons -->
|
|
|
+</head>
|
|
|
+
|
|
|
+ <body>
|
|
|
+ <div class="navbar navbar-fixed-top">
|
|
|
+ <div class="navbar-inner">
|
|
|
+ <a href="https://github.com/nostalgiaz/bootstrap-switch"><img
|
|
|
+ style="position: absolute; top: 0; right: 0; border: 0;"
|
|
|
+ src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
|
|
|
+ alt="Fork me on GitHub"></a>
|
|
|
|
|
|
- <title>Bootstrap-switch</title>
|
|
|
- </head>
|
|
|
+ <div class="row-fluid" style="margin-top:10px;">
|
|
|
+ <div class="span12">
|
|
|
+ <h1>Bootstrap switch<small> - by <a href="http://larentis.eu">Mattia Larentis</a> <a href="https://twitter.com/spiritualguru">(@SpiritualGuru)</a></small></h1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <body>
|
|
|
+ <div class="row-fluid">
|
|
|
+ <div class="span8 offset2" style="text-align: center;">
|
|
|
+ <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=watch&count=true"
|
|
|
+ allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
+ <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&repo=bootstrap-switch&type=fork&count=true"
|
|
|
+ allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
+ <iframe src="http://ghbtns.com/github-btn.html?user=nostalgiaz&type=follow&count=true"
|
|
|
+ allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- HEADER -->
|
|
|
- <div id="header_wrap" class="outer">
|
|
|
- <header class="inner">
|
|
|
- <a id="forkme_banner" href="https://github.com/nostalgiaz/bootstrap-switch">View on GitHub</a>
|
|
|
+ <div class="container-fluid">
|
|
|
+ <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
|
|
|
+ <span class="icon-bar"></span>
|
|
|
+ <span class="icon-bar"></span>
|
|
|
+ </a>
|
|
|
|
|
|
- <h1 id="project_title">Bootstrap-switch</h1>
|
|
|
- <h2 id="project_tagline">unofficial bootstrap switch</h2>
|
|
|
+ <div class="nav-collapse collapse">
|
|
|
+ <p class="navbar-text pull-right" style="padding-right:15px;">Downloads:
|
|
|
+ <a href="https://github.com/nostalgiaz/bootstrap-switch/zipball/master" class="navbar-link">ZIP</a>
|
|
|
+ <a href="https://github.com/nostalgiaz/bootstrap-switch/tarball/master" class="navbar-link">TAR</a>
|
|
|
+ </p>
|
|
|
+ <ul class="nav nav-links">
|
|
|
+ <li class="active">
|
|
|
+ <a href="./index.html">Home</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="./examples.html">Demos</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!--/.nav-collapse -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <section id="downloads">
|
|
|
- <a class="zip_download_link" href="https://github.com/nostalgiaz/bootstrap-switch/zipball/master">Download this project as a .zip file</a>
|
|
|
- <a class="tar_download_link" href="https://github.com/nostalgiaz/bootstrap-switch/tarball/master">Download this project as a tar.gz file</a>
|
|
|
- </section>
|
|
|
- </header>
|
|
|
- </div>
|
|
|
+ <div id="nav-content-container">
|
|
|
+ <div class="container">
|
|
|
|
|
|
- <!-- MAIN CONTENT -->
|
|
|
- <div id="main_content_wrap" class="outer">
|
|
|
- <section id="main_content" class="inner">
|
|
|
- <h3>
|
|
|
-<a name="welcome-to-github-pages" class="anchor" href="#welcome-to-github-pages"><span class="octicon octicon-link"></span></a>Welcome to GitHub Pages.</h3>
|
|
|
+ <div class="wrapper">
|
|
|
+ <nav>
|
|
|
+ <ul></ul>
|
|
|
+ </nav>
|
|
|
+ <section>
|
|
|
+ <h1><a name="bootstrap-switch" class="anchor" href="#bootstrap-switch"><span class="octicon octicon-link"></span></a>Bootstrap-switch v1.8 (preview)</h1>
|
|
|
|
|
|
-<p>This automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:</p>
|
|
|
+ <p>You can now also use radio buttons and checkboxes as switches.</p>
|
|
|
|
|
|
-<pre><code>$ cd your_repo_root/repo_name
|
|
|
-$ git fetch origin
|
|
|
-$ git checkout gh-pages
|
|
|
-</code></pre>
|
|
|
+ <h2><a name="usage" class="anchor" href="#usage"><span class="octicon octicon-link"></span></a>Usage</h2>
|
|
|
|
|
|
-<p>If you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.</p>
|
|
|
+ <p>Just include Twitter Bootstrap, jQuery, Bootstrap Switch CSS and Javascript</p>
|
|
|
|
|
|
-<h3>
|
|
|
-<a name="designer-templates" class="anchor" href="#designer-templates"><span class="octicon octicon-link"></span></a>Designer Templates</h3>
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=9; IE=8;"</span> <span class="nt">/></span>
|
|
|
+<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"</span><span class="nt">></span>
|
|
|
+<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"bootstrap-switch.css"</span><span class="nt">></span>
|
|
|
|
|
|
-<p>We've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.</p>
|
|
|
+<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</span><span class="nt">></script></span>
|
|
|
+<span class="nt"><script </span><span class="na">src=</span><span class="s">"bootstrap-switch.js"</span><span class="nt">></script></span> // master
|
|
|
+<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.7/bootstrap-switch.min.js"</span><span class="nt">></span><span class="err"> // from cdnjs.com</span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
|
|
|
-<h3>
|
|
|
-<a name="rather-drive-stick" class="anchor" href="#rather-drive-stick"><span class="octicon octicon-link"></span></a>Rather Drive Stick?</h3>
|
|
|
+ <h2><a name="less" class="anchor" href="#less"><span class="octicon octicon-link"></span></a>Less</h2>
|
|
|
|
|
|
-<p>If you prefer to not use the automatic generator, push a branch named <code>gh-pages</code> to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.</p>
|
|
|
+ <p>If you want to use your bootstrap vars edit bootstrapSwitch.less and then compile the less file</p>
|
|
|
|
|
|
-<h3>
|
|
|
-<a name="authors-and-contributors" class="anchor" href="#authors-and-contributors"><span class="octicon octicon-link"></span></a>Authors and Contributors</h3>
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt">lessc static/less/bootstrap-switch.less static/stylesheets/bootstrap-switch.css</span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
|
|
|
-<p>You can <a href="https://github.com/blog/821" class="user-mention">@mention</a> a GitHub username to generate a link to their profile. The resulting <code><a></code> element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (<a href="https://github.com/defunkt" class="user-mention">@defunkt</a>), PJ Hyett (<a href="https://github.com/pjhyett" class="user-mention">@pjhyett</a>), and Tom Preston-Werner (<a href="https://github.com/mojombo" class="user-mention">@mojombo</a>) founded GitHub.</p>
|
|
|
+ <h2><a name="supported-browsers" class="anchor" href="#supported-browsers"><span class="octicon octicon-link"></span></a>Supported browsers</h2>
|
|
|
|
|
|
-<h3>
|
|
|
-<a name="support-or-contact" class="anchor" href="#support-or-contact"><span class="octicon octicon-link"></span></a>Support or Contact</h3>
|
|
|
+ <p>I'm not going to support ancient browsers! (it works on IE8+)</p>
|
|
|
|
|
|
-<p>Having trouble with Pages? Check out the documentation at <a href="http://help.github.com/pages">http://help.github.com/pages</a> or contact <a href="mailto:[email protected]">[email protected]</a> and we’ll help you sort it out.</p>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
+ <h2><a name="basic-example" class="anchor" href="#basic-example"><span class="octicon octicon-link"></span></a>Basic Example</h2>
|
|
|
|
|
|
- <!-- FOOTER -->
|
|
|
- <div id="footer_wrap" class="outer">
|
|
|
- <footer class="inner">
|
|
|
- <p class="copyright">Bootstrap-switch maintained by <a href="https://github.com/nostalgiaz">nostalgiaz</a></p>
|
|
|
- <p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
|
|
|
- </footer>
|
|
|
- </div>
|
|
|
+ <p>checkboxes:</p>
|
|
|
|
|
|
-
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p>radioboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="large-small-or-mini" class="anchor" href="#large-small-or-mini"><span class="octicon octicon-link"></span></a>Large, small or mini</h2>
|
|
|
+
|
|
|
+ <p>checkboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch switch-large"</span><span class="nt">></span> <span class="c"><!-- switch-large, switch-small or switch-mini --></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p>radioboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch switch-large"</span><span class="nt">></span> <span class="c"><!-- switch-large, switch-small or switch-mini --></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="colors" class="anchor" href="#colors"><span class="octicon octicon-link"></span></a>Colors</h2>
|
|
|
+
|
|
|
+ <p>checkboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on=</span><span class="s">"danger"</span> <span class="na">data-off=</span><span class="s">"warning"</span><span class="nt">></span> <span class="c"><!-- primary, info, success, warning, danger and default --></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p>radioboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on=</span><span class="s">"danger"</span> <span class="na">data-off=</span><span class="s">"warning"</span><span class="nt">></span> <span class="c"><!-- primary, info, success, warning, danger and default --></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="animation" class="anchor" href="#animation"><span class="octicon octicon-link"></span></a>Animation</h2>
|
|
|
+
|
|
|
+ <p>checkboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-animated=</span><span class="s">"false"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p>radioboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-animated=</span><span class="s">"false"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="text" class="anchor" href="#text"><span class="octicon octicon-link"></span></a>Text</h2>
|
|
|
+
|
|
|
+ <p>checkboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"SI"</span> <span class="na">data-off-label=</span><span class="s">"NO"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p>radioboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"SI"</span> <span class="na">data-off-label=</span><span class="s">"NO"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
|
|
|
+ <h2><a name="text-label" class="anchor" href="#text-label"><span class="octicon octicon-link"></span></a>Text Label</h2>
|
|
|
+
|
|
|
+ <p>checkboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-text-label=</span><span class="s">"My Slider Text"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p>radioboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-text-label=</span><span class="s">"My Slider Text"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="html-text" class="anchor" href="#html-text"><span class="octicon octicon-link"></span></a>HTML Text</h2>
|
|
|
+
|
|
|
+ <p>checkboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"<i class='icon-ok icon-white'></i>"</span> <span class="na">data-off-label=</span><span class="s">"<i class='icon-remove'></i>"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p>radioboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span> <span class="na">data-on-label=</span><span class="s">"<i class='icon-ok icon-white'></i>"</span> <span class="na">data-off-label=</span><span class="s">"<i class='icon-remove'></i>"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="initial-values" class="anchor" href="#initial-values"><span class="octicon octicon-link"></span></a>Initial values</h2>
|
|
|
+
|
|
|
+ <p>checkboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked=</span><span class="s">"checked"</span> <span class="na">disabled=</span><span class="s">"disabled"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p>radioboxes:</p>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nt"><div</span> <span class="na">class=</span><span class="s">"make-switch"</span><span class="nt">></span>
|
|
|
+ <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">checked=</span><span class="s">"checked"</span> <span class="na">disabled=</span><span class="s">"disabled"</span><span class="nt">></span>
|
|
|
+<span class="nt"></div></span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="event-handler" class="anchor" href="#event-handler"><span class="octicon octicon-link"></span></a>Event handler</h2>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'switch-change'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
|
|
|
+ <span class="kd">var</span> <span class="nx">$el</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">el</span><span class="p">)</span>
|
|
|
+ <span class="p">,</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
|
|
|
+ <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">$el</span><span class="p">,</span> <span class="nx">value</span><span class="p">);</span>
|
|
|
+<span class="p">});</span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="methods" class="anchor" href="#methods"><span class="octicon octicon-link"></span></a>Methods</h2>
|
|
|
+
|
|
|
+ <div class="highlight">
|
|
|
+ <pre>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleActivation'</span><span class="p">);</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'isActive'</span><span class="p">);</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setActive'</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setActive'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleState'</span><span class="p">);</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioState'</span><span class="p">);</span> <span class="c1">// the radiobuttons need a class not a ID, don't allow uncheck radio switch</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioStateAllowUncheck'</span><span class="p">);</span> <span class="c1">// don't allow uncheck radio switch</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioStateAllowUncheck'</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span> <span class="c1">// don't allow uncheck radio switch</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'.mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'toggleRadioStateAllowUncheck'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span> <span class="c1">// allow uncheck radio switch</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setState'</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOnLabel'</span><span class="p">,</span> <span class="kc">onValue</span><span class="p">);</span> <span class="c1">// sets the text of the "on" label</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOffLabel'</span><span class="p">,</span> <span class="kc">offValue</span><span class="p">);</span> <span class="c1">// sets the text of the "off" label</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOnClass'</span><span class="p">,</span> <span class="kc">onClass</span><span class="p">);</span> <span class="c1">// sets the left color class</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setOffClass'</span><span class="p">,</span> <span class="kc">offClass</span><span class="p">);</span> <span class="c1">// sets the right color class</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setAnimated'</span><span class="p">,</span> <span class="kc">animated</span><span class="p">);</span> <span class="c1">// sets true or false for animation</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'setSizeClass'</span><span class="p">,</span> <span class="kc">size</span><span class="p">);</span> <span class="c1">// sets 'switch-mini', 'switch-small' or 'switch-large'</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'status'</span><span class="p">);</span> <span class="c1">// returns true or false</span>
|
|
|
+<span class="nx">$</span><span class="p">(</span><span class="s1">'#mySwitch'</span><span class="p">).</span><span class="nx">bootstrapSwitch</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">);</span>
|
|
|
+ </pre>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2><a name="license" class="anchor" href="#license"><span class="octicon octicon-link"></span></a>License</h2>
|
|
|
+
|
|
|
+ <p>Licensed under the Apache License, Version 2.0<a href="http://www.apache.org/licenses/LICENSE-2.0"> http://www.apache.org/licenses/LICENSE-2.0</a></p>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <footer>
|
|
|
+ <div class="navbar navbar-fixed-bottom" style="height:30px;">
|
|
|
+
|
|
|
+ <div class="navbar-inner">
|
|
|
+ <div class="container-fluid">
|
|
|
+ <p style="float:left; padding-top: 5px;">
|
|
|
+ © by Mattia Larentis 2012 - 2013, enhanced by Peter Stein (BdMdesigN)
|
|
|
+ <i class="icon-asterisk"> </i> design by BdMdesigN
|
|
|
+ </p>
|
|
|
+ <p class="pull-right" style="padding-top: 5px;">
|
|
|
+ <a href="https://twitter.com/SpiritualGuru">follow me</a> -
|
|
|
+ <a href="http://www.larentis.eu">my site</a>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+
|
|
|
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
|
+ <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
|
|
|
+ <script src="static/js/main.js"></script>
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
Stein, Peter