No commit message

index.html

@@ -20,6 +20,10 @@
             <p>
                 <input type="button" value="alert serialized form" id="alert-form">
             </p>
+
+            <p>
+                <input type="button" value="remove form percentages" id="remove-form">
+            </p>
         </form>
 
         <p>
@@ -30,6 +34,10 @@
             <input type="button" value="alert serialized span" id="alert-span">
         </p>
 
+        <p>
+            <input type="button" value="remove span percentage" id="remove-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>
@@ -40,13 +48,19 @@
                 $('#alert-form').click(function() {
                     alert($(this).parents('form').serialize());
                 });
+                $('#remove-form').click(function() {
+                    $('input.percent').percentage('destroy');
+                });
 
                 $('span.percent').percentage({
                     color: 'green'
                 });
                 $('#alert-span').click(function() {
                     alert($('span.percent').text());
                 });
+                $('#remove-span').click(function() {
+                    $('span.percent').percentage('destroy');
+                });
 
                 $('p.percent').percentage({
                     color: 'pink',

percentage.js

@@ -4,15 +4,28 @@
     function render(conf) {
         var elems = this;
 
+        if(conf == 'destroy') {
+            $(elems).each(function() {
+                $(this).show();
+
+                if(this.percentage) {
+                    $(this.percentage).remove();
+                }
+            })
+            return;
+        }
+
         var defaults = {
             width: 200,
             height: 15,
             border: '1px solid #000000',
             color: '#cc0000',
             background: '#ffffff',
-            clickable: true
+            clickable: true,
+            classname: 'percentage',
+            display: 'inline-block'
         };
-
+        
         if(conf == undefined) {
             conf = defaults;
         } else {
@@ -53,10 +66,12 @@
                         .attr('value', percent)
                         .val(percent)
                         .attr('title', percent + '%')
+                        .trigger('clickupdate')
                         ;
                 } else {
                     $(elem)
                         .text(percent + '%')
+                        .trigger('clickupdate')
                         ;
                 }
 
@@ -69,7 +84,7 @@
 
             $(bar)
                 .attr('title', percent + '%')
-                .css('display', 'inline-block')
+                .css('display', conf.display)
                 .css('border', conf.border)
                 .css('background', conf.background)
                 .css('position', 'relative')
@@ -82,6 +97,10 @@
                 $(bar).click(handleClick);
             }
 
+            if(conf.classname) {
+                $(bar).addClass(conf.classname);
+            }
+
             $(inner)
                 .css('background', conf.color)
                 .css('position', 'absolute')
@@ -96,6 +115,8 @@
                 .hide()
                 .after(bar)
                 ;
+
+            this.percentage = bar;
         });
 
         return elems;
@@ -105,4 +126,3 @@
         render.apply(this, arguments);
     };
 })();
-