CleverTOC simple list

Example 1

In this first example, we provide a list item as the template to be cloned. The cleverTOC code requests the pages under the url provided, and makes a copy of the template for each entry returned in the list of pages. The values in the template are replaced by the matching values in the entry data. The template looks like this (spot the classes used to identify where to put the properties for each page record returned):

<ol class="clevertoc">
  <li class="template1 hidden"><a href="/" class="link"><span class="title">title</span></a><br />
     <span class="description">blah</span> </li>
</ol>

We need to supply a Sitebuilder data feed json api url to retrieve the list of pages, in this case:

var url = "/sitebuilder2/api/rss/toc.json?page=/services/its/intranet/projects/academictechnology/academictechnology-newsite/support/guides/estream-guides"; //set the url for the pages to list

Alternatively, we could do a keyword search:

var url = "/sitebuilder2/api/search/keywords.json?page=/services/its/intranet/projects/academictechnology/academictechnology-newsite/support/guides&keyword=moodle&keyword=moodle_module_space";

We then make a CTOC and call its constructor method:

jQuery(document).ready(function(){      //run this code when the page has loaded
var CTOC = new CleverTOC(url, cloneAndFillElement, toggleMe, ".template1");      //we tell it to use template1 as its template
CTOC.doCleverTOC();      //and do the cloning 
});

title
blah

Note that we pass two functions to the constructor: cloneAndFillElement and toggleMe. They are the two default functions that are used to do the copying of the template and to add actions to each keyword (for example, to add links to each keyword that when clicked filter the list of pages to show only items that share the keyword). We can override these by creating our own functions that behave differently and passing them in as arguments to the constructor instead.