jquery templating example

jquery_templating_example.html

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script id="adminBarTemplate" type="text/x-jquery-tmpl"> 
   <li><img src="${iconSrc}" alt="${area}" /><a target="_blank" href="${areaLink}">${area}<span></span></a></li>
</script>
<script type="text/javascript">
  $(document).ready(function(){
     var adminBarData = [
		{ "iconSrc" : "src", "area" : "Page Text Manager", "areaLink" : "/admin/flex/bin/main.html" },
		{ "iconSrc" : "src", "area" : "Menu Manager", "areaLink" : "/admin/flex/bin/menuManager.html" }			
	];
   var adminBar = $( '<div/>', {
	id : "adminBar",
	html : '<ul></ul>'
   });				
   $( 'div:eq(0)' ).before( adminBar ); // insert adminBar before the first div on the page
   $('#adminBarTemplate').tmpl(adminBarData).appendTo( '#adminBar ul' ); // append in the template to the adminBar ul
});
</script>