Demo: Simple Item Linking

Demos > Simple Item Linking

Source

<div id="demo-contact">
	<div class="name">My Name</div>
	<div class="company">My Company</div>
	<div class="phone">000-000-0000</div>
	<a class="url" href="http://myurl.com/">http://myurl.com/</a>
</div>
	
<div>
	<input type="button" value="link" onclick="link()"> Click and try to edit the fields.
</div>

<div id="edit">
	<div><input type="text" value="My Name" class="name" /></div>
	<div><input type="text" value="My Company" class="company" /></div>
	<div><input type="text" value="000-000-0000" class="phone" /></div>
	<div><input type="text" value="http://myurl.com/" class="url" /></div>
</div>

$('#contact')
	.item({
		name: "John Doe",
		company: "The Example Company",
		phone: "604-555-1234",
		url: "http://example.com/"
	})
	.chain({
		'.name': '{name}',
		'.company': '{company}',
		'.phone': '{phone}',
		'.url': {href:'{url}', content:'{url}'}
	});

function link()
{
	$('#edit')
		.item('link', '#contact', 'self')
		.chain(function(){
			var self = this;
			
			// Update item on keypress
			this.find(':input').keyup(function(){
				self.item({
					name: self.find('.name').val(),
					company: self.find('.company').val(),
					phone: self.find('.phone').val(),
					url: self.find('.url').val()
				})
			})
		});
}