demo.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <html>
  2. <head>
  3. <title>jQuery.imgradio Demonstration</title>
  4. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  5. <script type="text/javascript" src="jquery.imgradio.js"></script>
  6. <script type="text/javascript">
  7. $(function() {
  8. $('.radio').imgradio();
  9. $('.checkbox').imgradio();
  10. $('.rating').imgradio(1);
  11. });
  12. </script>
  13. <style type="text/css">
  14. span.radio_img {
  15. display: inline-block;
  16. height: 32px;
  17. width: 33px;
  18. margin-right: 2px;
  19. background:url(star-empty.gif);
  20. }
  21. span.radio_img.checked {
  22. background:url(star-full.gif);
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <h1>jQuery.imgradio Demonstration</h1>
  28. <p>
  29. View this page's source for a closer look at how it all works.
  30. <br />
  31. For more information, visit the <a href="http://plugins.jquery.com/project/imgradio/">Image Radio project page</a> on <a href="http://plugins.jquery.com/">plugins.jquery.com</a>.
  32. </p>
  33. <form method="POST">
  34. <h2>Standard radio button behavior</h2>
  35. <p>
  36. <input type="radio" name="myradio" id="radio_1" class="radio" value="1" /><label for="radio_1">1</label>
  37. <input type="radio" name="myradio" id="radio_2" class="radio" value="2" /><label for="radio_2">2</label>
  38. <input type="radio" name="myradio" id="radio_3" class="radio" value="3" /><label for="radio_3">3</label>
  39. <input type="radio" name="myradio" id="radio_4" class="radio" value="4" /><label for="radio_4">4</label>
  40. <input type="radio" name="myradio" id="radio_5" class="radio" value="5" /><label for="radio_5">5</label>
  41. </p>
  42. <h2>Standard check box behavior</h2>
  43. <p>
  44. <input type="checkbox" name="mycheckbox" id="checkbox_1" class="checkbox" value="1" /><label for="checkbox_1">1</label>
  45. <input type="checkbox" name="mycheckbox" id="checkbox_2" class="checkbox" value="2" /><label for="checkbox_2">2</label>
  46. <input type="checkbox" name="mycheckbox" id="checkbox_3" class="checkbox" value="3" /><label for="checkbox_3">3</label>
  47. <input type="checkbox" name="mycheckbox" id="checkbox_4" class="checkbox" value="4" /><label for="checkbox_4">4</label>
  48. <input type="checkbox" name="mycheckbox" id="checkbox_5" class="checkbox" value="5" /><label for="checkbox_5">5</label>
  49. </p>
  50. <h2>"Rating" system behavior</h2>
  51. <p>
  52. <input type="radio" name="myrating" id="rating_1" class="rating" value="1" /><label for="rating_1">1</label>
  53. <input type="radio" name="myrating" id="rating_2" class="rating" value="2" /><label for="rating_2">2</label>
  54. <input type="radio" name="myrating" id="rating_3" class="rating" value="3" /><label for="rating_3">3</label>
  55. <input type="radio" name="myrating" id="rating_4" class="rating" value="4" /><label for="rating_4">4</label>
  56. <input type="radio" name="myrating" id="rating_5" class="rating" value="5" /><label for="rating_5">5</label>
  57. </p>
  58. </form>
  59. <br />
  60. <p>&copy;2011 Todd Boyd - <a href="http://oddnetwork.org/">oddnetwork.org</a></p>
  61. </body>
  62. </html>