1.
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 });
2.
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>
时间： 2024-11-03 19:59:15