Home Explore Help
Sign In
community
/
dwsurvey-ui
6
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: d0c95b46ca
Branches Tags
dwsurvey-ui
/
static
/
diaowen
/
js
/
plugs
/
jquery
/
jquery-switchbutton-master
/
demo
/
demo.html

demo.html 19 KB
History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 
  1. <html>
    2. 

  2. 	<head>
    3. 

  3. 		<title>jQuery Switchbutton</title>
    4. 

  4. 		<link type="text/css" rel="stylesheet" href="../ui.switchbutton.min.css" />
    5. 

  5. 		<link type="text/css" rel="stylesheet" href="./demo.css" />
    6. 

  6. 		<script type="text/javascript" src="./jquery-1.6.2.min.js"></script>
    7. 

  7. 		<script type="text/javascript" src="./jquery.tmpl.min.js"></script>
    8. 

  8. 		<script type="text/javascript" src="./jquery-ui-1.8.16.custom.min.js"></script>
    9. 

  9. 		<script type="text/javascript" src="../jquery.switchbutton.min.js"></script>
    10. 

  10. 		<script type="text/javascript" src="./demo.js"></script>
    11. 

  11. 	</head>
    12. 

  12. 	<body>
    13. 

  13. 		<div id="page">
    14. 

  14. 			<h3>jQuery Switchbutton</h3>
    15. 

  15. 			<p class="listTitle">Checked by default</p>
    16. 

  16. 			<input type="checkbox" class="common" id="switch1" checked="checked" />
    17. 

  17. 			
    18. 

  18. 			<p class="listTitle">Unchecked by default</p>
    19. 

  19. 			<input type="checkbox" class="common" id="switch2" />
    20. 

  20. 			
    21. 

  21. 			<p class="listTitle">Disabled by default</p>
    22. 

  22. 			<input type="checkbox" class="common" id="switch3" disabled="disabled" />
    23. 

  23. 			
    24. 

  24. 			<p class="listTitle">With a label</p>
    25. 

  25. 			<input type="checkbox" class="common" id="switch4" checked="checked" />
    26. 

  26. 			<label for="switch4">Click the label</label>
    27. 

  27. 			
    28. 

  28. 			<p class="listTitle">With some actions</p>
    29. 

  29. 			<input type="checkbox" id="switch5" checked="checked" /><br />
    30. 

  30. 			<span class="lightgrey actions" id="uncheck5">Uncheck -</span>
    31. 

  31. 			<span class="lightgrey actions" id="check5">Check -</span>
    32. 

  32. 			<span class="lightgrey actions" id="disable5">Disable -</span>
    33. 

  33. 			<span class="lightgrey actions" id="enable5">Enable</span>
    34. 

  34. 			
    35. 

  35. 			<p class="listTitle">With custom labels and callbacks</p>
    36. 

  36. 			<input type="checkbox" id="switch6" checked="checked" />
    37. 

  37. 			
    38. 

  38. 			<p class="listTitle">With custom options</p>
    39. 

  39. 			<input type="checkbox" id="switch7" checked="checked" /><br />
    40. 

  40. 			<span class="lightgrey">With &laquo; thin &raquo; class and labels set to false</span>
    41. 

  41. 			<br /><br />
    42. 

  42. 			<input type="checkbox" id="switch8" checked="checked" /><br />
    43. 

  43. 			<span class="lightgrey">With &laquo; ios5 &raquo; class</span>
    44. 

  44. 			
    45. 

  45. 			<p class="listTitle" id="showCode">Show code</p>
    46. 

  46. 			<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>
    47. 

  47. 		</div>
    48. 

  48. 		<div id="footer">
    49. 

  49. 			<h3>jQuery Switchbutton</h3>
    50. 

  50. 			<p class="lightGrey">
    51. 

  51. 				Based on work by tdreyno on iphone-style-checkboxes for events management<br />
    52. 

  52. 				(<a href="https://github.com/tdreyno/iphone-style-checkboxes" target="_blank">https://github.com/tdreyno/iphone-style-checkboxes)</a>
    53. 

  53. 			</p>
    54. 

  54. 			<p class="lightGrey">
    55. 

  55. 				Copyright 2011, L.STEVENIN for <a href="http://www.naeka.fr/" target="_blank">Naeka</a><br />
    56. 

  56. 				Released under the MIT license.
    57. 

  57. 			</p>
    58. 

  58. 			<br /><br />
    59. 

  59. 			<p class="lightGrey">
    60. 

  60. 				<h4>Requirements</h4>
    61. 

  61. 				<a href="http://jquery.com/" target="_blank">jQuery 1.6+</a><br />
    62. 

  62. 				<a href="http://api.jquery.com/category/plugins/templates/" target="_blank">jQuery Templates</a><br />
    63. 

  63. 				<a href="http://jqueryui.com/download" target="_blank">jQuery UI Widget</a>
    64. 

  64. 			</p>
    65. 

  65. 		</div>
    66. 

  66. 	</body>
    67. 

  67. </html>
    68.