| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|---|
| 2 | <html xmlns="http://www.w3.org/1999/xhtml">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|---|
| 5 | <title>jQuery.Collection</title>
|
|---|
| 6 | <script type="text/javascript" src="jquery.js"></script>
|
|---|
| 7 | <script type="text/javascript" src="jquery.collection.js"></script>
|
|---|
| 8 | <script type="text/javascript">
|
|---|
| 9 | /**
|
|---|
| 10 | * Note: $.collection is a valid collection class itself, it gathers the arguments received into the collection.
|
|---|
| 11 | */
|
|---|
| 12 | /**
|
|---|
| 13 | * Example of a collection for numbers
|
|---|
| 14 | */
|
|---|
| 15 | $.number = $.collection.build();
|
|---|
| 16 | $.number.fn.sum = function(){//sum returns the sum of all it's items
|
|---|
| 17 | var n = 0;
|
|---|
| 18 | this.each(function(){
|
|---|
| 19 | n += this;
|
|---|
| 20 | });
|
|---|
| 21 | return n;
|
|---|
| 22 | };
|
|---|
| 23 | $.number(1,2,3,4).add(5).not(function(){
|
|---|
| 24 | return this <= 2;
|
|---|
| 25 | }).sum() == 12 || alert('bad 1st');//yields --> 12 ( 3 + 4 + 5 )
|
|---|
| 26 |
|
|---|
| 27 | /**
|
|---|
| 28 | * Example of a collection that imports methods from Array.
|
|---|
| 29 | */
|
|---|
| 30 | $.array = $.collection.build();
|
|---|
| 31 | $.array.fn.include( Array.prototype, 'join,concat,push,pop,shift,unshift' );
|
|---|
| 32 |
|
|---|
| 33 | var $arr = $.array('I','like','xyz','jQuery').add('very').not('xyz');
|
|---|
| 34 | $arr.push( 'much' );
|
|---|
| 35 | $arr.join(' ') == 'I like jQuery very much' || alert('bad 2nd');// yields --> 'I like jQuery very much'
|
|---|
| 36 |
|
|---|
| 37 | /**
|
|---|
| 38 | * Example of a collection of nodes.
|
|---|
| 39 | */
|
|---|
| 40 | var Nodes = $.collection.build();//no need to save the collection inside jQuery.
|
|---|
| 41 | Nodes.fn.init = function( elems ){//look for the elements and add them to the collection
|
|---|
| 42 | return this.setArray( $.makeArray(document.getElementsByTagName(elems)) );
|
|---|
| 43 | };
|
|---|
| 44 | window.onload = function(){
|
|---|
| 45 | window.nodes = Nodes('body').add('script').attr('className','node');// yields --> [ <body>, <script>, <script> ]
|
|---|
| 46 | };
|
|---|
| 47 |
|
|---|
| 48 | var Users = $.collection.build();
|
|---|
| 49 | Users.fn.init = function( name, role ){
|
|---|
| 50 | return this.setArray([{
|
|---|
| 51 | name: name,
|
|---|
| 52 | role: role
|
|---|
| 53 | }]);
|
|---|
| 54 | };
|
|---|
| 55 | Users.fn.getByRole = function( role ){
|
|---|
| 56 | return this.filter(function(){
|
|---|
| 57 | return this.role == role;
|
|---|
| 58 | });
|
|---|
| 59 | };
|
|---|
| 60 | var employees = Users('Joe','Moderator').add('Sally','Administrator');
|
|---|
| 61 | employees.getByRole('Administrator');
|
|---|
| 62 |
|
|---|
| 63 | function Person( name, age ){
|
|---|
| 64 | this.name = name;
|
|---|
| 65 | if( age )
|
|---|
| 66 | this.age = age;
|
|---|
| 67 | };
|
|---|
| 68 | var People = $.collection.build();
|
|---|
| 69 | People.fn.init = function(){//define a function initializer
|
|---|
| 70 | return this.setArray($.map( arguments, function(name){
|
|---|
| 71 | return new Person(name);
|
|---|
| 72 | }));
|
|---|
| 73 | };
|
|---|
| 74 | $('merry','sam','pippin').eq(1);//[{name:'sam'}]
|
|---|
| 75 |
|
|---|
| 76 | People.fn.byName = function( name ){
|
|---|
| 77 | return this.filter(function(){
|
|---|
| 78 | return this.name == name;
|
|---|
| 79 | });
|
|---|
| 80 | };
|
|---|
| 81 |
|
|---|
| 82 | People('john','jane').byName('jane');//[{name:'jane'}]
|
|---|
| 83 |
|
|---|
| 84 | var AgePeople = People.build();//inherit
|
|---|
| 85 | AgePeople.fn.init = function(){//rewrite the init
|
|---|
| 86 | return this.setArray($.map( arguments, function(p){
|
|---|
| 87 | return new Person(p[0],p[1]);
|
|---|
| 88 | }));
|
|---|
| 89 | };
|
|---|
| 90 | AgePeople.fn.sortByAge = function(){
|
|---|
| 91 | return this.pushStack(this.get().sort(function( a, b ){
|
|---|
| 92 | return a.age - b.age;
|
|---|
| 93 | }));
|
|---|
| 94 | };
|
|---|
| 95 |
|
|---|
| 96 | AgePeople( ['rex', 32], ['stan', 25] ).sortByAge();//[ {name:'stan',age:25}, {name:'rex',age:32} ]
|
|---|
| 97 | </script>
|
|---|
| 98 | <style type="text/css">
|
|---|
| 99 | body{
|
|---|
| 100 | padding:5px;
|
|---|
| 101 | height:1600px;
|
|---|
| 102 | background:#EEE;
|
|---|
| 103 | }
|
|---|
| 104 | ul,li,h1,h2,h3,p{
|
|---|
| 105 | list-style:none;
|
|---|
| 106 | padding:0;
|
|---|
| 107 | margin:0;
|
|---|
| 108 | }
|
|---|
| 109 | #links{
|
|---|
| 110 | border:1px solid black;
|
|---|
| 111 | display:block;
|
|---|
| 112 | padding:10px;
|
|---|
| 113 | position:relative;
|
|---|
| 114 | margin:15px 0;
|
|---|
| 115 | width:115px;
|
|---|
| 116 | }
|
|---|
| 117 | h3{
|
|---|
| 118 | margin-bottom:5px;
|
|---|
| 119 | }
|
|---|
| 120 | strong{
|
|---|
| 121 | font-size:13px;
|
|---|
| 122 | }
|
|---|
| 123 | .message{
|
|---|
| 124 | font-weight:bolder;
|
|---|
| 125 | margin-top:10px;
|
|---|
| 126 | }
|
|---|
| 127 | </style>
|
|---|
| 128 | </head>
|
|---|
| 129 | <body>
|
|---|
| 130 | <h1>jQuery.Collection <strong>by Ariel Flesler</strong></h1>
|
|---|
| 131 | <p class="message">Check the source for a few examples, this demo is under construction :)</p>
|
|---|
| 132 | <div id="links">
|
|---|
| 133 | <h3>Links</h3>
|
|---|
| 134 | <ul>
|
|---|
| 135 | <li><a target="_blank" href="http://plugins.jquery.com/project/Collection">Project Page</a></li>
|
|---|
| 136 | <li><a target="_blank" href="http://flesler.blogspot.com/2008/01/jquerycollection.html">Blog entry</a></li>
|
|---|
| 137 | </ul>
|
|---|
| 138 | </div>
|
|---|
| 139 | </body>
|
|---|
| 140 | </html>
|
|---|
