jquery templating


/ Published in: JavaScript
Save to your folder(s)

Most of spservices function can be ignored -- not specifically relevant to templating. Important code in that block is the array push.


Copy this code and paste it in your HTML
  1. <script type="text/javascript" src="../Style%20Library/Scripts/jquery-1.5.min.js"></script>
  2. <script type="text/javascript" src="../Style%20Library/Scripts/jquery.tmpl.min.js"></script>
  3. <script type="text/javascript">
  4. var bannerpath = "../HomeRotator/";
  5.  
  6. function getRotator(){
  7. var banners = [];
  8.  
  9. $().SPServices({
  10. operation: "GetListItems",
  11. async: false,
  12. listName: "HomeRotator",
  13. CAMLQuery: '<Query><Where><Eq><FieldRef Name="Active" /><Value Type="Boolean">1</Value></Eq></Where></Query>',
  14. completefunc: function (xData, Status) {
  15. //printObject(xData);
  16.  
  17. $(xData.responseXML).find("[nodeName='z:row']").each(function(i) {
  18.  
  19. banners.push ( {
  20. "banImg": bannerpath + $(this).attr('ows_NameOrTitle'),
  21. "banHead": $(this).attr('ows_Headline'),
  22. "banSubHead": $(this).attr('ows_Sub_x0020_Headline'),
  23. "banLink": $(this).attr('ows_Link').split(",")[0]
  24. } );
  25.  
  26. });
  27. }
  28.  
  29. });/*-End SpServices*/
  30.  
  31.  
  32. $( "#bannerTemplate" ).tmpl( banners ).appendTo( "#homeSlider" );
  33. $('#homeSlider').jshowoff({controls:false, speed:8000});
  34. $('#homeSlider').css("visibility","visible");
  35.  
  36.  
  37.  
  38.  
  39. }/*End readThenWrite*/
  40.  
  41.  
  42.  
  43. </script>
  44. <script id="bannerTemplate" type="text/x-jquery-tmpl">
  45. <div>
  46. <a href="${banLink}"><img class="imgBg" src="${banImg}" alt="${banHead}" /></a>
  47.  
  48. <div class="slidelabel"><p><h2>${banHead}</h2><h3>${banSubHead}</h3></p><div class="slidecorner"></div></div>
  49. </div>
  50. </script>
  51. <div id="homeSlider" ></div>

URL: http://www.borismoore.com/2010/09/introducing-jquery-templates-1-first.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.