benatkin / jquery-stuff

plugins, examples, snippets

This URL has Read+Write access

jquery-stuff / gather.html
raw normal view history
e6517852 » benatkin 2009-06-23 added gather example 1 <html>
2 <head>
3 <title>gather</title>
4 <script type="text/javascript" src="jquery.js"></script>
5 <script type="text/javascript" src="jquery.convenience.js"></script>
6 <script type="text/javascript" src="jquery.json.js"></script>
7 <script type="text/javascript">
8 $(function() {
9 $.convenience('gather');
10 $('.gatherer').gather(function(e) {
11 $(this).data('fruits').push(e.result);
12 });
13 $('.fruit').gather(function() {
14 return $(this).text();
15 });
16 $('[value=gather]').click(function() {
17 $('.gatherer').data('fruits', []);
18 $('.fruit').gather();
19 $('.result').text($.toJSON($('.gatherer').data('fruits')));
20 });
21 });
22 </script>
23 <style type="text/css">
24 div {
25 padding-left: 20px;
26 }
27
28 div.gatherer {
29 padding: 3px;
30 border: 2px solid red;
31 }
32
33 span.fruit {
34 background-color: #f8f;
35 }
36
37 span.vegetable {
38 background-color: #bbb;
39 }
40 </style>
41 </head>
42 <body>
43 <p>
44 In this example, an event called "gather" is used to gather all fruits into an array.<br />
45 The event is called on each of the fruit spans.<br />
46 The fruit spans return the text inside of them when they receive the gather event.<br />
47 The events then bubble up to the getherer.<br />
48 The gatherer responds to the gather event by taking the result returned by the gather handler for
49 the fruit and appending it to an array stored using jQuery's data function.<br />
50 The gather event is triggered on the fruits by clicking the gather button.<br />
51 After the events complete, the click handler for the gather button takes the array from the gatherer,
52 serializes it to JSON, and displays it in a span next to the button.
53 </p>
54 <p>The gatherer div has a red border.</p>
55 <p>
56 <span class="fruit">fruit</span>
57 <span class="vegetable">vegetable</span>
58 </p>
59 <div class="gatherer">
60 fruits and veggies
61 <div>
62 green
63 <div><span class="fruit">pear</span></div>
64 <div><span class="vegetable">cucumber</span></div>
65 <div>
66 strong
67 <div><span class="fruit">kiwi</span></div>
68 <div><span class="vegetable">scallion</span></div>
69 </div>
70 </div>
71 <div>
72 red
73 <div><span class="fruit">raspberries</span></div>
74 <div><span class="vegetable">beets</span></div>
75 </div>
76 </div>
77 <p>
78 <input type="button" value="gather" />
79 <span class="result"></span>
80 </p>
81 </body>
82 </html>
83