Browse Source

repo setup

Todd Boyd 8 years ago
commit
c13ef211b1
5 changed files with 190 additions and 0 deletions
  1. 5 0
      README.md
  2. 62 0
      demo.html
  3. 123 0
      jquery.imgradio.js
  4. BIN
      star-empty.gif
  5. BIN
      star-full.gif

+ 5 - 0
README.md

@@ -0,0 +1,5 @@
+jquery.imgradio
+===============
+
+This jQuery library gracefully replaces checkboxes and radio button lists with image-based controls. For a demonstration, view demo.html in the project root.
+

+ 62 - 0
demo.html

@@ -0,0 +1,62 @@
+<html>
+<head>
+	<title>jQuery.imgradio Demonstration</title>
+	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+	<script type="text/javascript" src="jquery.imgradio.js"></script>
+	<script type="text/javascript">
+		$(function() {
+			$('.radio').imgradio();
+			$('.checkbox').imgradio();
+			$('.rating').imgradio(1);
+		});
+	</script>
+	<style type="text/css">
+		span.radio_img {
+			display: inline-block;
+			height: 32px;
+			width: 33px;
+			margin-right: 2px;
+			background:url(star-empty.gif);
+		}
+		span.radio_img.checked {
+			background:url(star-full.gif);
+		}
+	</style>
+</head>
+<body>
+	<h1>jQuery.imgradio Demonstration</h1>
+	<p>
+		View this page's source for a closer look at how it all works.
+		<br />
+		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>.
+	</p>
+	<form method="POST">
+		<h2>Standard radio button behavior</h2>
+		<p>
+			<input type="radio" name="myradio" id="radio_1" class="radio" value="1" /><label for="radio_1">1</label>
+			<input type="radio" name="myradio" id="radio_2" class="radio" value="2" /><label for="radio_2">2</label>
+			<input type="radio" name="myradio" id="radio_3" class="radio" value="3" /><label for="radio_3">3</label>
+			<input type="radio" name="myradio" id="radio_4" class="radio" value="4" /><label for="radio_4">4</label>
+			<input type="radio" name="myradio" id="radio_5" class="radio" value="5" /><label for="radio_5">5</label>
+		</p>
+		<h2>Standard check box behavior</h2>
+		<p>
+			<input type="checkbox" name="mycheckbox" id="checkbox_1" class="checkbox" value="1" /><label for="checkbox_1">1</label>
+			<input type="checkbox" name="mycheckbox" id="checkbox_2" class="checkbox" value="2" /><label for="checkbox_2">2</label>
+			<input type="checkbox" name="mycheckbox" id="checkbox_3" class="checkbox" value="3" /><label for="checkbox_3">3</label>
+			<input type="checkbox" name="mycheckbox" id="checkbox_4" class="checkbox" value="4" /><label for="checkbox_4">4</label>
+			<input type="checkbox" name="mycheckbox" id="checkbox_5" class="checkbox" value="5" /><label for="checkbox_5">5</label>		
+		</p>
+		<h2>"Rating" system behavior</h2>
+		<p>
+			<input type="radio" name="myrating" id="rating_1" class="rating" value="1" /><label for="rating_1">1</label>
+			<input type="radio" name="myrating" id="rating_2" class="rating" value="2" /><label for="rating_2">2</label>
+			<input type="radio" name="myrating" id="rating_3" class="rating" value="3" /><label for="rating_3">3</label>
+			<input type="radio" name="myrating" id="rating_4" class="rating" value="4" /><label for="rating_4">4</label>
+			<input type="radio" name="myrating" id="rating_5" class="rating" value="5" /><label for="rating_5">5</label>			
+		</p>
+	</form>
+	<br />
+	<p>&copy;2011 Todd Boyd - <a href="http://oddnetwork.org/">oddnetwork.org</a></p>
+</body>
+</html>

+ 123 - 0
jquery.imgradio.js

