demo.html 2.9 KB

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