Advanced Search

Return to Snippet

Revision: 42754
at March 10, 2011 05:08 by rumremix
Initial Code 
<script type="text/javascript" src="../Style%20Library/Scripts/jquery-1.5.min.js"></script>
<script type="text/javascript" src="../Style%20Library/Scripts/jquery.tmpl.min.js"></script>	
<script type="text/javascript">
var bannerpath = "../HomeRotator/";

function getRotator(){
var banners = [];
 
$().SPServices({
		  operation: "GetListItems",
		  async: false,
		  listName: "HomeRotator",
         CAMLQuery: '<Query><Where><Eq><FieldRef Name="Active" /><Value Type="Boolean">1</Value></Eq></Where></Query>',
		  completefunc: function (xData, Status) {
//printObject(xData);

		 		$(xData.responseXML).find("[nodeName='z:row']").each(function(i) {
		 				 			
		 			banners.push ( {
		 			"banImg": bannerpath + $(this).attr('ows_NameOrTitle'), 
		 			"banHead": $(this).attr('ows_Headline'),
		 			"banSubHead": $(this).attr('ows_Sub_x0020_Headline'),
		 			"banLink": $(this).attr('ows_Link').split(",")[0] 
		 			} );
		 		
					});
				}	
 
		});/*-End SpServices*/
 
 
$( "#bannerTemplate" ).tmpl( banners ).appendTo( "#homeSlider" );
$('#homeSlider').jshowoff({controls:false, speed:8000});
    $('#homeSlider').css("visibility","visible");

 
 
 
}/*End readThenWrite*/
  
 
  
</script>
<script id="bannerTemplate" type="text/x-jquery-tmpl">
	<div>
        <a href="${banLink}"><img class="imgBg" src="${banImg}" alt="${banHead}" /></a>
        
        <div class="slidelabel"><p><h2>${banHead}</h2><h3>${banSubHead}</h3></p><div class="slidecorner"></div></div>
    </div>
	</script>	
<div id="homeSlider" ></div>
Initial URL 
http://www.borismoore.com/2010/09/introducing-jquery-templates-1-first.html
Initial Description 
Most of spservices function can be ignored -- not specifically relevant to templating. Important code in that block is the array push.
Initial Title 
jquery templating
Initial Tags 
template, jquery
Initial Language 
JavaScript