Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit e10aeee77fcd3fa3ab4286ec3847580f8c9594f2 @christianhellsten committed Jun 28, 2010
Showing with 130 additions and 0 deletions.
  1. BIN .README.textile.swp
  2. +55 −0 README.textile
  3. +34 −0 jquery.increment-decrement.js
  4. +41 −0 shit.html
Binary file not shown.
@@ -0,0 +1,55 @@
+h1. jQuery Increment/Decrement Plugin
+
+This plugin allows you to easily increment and decrement values with jQuery.
+
+h2. Examples
+
+We'll use this HTML as a base for all the following examples:
+
+<pre><code>
+<html>
+ <head>
+ <script src='/javascripts/jquery.increment-decrement.js' type='text/javascript'></script>
+ </head>
+ <body>
+ <div id="counter">0</div>
+ </body>
+</html>
+</code></pre>
+
+h3. Incrementing values
+
+<pre><code>
+$('#counter').increment();
+</code></pre>
+
+h3. Decrementing values
+
+<pre><code>
+$('#counter').decrement();
+</code></pre>
+
+h3. Getting current value
+
+<pre><code>
+$('#counter').counterValue();
+</code></pre>
+
+h3. Custom increment/decrement step
+
+You can increment or decrement by any value you desire:
+<pre><code>
+// Increment counter by 10
+$('#counter').increment(10);
+</code></pre>
+
+h3. Listening to increment/decrement events
+
+<pre><code>
+$('#counter').bind('increment', function(event, counter, value) {
+ console.log('Incremented ' + counter + ' ' + value);
+});
+$('#counter').bind('decrement', function(event, counter, value) {
+ console.log('Decremented ' + counter + ' ' + value);
+});
+</code></pre>
@@ -0,0 +1,34 @@
+(function($){
+ /**
+ * Returns the current value of the counter.
+ */
+ function value(counter) {
+ return parseInt(counter.html());
+ }
+ /**
+ * Changes the counter's value.
+ */
+ function change(counters, step) {
+ return counters.each(function() {
+ var $counter = $(this);
+ // Increment counter
+ var count = value($counter) + step;
+ $counter.html(count);
+ // Trigger event
+ var event_name = step > 0 ? 'increment' : 'decrement';
+ $counter.trigger(event_name, [$counter, count]);
+ return count;
+ });
+ }
+ $.fn.increment = function(step) {
+ if(!step) { step = 1; }
+ change(this, step);
+ };
+ $.fn.decrement = function(step) {
+ if(!step) { step = -1; }
+ change(this, step);
+ };
+ $.fn.counterValue = function() {
+ return value($(this));
+ };
+})(jQuery);
@@ -0,0 +1,41 @@
+<h1>jQuery Increment/Decrement Plugin</h1>
+<p>This plugin allows you to easily increment and decrement values with jQuery.</p>
+<h2>Examples</h2>
+<p>We&#8217;ll use this <span class="caps">HTML</span> as a base for all the following examples:</p>
+<pre><code>
+&lt;html&gt;
+ &lt;head&gt;
+ &lt;script src='/javascripts/jquery.increment-decrement.js' type='text/javascript'&gt;&lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body&gt;
+ &lt;div id="counter"&gt;0&lt;/div&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+<h3>Incrementing values</h3>
+<pre><code>
+$('#counter').increment();
+</code></pre>
+<h3>Decrementing values</h3>
+<pre><code>
+$('#counter').decrement();
+</code></pre>
+<h3>Getting current value</h3>
+<pre><code>
+$('#counter').counterValue();
+</code></pre>
+<h3>Custom increment/decrement step</h3>
+<p>You can increment or decrement by any value you desire:<br />
+<pre><code>
+// Increment counter by 10
+$('#counter').increment(10);
+</code></pre></p>
+<h3>Listening to increment/decrement events</h3>
+<pre><code>
+$('#counter').bind('increment', function(event, counter, value) {
+ console.log('Incremented ' + counter + ' ' + value);
+});
+$('#counter').bind('decrement', function(event, counter, value) {
+ console.log('Decremented ' + counter + ' ' + value);
+});
+</code></pre>

0 comments on commit e10aeee

Please sign in to comment.