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>