suzhou-jichuang-lanhai
/
LiaoningYaopinIframe
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '360d2dd715'
${ noResults }
LiaoningYaopinIframe/public/static/diaowen/js/plugs/jquery/jquery-switchbutton-master/demo/demo.html

68 lines
19 KiB
Raw Blame History

<html>
<head>
<title>jQuery Switchbutton</title>
<link type="text/css" rel="stylesheet" href="../ui.switchbutton.min.css" />
<link type="text/css" rel="stylesheet" href="./demo.css" />
<script type="text/javascript" src="./jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="./jquery.tmpl.min.js"></script>
<script type="text/javascript" src="./jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="../jquery.switchbutton.min.js"></script>
<script type="text/javascript" src="./demo.js"></script>
</head>
<body>
<div id="page">
<h3>jQuery Switchbutton</h3>
<p class="listTitle">Checked by default</p>
<input type="checkbox" class="common" id="switch1" checked="checked" />
<p class="listTitle">Unchecked by default</p>
<input type="checkbox" class="common" id="switch2" />
<p class="listTitle">Disabled by default</p>
<input type="checkbox" class="common" id="switch3" disabled="disabled" />
<p class="listTitle">With a label</p>
<input type="checkbox" class="common" id="switch4" checked="checked" />
<label for="switch4">Click the label</label>
<p class="listTitle">With some actions</p>
<input type="checkbox" id="switch5" checked="checked" /><br />
<span class="lightgrey actions" id="uncheck5">Uncheck -</span>
<span class="lightgrey actions" id="check5">Check -</span>
<span class="lightgrey actions" id="disable5">Disable -</span>
<span class="lightgrey actions" id="enable5">Enable</span>
<p class="listTitle">With custom labels and callbacks</p>
<input type="checkbox" id="switch6" checked="checked" />
<p class="listTitle">With custom options</p>
<input type="checkbox" id="switch7" checked="checked" /><br />
<span class="lightgrey">With &laquo; thin &raquo; class and labels set to false</span>
<br /><br />
<input type="checkbox" id="switch8" checked="checked" /><br />
<span class="lightgrey">With &laquo; ios5 &raquo; class</span>
<p class="listTitle" id="showCode">Show code</p>
<div id="pageCode"><div class="javascript" style="font-family:monospace;"><ol><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009966; font-style: italic;">/* Simple ones */</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.common:checkbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #006600; font-style: italic;">/* Switch 5: with check/enable actions */</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#uncheck5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prop</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;checked&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">change</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#check5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prop</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;checked&quot;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">change</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#disable5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;disable&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#enable5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;enable&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009966; font-style: italic;">/* Switch 6: with custom labels and callbacks */</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch6&quot;</span><span style="color: #009900;">&#41;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> .<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> checkedLabel<span style="color: #339933;">:</span> <span style="color: #3366CC;">'YES'</span><span style="color: #339933;">,</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> uncheckedLabel<span style="color: #339933;">:</span> <span style="color: #3366CC;">'NO'</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> .<span style="color: #660066;">change</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Switch 6 changed to &quot;</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prop</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;checked&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;checked&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;unchecked&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009966; font-style: italic;">/* Switch 7: with custom options */</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;">&nbsp;</pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#switch7&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">switchbutton</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> classes<span style="color: #339933;">:</span> <span style="color: #3366CC;">'ui-switchbutton-thin'</span><span style="color: #339933;">,</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> labels<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span></pre></li><li style="font-weight: bold; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li><li style="font-weight: normal; vertical-align:top;"><pre style="font: normal normal 1em/1.2em monospace; margin:0; padding:0; background:none; vertical-align:top;"><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></li></ol></div></div>
</div>
<div id="footer">
<h3>jQuery Switchbutton</h3>
<p class="lightGrey">
Based on work by tdreyno on iphone-style-checkboxes for events management<br />
(<a href="https://github.com/tdreyno/iphone-style-checkboxes" target="_blank">https://github.com/tdreyno/iphone-style-checkboxes)</a>
</p>
<p class="lightGrey">
Copyright 2011, L.STEVENIN for <a href="http://www.naeka.fr/" target="_blank">Naeka</a><br />
Released under the MIT license.
</p>
<br /><br />
<p class="lightGrey">
<h4>Requirements</h4>
<a href="http://jquery.com/" target="_blank">jQuery 1.6+</a><br />
<a href="http://api.jquery.com/category/plugins/templates/" target="_blank">jQuery Templates</a><br />
<a href="http://jqueryui.com/download" target="_blank">jQuery UI Widget</a>
</p>
</div>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink