Replication Example

A simple example of a replication. Upon replicating elements, each new object will get a random background color.

The Code

This demo is run off the following code:

   
  <div id="rp-container" class="ui-helper-clearfix">
      <h3 style="text-align:center">
          Replicated Elements: <span id="rp-count">0</span>
          <button id="addClone">Replicate</button>
      </h3>
      <div id="rp-template" class="ui-corner-all">
          <h4>My Position is #<span class="pos"></span></h4>
          <a href="#" class="alert">Click To Alert</a>
      </div>
  </div>
		

   
  var count, rep;
	
  function randomColor(){ 
      return (Math.round(0xFFFFFF * Math.random()).toString(16) + "000000")
          .replace(/([a-f0-9]{6}).+/, "#$1").toUpperCase() 
  }
	
  function alertClick(){ 
      alert('My position is: ' + 
          jQuery('.pos', $(this).parent()).text()); return false 
  }
	
  function doReplicate(){ 
      if (rep.length < 50) 
          rep.replicate(1, processReplication) 
  }
	
  function processReplication(){ 
      var pos = this.length-1;
      count.text( this.length ); 
      this.update(pos, {count: pos, click: alertClick, color: randomColor()});
  }
	
  jQuery(function(){
  
      jQuery('#addClone').click(doReplicate);
	  
      count = jQuery('#rp-count');
	  
      rep = jQuery('#rp-template').replicator('main', {
          count: {selector: '.pos', func: 'text', value: 'count'},
          click: {selector: 'a', func: 'click', value: 'click'},
          color: {func: 'css', type: 'backgroundColor', value: 'color'}
      }, '#rp-container');
	  
      rep.setReplications(5, function(){
          count.text(this.length);
          for (var i = 0; i < this.length; ++i)
          this.update(i, {count: i, click: alertClick, color: randomColor()})
      });
	  
	})
		

Dcoumentation

Please visit: http://eric.garside.name/docs.html?p=replicator

Current Downloads

The current version of Replicator can be downloaded from Google Code

Subversion

You can also checkout the subversion repository for Replicator with the following command:

			
   svn checkout http://jquery-curator.googlecode.com/svn/trunk/ jquery-curator-read-only