jQuery基础教程-第8章-004完整代码

1.

 /******************************************************************************
   Our plugin code comes first in this document. Normally, plugins would
   appear in separate files named jquery.plugin-name.js, but for our examples
   it's convenient to place this plugin code in the same JavaScript file as
   the code that calls it.
 ******************************************************************************/
 
 /******************************************************************************
   $.sum()
   Return the total of the numeric values in an array/object.
 ******************************************************************************/
 (function($) {
   $.mathUtils = {
     sum: function(array) {
       var total = 0;
 
       $.each(array, function(index, value) {
         value = $.trim(value);
         value = parseFloat(value) || 0;
 
         total += value;
       });
       return total;
     },
     average: function(array) {
       if ($.isArray(array)) {
         return $.mathUtils.sum(array) / array.length;
       }
       return '';
     }
   };
 })(jQuery);
 
 /******************************************************************************
   .swapClass()
   Exchange one class for another on the selected elements.
 ******************************************************************************/
 (function($) {
   $.fn.swapClass = function(class1, class2) {
     return this.each(function() {
       var $element = $(this);
       if ($element.hasClass(class1)) {
         $element.removeClass(class1).addClass(class2);
       }
       else if ($element.hasClass(class2)) {
         $element.removeClass(class2).addClass(class1);
       }
     });
   };
 })(jQuery);
 
 /******************************************************************************
   .shadow()
   Create a shadow effect on any element by brute-force copying.
 ******************************************************************************/
 (function($) {
   $.fn.shadow = function(opts) {
     var options = $.extend({}, $.fn.shadow.defaults, opts);
 
     return this.each(function() {
       var $originalElement = $(this);
       for (var i = 0; i < options.copies; i++) {
         var offset = options.copyOffset(i);
         $originalElement
           .clone()
           .css({
             position: 'absolute',
             left: $originalElement.offset().left + offset.x,
             top: $originalElement.offset().top + offset.y,
             margin: 0,
             zIndex: -1,
             opacity: options.opacity
           })
           .appendTo('body');
       }
     });
   };
 
   $.fn.shadow.defaults = {
     copies: 5,
     opacity: 0.1,
     copyOffset: function(index) {
       return {x: index, y: index};
     }
   };
 })(jQuery);
 
 /******************************************************************************
   .tooltip()
   A simple jQuery UI tooltip widget.
 ******************************************************************************/
 (function($) {
   $.widget('ljq.tooltip', {
     options: {
       offsetX: 10,
       offsetY: 10,
       content: function() {
         return $(this).data('tooltip-text');
       }
     },
 
     _create: function() {
       this._tooltipDiv = $('<div></div>')
         .addClass('ljq-tooltip-text ui-widget ui-state-highlight ui-corner-all')
         .hide().appendTo('body');
       this.element
         .addClass('ljq-tooltip-trigger')
         .on('mouseenter.ljq-tooltip', $.proxy(this._open, this))
         .on('mouseleave.ljq-tooltip', $.proxy(this._close, this));
     },
 
     destroy: function() {
       this._tooltipDiv.remove();
       this.element
         .removeClass('ljq-tooltip-trigger')
         .off('.ljq-tooltip');
       $.Widget.prototype.destroy.apply(this, arguments);
     },
 
     open: function() {
       this._open();
     },
 
     close: function() {
       this._close();
     },
 
     _open: function() {
       if (!this.options.disabled) {
         var elementOffset = this.element.offset();
         this._tooltipDiv.css({
           position: 'absolute',
           left: elementOffset.left + this.options.offsetX,
           top: elementOffset.top + this.element.height() + this.options.offsetY
         }).text(this.options.content.call(this.element[0]));
         this._tooltipDiv.show();
         this._trigger('open');
       }
     },
 
     _close: function() {
       this._tooltipDiv.hide();
       this._trigger('close');
     }
   });
 })(jQuery);
 
 /******************************************************************************
   End plugin code; begin custom script code.
 ******************************************************************************/
 $(document).ready(function() {
   var $inventory = $('#inventory tbody');
   var quantities = $inventory.find('td:nth-child(2)')
   .map(function(index, qty) {
     return $(qty).text();
   }).get();
 
   var prices = $inventory.find('td:nth-child(3)')
   .map(function(index, qty) {
     return $(qty).text();
   }).get();
 
   var sum = $.mathUtils.sum(quantities);
   var average = $.mathUtils.average(prices);
   $('#sum').find('td:nth-child(2)').text(sum);
   $('#average').find('td:nth-child(3)').text(average.toFixed(2));
 
   $('table').click(function() {
     $('tr').swapClass('one', 'two');
   });
 
   $.fn.shadow.defaults.copies = 10;
   $('h1').shadow({
     copyOffset: function(index) {
       return {x: -index, y: index};
     }
   });
 
   $('a').tooltip();
 });

2.

 <!DOCTYPE html>
 
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>Developing Plugins</title>
 
     <link rel="stylesheet" href="08.css" type="text/css" />
     <link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />
 
     <script src="jquery.js"></script>
     <script src="jquery-ui-1.10.0.custom.min.js"></script>
     <script src="08.js"></script>
 
   </head>
   <body>
     <div id="container">
       <h1>Inventory</h1>
       <table id="inventory">
         <thead>
           <tr class="one">
             <th>Product</th>
             <th>Quantity</th>
             <th>Price</th>
           </tr>
         </thead>
         <tfoot>
           <tr class="two" id="sum">
             <td>Total</td>
             <td></td>
             <td></td>
           </tr>
           <tr id="average">
             <td>Average</td>
             <td></td>
             <td></td>
           </tr>
         </tfoot>
         <tbody>
           <tr>
             <td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>
             <td>4</td>
             <td>2.50</td>
           </tr>
           <tr>
             <td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>
             <td>12</td>
             <td>4.32</td>
           </tr>
           <tr>
             <td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>
             <td>14</td>
             <td>7.89</td>
           </tr>
         </tbody>
       </table>
     </div>
   </body>
 </html>