CHANGED: spin() unspins all other spinners before spinning new elements

ADDED: alternative spinner demo
ADDED: check for jQuery before initializing (throws error)
ADDED: can pass overrides to spin()

demo.html

@@ -22,19 +22,19 @@
     <div id="mydiv">
       <table border="1" id="mytable">
         <tr>
-          <td id="acell1">Cell contents</td>
-          <td id="acell2" class="spin_here">Cell contents</td>
-          <td id="acell3">Cell contents</td>
+          <td>Cell contents</td>
+          <td class="spin_here">Cell contents</td>
+          <td>Cell contents</td>
         </tr>
         <tr>
-          <td id="acell4">Cell contents</td>
-          <td id="acell5">Cell contents</td>
-          <td id="acell6">Cell contents</td>
+          <td>Cell contents</td>
+          <td>Cell contents</td>
+          <td>Cell contents</td>
         </tr>
         <tr>
-          <td id="acell7" class="spin_here">Cell contents</td>
-          <td id="acell8">Cell contents</td>
-          <td class="spin_here" id="acell9">Cell contents</td>
+          <td class="spin_here">Cell contents</td>
+          <td>Cell contents</td>
+          <td class="spin_here">Cell contents</td>
         </tr>
       </table>
       <br/>
@@ -61,12 +61,17 @@
     </div>
 
     <hr/>
-    <button onclick="$.Spinner.unspin(); $('.a_p').spin()">Spin all elements with class "a_p"</button>
-    <button onclick="$.Spinner.unspin(); $('td').spin()">Spin all TD elements</button>
-    <button onclick="$.Spinner.unspin(); $('.spin_here').spin()">Spin all elements with class "spin_here"</button>
-    <button onclick="$.Spinner.unspin(); $('input').spin()">Spin all INPUT elements</button>
-    <button onclick="$.Spinner.unspin(); $('#inline_text').spin()">Spin all element with ID 'inline_text'</button>
-    <button onclick="$.Spinner.unspin(); $('form select').spin()">Spin SELECTs inside FORMs</button>
+    <button onclick="$('.a_p').spin()">Spin all elements with class "a_p"</button>
+    <button onclick="$('td').spin()">Spin all TD elements</button>
+    <button onclick="$('.spin_here').spin({unspinOthers: false})">Spin all elements with class "spin_here", leaving current spinner spinning</button>
+    <button onclick="$('input').spin()">Spin all INPUT elements</button>
+    <button onclick="$('#inline_text').spin()">Spin all element with ID 'inline_text'</button>
+    <button onclick="$('form select').spin()">Spin SELECTs inside FORMs</button>
+    <br/>
+    <button onclick="$('#mytable').spin({className: 'green-spinner'})">
+      Spin table with alternative spinner
+    </button>
+    <button onclick="$('#mytable').unspin()">Unspin table (non default spinners require manual unspinning)</button>
     <br/>
     <button onclick="$.Spinner.unspin();">Unspin all</button>
   </body>

javascripts/jquery.spinner.js

@@ -1,9 +1,12 @@
+if (typeof jQuery == 'undefined') throw("Juggernaut error. jQuery could not be found.");
+
 (function($){
   $.extend({
     Spinner: {
-      className:    "spinner",
-      spinnerID:    "_spinner_div",
-      debug:        false,
+      debug:        false,          // should print log messages?
+      unspinOthers: true,           // should unspin all spinners before spinning new ones?
+      className:    "spinner",      // spinner class; if an element is spun using a custom class, the "unspinOthers" will not pick it up. Such elements has to be unspun explicitly.
+      spinnerID:    "_spinner_div", // spinner divs have random IDs prefixed with this
       hasFirebug:   "console" in window && "firebug" in window.console,
       logger:       function(msg){
                       if(this.debug){
@@ -24,39 +27,41 @@
       }
     });
 
-  $.fn.spin = function(options){
+  $.fn.spin = function(){
+    var defaults = {
+      className:    $.Spinner.className,
+      unspinOthers: $.Spinner.unspinOthers,
+      spinnerID:    $.Spinner.spinnerID
+      }
+    var settings = $.extend(defaults, arguments.length != 0 ? arguments[0] : {});
+
+    (settings.unspinOthers && $.Spinner.unspin());
+
     return this.each(function(){
       var spun = $(this);
-      // if( (spinner = $("#"+spun.attr("id")+$.Spinner.spinnerID+"."+$.Spinner.className)) && spinner.get(0) ){
-      //   $.Spinner.logger("Already spinning.");
-      //   spinner.show();
-      //   return jQuery;
-      // }
-      // (spun.attr("spinning")==true && $.Spinner.logger("Already spinning."))
-
       if((spinner = $("#"+spun.attr("spinner"))) && spinner.get(0)){
         spinner.show();
         $.Spinner.logger("Already spinning.");
         return jQuery;
       }
 
       var spinnerID = $.Spinner.spinnerID + String(Math.random()).substring(2);
-      spun.attr({spinner: spinnerID});
-      $.Spinner.logger("SpinnerID: "+spinnerID + " Check: " + spun.attr("spinner"));
-      $(document.createElement('div'))
-        .attr({id: spinnerID, className: $.Spinner.className})
-        .css({
-          position: "absolute",
-          top: spun.offset().top, 
-          left: spun.offset().left, 
-          width: spun.outerWidth(), 
-          height: spun.outerHeight()
-        })
-        .appendTo($("body"));
+      $("body")
+        .append(
+          $('<div id="'+spinnerID+'" class="'+settings.className+'"></div"')
+          .css({
+            position: "absolute",
+            top: spun.offset().top, 
+            left: spun.offset().left, 
+            width: spun.outerWidth(), 
+            height: spun.outerHeight()
+          })
+        );
+      spun.attr({spinner: spinnerID}); // Keep track of the spinner for the element
     });
   };
 
-  $.fn.unspin = function(options){
+  $.fn.unspin = function(){
     return this.each(function(){
       $("#"+$(this).attr("spinner")).hide();
     });

stylesheets/spinner.css

@@ -4,4 +4,13 @@
   opacity: 0.75;
   filter: alpha(opacity: 75);
   -moz-opacity: 0.75;
-  -khtml-opacity: 0.75; }
+  -khtml-opacity: 0.75;
+}
+
+.green-spinner{
+  background: #fff url('../images/green-loader.gif') no-repeat center center;
+  opacity: 0.75;
+  filter: alpha(opacity: 75);
+  -moz-opacity: 0.75;
+  -khtml-opacity: 0.75;
+}