No commit message

pascalopitz · Dec 3, 2010 · 9296897 · 9296897
1 parent fe7e295
commit 9296897
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,61 @@
+<html>
+	<head>
+		<title>Percentage</title>
+	</head>
+	<body>
+
+		<form>
+			<p>
+				<input type="text" name="input1" value="70" class="percent">
+			</p>
+
+			<p>
+				<input type="text" name="input2" value="30" class="percent">
+			</p>
+
+			<p>
+				<input type="text" name="input3" value="10" class="percent">
+			</p>
+
+			<p>
+				<input type="button" value="alert serialized form" id="alert-form">
+			</p>
+		</form>
+
+		<p>
+			<span class="percent">80%</span>
+		</p>
+
+		<p>
+			<input type="button" value="alert serialized span" id="alert-span">
+		</p>
+
+		<p class="percent">70%</p>
+
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
+		<script type="text/javascript" src="./percentage.js"></script>
+		<script type="text/javascript">
+			$(document).ready(function() {
+				$('input.percent').percentage();
+				$('#alert-form').click(function() {
+					alert($(this).parents('form').serialize());
+				});
+
+				$('span.percent').percentage({
+					color: 'green'
+				});
+				$('#alert-span').click(function() {
+					alert($('span.percent').text());
+				});
+
+				$('p.percent').percentage({
+					color: 'pink',
+					clickable: 0,
+					width: 170,
+					height: 50,
+					border: '4px solid green'
+				});
+			});
+		</script>
+	</body>
+</html>	
diff --git a/percentage.js b/percentage.js
@@ -28,6 +28,18 @@
             var bar = $('<div></div>');
             var inner = $('<div></div>');
 
+            var percent;
+            var hasValue;
+
+            if($(elem).is('textarea,input,select')) {
+                percent = $(elem).val();
+                hasValue = true;
+            } else {
+                percent = parseInt($(elem).text().replace('%', ''));
+                hasValue = false;
+            }
+
+
             function getLeft(val) {
                 return Math.floor((conf.width * -1) + (conf.width / 100 * val))
             }
@@ -36,11 +48,17 @@
                 var p = $(this).offset();
                 var percent = Math.ceil((e.clientX - p.left) / (conf.width / 100));
 
-                $(elem)
-                    .attr('value', percent)
-                    .val(percent)
-                    .attr('title', percent + '%')
-                    ;
+                if(hasValue) {
+                    $(elem)
+                        .attr('value', percent)
+                        .val(percent)
+                        .attr('title', percent + '%')
+                        ;
+                } else {
+                    $(elem)
+                        .text(percent + '%')
+                        ;
+                }
 
                 $(inner)
                     .css('left', getLeft(percent))
@@ -49,14 +67,6 @@
                 return false;
             }
 
-            var percent;
-
-            if($(elem).is('textarea,input,select')) {
-                percent = $(elem).val();
-            } else {
-                percent = parseInt($(elem).text().replace('%', ''));
-            }
-
             $(bar)
                 .attr('title', percent + '%')
                 .css('display', 'inline-block')