A demo to show how you can have a link for each tree item and use it with anchors.
Note: a custom property named ‘my-hash’ is used here to hold the URL/hash value for each item (see the JSON).
The anchors are not defined into this page. You can define them by including one <a id=”my-hash”>section title here</a> tag
(where the value of the ID attribute ‘my-hash’ need to be replaced with the real hash value corresponding to the anchor).
See a demo with hash/anchors only for tree leaves (items without children) here.
<![CDATA[
$(function() {
// init the tree
$('#tree').aciTree({
ajax: {
url: '../json/sample.json'
},
itemHook: function(parent, item, itemData, level) {
// a custom item implementation to show a link
this.setLabel(item, {
label: '‘ + itemData.label + ”
});
}
});
});
]]><![CDATA[
$(function() {
var log = $('.log div');
// write to log
$('#tree').on('acitree', function(event, api, item, eventName, options) {
if (api.isItem(item)) {
log.prepend('
‘ + eventName + ‘ [‘ + api.getId(item) + ‘]’);
} else {
log.prepend(‘
‘ + eventName + ‘ [tree]’);
}
});
$(‘.clear_log’).click(function() {
$(‘.log div’).html(”);
return false;
});
});
]]>
<![CDATA[
$(function() {
$('script.code').each(function() {
$(this).before('
');
$(this).prev('div').find('pre').text($(this).html());
});});
]]>