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

  1 /******************************************************************************
  2   Our plugin code comes first in this document. Normally, plugins would
  3   appear in separate files named jquery.plugin-name.js, but for our examples
  4   it‘s convenient to place this plugin code in the same JavaScript file as
  5   the code that calls it.
  6 ******************************************************************************/
  7 
  8 /******************************************************************************
  9   $.sum()
 10   Return the total of the numeric values in an array/object.
 11 ******************************************************************************/
 12 (function($) {
 13   $.mathUtils = {
 14     sum: function(array) {
 15       var total = 0;
 16 
 17       $.each(array, function(index, value) {
 18         value = $.trim(value);
 19         value = parseFloat(value) || 0;
 20 
 21         total += value;
 22       });
 23       return total;
 24     },
 25     average: function(array) {
 26       if ($.isArray(array)) {
 27         return $.mathUtils.sum(array) / array.length;
 28       }
 29       return ‘‘;
 30     }
 31   };
 32 })(jQuery);
 33 
 34 
 35 /******************************************************************************
 36   .swapClass()
 37   Exchange one class for another on the selected elements.
 38 ******************************************************************************/
 39 (function($) {
 40   $.fn.swapClass = function(class1, class2) {
 41     return this.each(function() {
 42       var $element = $(this);
 43       if ($element.hasClass(class1)) {
 44         $element.removeClass(class1).addClass(class2);
 45       }
 46       else if ($element.hasClass(class2)) {
 47         $element.removeClass(class2).addClass(class1);
 48       }
 49     });
 50   };
 51 })(jQuery);
 52 
 53 
 54 /******************************************************************************
 55   .shadow()
 56   Create a shadow effect on any element by brute-force copying.
 57 ******************************************************************************/
 58 (function($) {
 59   $.fn.shadow = function(opts) {
 60     var options = $.extend({}, $.fn.shadow.defaults, opts);
 61 
 62     return this.each(function() {
 63       var $originalElement = $(this);
 64       for (var i = 0; i < options.copies; i++) {
 65         var offset = options.copyOffset(i);
 66         $originalElement
 67           .clone()
 68           .css({
 69             position: ‘absolute‘,
 70             left: $originalElement.offset().left + offset.x,
 71             top: $originalElement.offset().top + offset.y,
 72             margin: 0,
 73             zIndex: -1,
 74             opacity: options.opacity
 75           })
 76           .appendTo(‘body‘);
 77       }
 78     });
 79   };
 80 
 81   $.fn.shadow.defaults = {
 82     copies: 5,
 83     opacity: 0.1,
 84     copyOffset: function(index) {
 85       return {x: index, y: index};
 86     }
 87   };
 88 })(jQuery);
 89 
 90 
 91 /******************************************************************************
 92   .tooltip()
 93   A simple jQuery UI tooltip widget.
 94 ******************************************************************************/
 95 (function($) {
 96   $.widget(‘ljq.tooltip‘, {
 97     options: {
 98       offsetX: 10,
 99       offsetY: 10,
100       content: function() {
101         return $(this).data(‘tooltip-text‘);
102       }
103     },
104 
105     _create: function() {
106       this._tooltipDiv = $(‘<div></div>‘)
107         .addClass(‘ljq-tooltip-text ui-widget ui-state-highlight ui-corner-all‘)
108         .hide().appendTo(‘body‘);
109       this.element
110         .addClass(‘ljq-tooltip-trigger‘)
111         .on(‘mouseenter.ljq-tooltip‘, $.proxy(this._open, this))
112         .on(‘mouseleave.ljq-tooltip‘, $.proxy(this._close, this));
113     },
114 
115     destroy: function() {
116       this._tooltipDiv.remove();
117       this.element
118         .removeClass(‘ljq-tooltip-trigger‘)
119         .off(‘.ljq-tooltip‘);
120       $.Widget.prototype.destroy.apply(this, arguments);
121     },
122 
123     open: function() {
124       this._open();
125     },
126 
127     close: function() {
128       this._close();
129     },
130 
131     _open: function() {
132       if (!this.options.disabled) {
133         var elementOffset = this.element.offset();
134         this._tooltipDiv.css({
135           position: ‘absolute‘,
136           left: elementOffset.left + this.options.offsetX,
137           top: elementOffset.top + this.element.height() + this.options.offsetY
138         }).text(this.options.content.call(this.element[0]));
139         this._tooltipDiv.show();
140         this._trigger(‘open‘);
141       }
142     },
143 
144     _close: function() {
145       this._tooltipDiv.hide();
146       this._trigger(‘close‘);
147     }
148   });
149 })(jQuery);
150 
151 
152 /******************************************************************************
153   End plugin code; begin custom script code.
154 ******************************************************************************/
155 $(document).ready(function() {
156   var $inventory = $(‘#inventory tbody‘);
157   var quantities = $inventory.find(‘td:nth-child(2)‘)
158   .map(function(index, qty) {
159     return $(qty).text();
160   }).get();
161 
162   var prices = $inventory.find(‘td:nth-child(3)‘)
163   .map(function(index, qty) {
164     return $(qty).text();
165   }).get();
166 
167   var sum = $.mathUtils.sum(quantities);
168   var average = $.mathUtils.average(prices);
169   $(‘#sum‘).find(‘td:nth-child(2)‘).text(sum);
170   $(‘#average‘).find(‘td:nth-child(3)‘).text(average.toFixed(2));
171 
172   $(‘table‘).click(function() {
173     $(‘tr‘).swapClass(‘one‘, ‘two‘);
174   });
175 
176   $.fn.shadow.defaults.copies = 10;
177   $(‘h1‘).shadow({
178     copyOffset: function(index) {
179       return {x: -index, y: index};
180     }
181   });
182 
183   $(‘a‘).tooltip();
184 });

 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4   <head>
 5     <meta charset="utf-8">
 6     <title>Developing Plugins</title>
 7 
 8     <link rel="stylesheet" href="08.css" type="text/css" />
 9     <link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />
10 
11     <script src="jquery.js"></script>
12     <script src="jquery-ui-1.10.0.custom.min.js"></script>
13     <script src="08.js"></script>
14     
15   </head>
16   <body>
17     <div id="container">
18       <h1>Inventory</h1>
19       <table id="inventory">
20         <thead>
21           <tr class="one">
22             <th>Product</th>
23             <th>Quantity</th>
24             <th>Price</th>
25           </tr>
26         </thead>
27         <tfoot>
28           <tr class="two" id="sum">
29             <td>Total</td>
30             <td></td>
31             <td></td>
32           </tr>
33           <tr id="average">
34             <td>Average</td>
35             <td></td>
36             <td></td>
37           </tr>
38         </tfoot>
39         <tbody>
40           <tr>
41             <td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>
42             <td>4</td>
43             <td>2.50</td>
44           </tr>
45           <tr>
46             <td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>
47             <td>12</td>
48             <td>4.32</td>
49           </tr>
50           <tr>
51             <td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann‘s recipe.">Gourmet Spam</a></td>
52             <td>14</td>
53             <td>7.89</td>
54           </tr>
55         </tbody>
56       </table>
57     </div>
58   </body>
59 </html>