@@ -0,0 +1,123 @@
+/* *****************************************************************************
+
+Script:		Image Radio (jQuery Extension)
+Version:	1.0.2
+Author:		Todd Boyd
+Created:	2011/6/16
+
+Description:
+	This extension replaces standard HTML checkboxes and radio buttons with
+	an image-based alternative. The images are inserted as background:url()
+	CSS directives for <span /> elements. The standard HTML elements behind
+	the scenes are still used for the form inputs, so nothing special needs
+	to be done in order to capture the information when the form is
+	submitted.
+
+Options:
+	rating:	Set this to 1 or true if the radio button list / checkbox list is
+			to be used as a "rating" system (i.e., checking the 4th radio button
+			will cause the previous 3 to be lit up, as well).
+
+Usage:
+	The extension acts upon jQuery selector objects. You may either pass through
+	the rating parameter to use a "rating" system, or pass nothing in order to
+	use standard radio button list / check box behavior.
+	
+Examples:
+	$('.my_radio_buttons').imgradio(); // standard behavior
+	$('.my_rating_stars').imgradio(1); // "rating" system
+	
+***************************************************************************** */
+(function($) {
+	// extend jQuery object
+	$.fn.imgradio = function(ratings)
+	{
+		// affect all objects in the selector array
+		this.each(function() {
+			// get IDs
+			var radioid = $(this).attr("id");
+			var imgid = radioid + "_img";
+			// hide the original inputs
+			$(this).css("display", "none");
+			// hide the label (if any)
+			$("label[for=\"" + radioid + "\"]").css("display", "none");
+			// inject the <span /> for our image replacement
+			var html = "<span class=\"radio_img"
+				+ ($(this).is(":checked") ? " checked" : "")
+				+ "\" id=\"" + imgid + "\" data-imgradiogroup=\""
+				+ $(this).attr("name") + "\"></span>";
+			$(html).insertAfter($("#" + radioid));
+			$("#" + imgid)
+				// remember underlying element
+				.data("imgradio_el", radioid)
+				// handle clicks (check/uncheck)
+				.click(function()
+				{
+					var el = $("#" + $(this).data("imgradio_el"));
+					
+					// unchecking
+					if($(el).is(":checked"))
+					{
+						$(el).removeAttr("checked");
+						var form = $(el).parents("form:first");
+						if(! form) form = $(document);
+						
+						// ratings system
+						if(typeof ratings != "undefined")
+						{
+							// uncheck all others in our group in the form
+							form
+								.find("[data-imgradiogroup=\""
+									+ $(this).attr("data-imgradiogroup")
+									+ "\"]")
+								.removeClass("checked");
+						}
+						else
+							$(this).removeClass("checked");
+					}
+					else
+					// checking
+					{
+						// checkbox lists don"t uncheck each other, only radios
+						if($(el).attr("type") != "checkbox")
+						{
+							var that = this;
+							var form = $(el).parents("form:first");
+							if(! form) form = $(document);
+							// first uncheck all others in the list
+							form
+								.find("[name=\"" + $(el).attr("name") + "\"]")
+								.removeAttr("checked");
+							var radiogroup =
+								form.find("[data-imgradiogroup=\""
+									+ $(this).attr("data-imgradiogroup")
+									+ "\"]");
+							radiogroup.removeClass("checked");
+							
+							// ratings system
+							if(typeof ratings != "undefined")
+							{
+								var stop = false;
+								
+								// check previous elements
+								radiogroup.each(function()
+								{
+									if(this === that || stop)
+									{
+										stop = true;
+										return;
+									}
+									
+									$(this).addClass("checked");
+								});
+							}
+						}
+						
+						// check this element
+						$(el).attr("checked", "checked");
+						$(this).addClass("checked");
+					}
+				});
+		});
+	}
+})(jQuery);

BIN
star-empty.gif


BIN
star-full.gif