160 lines
7.3 KiB
HTML
160 lines
7.3 KiB
HTML
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Fancytree Test</title>
|
|
<!-- Boxiocns CDN Link -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js" integrity="sha512-2V49R8ndaagCOnwmj8QnbT1Gz/rie17UouD9Re5WxbzRVUGoftCu5IuqqtAM9+UC3fwfHCSJR1hkzNQh/2wdtg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbone-min.js" integrity="sha512-TztyCWDNoN0YKl30gDCMKsiWs35juID+W7ZM2uvPeLLmiNvZg789SglgB/QeUbewqIF2Z4mVq3PyIEa+YXXADQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
|
|
|
|
|
|
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/appfactory3.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afssponsorship.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afssubscriber.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsnotifications.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afspayments.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsform.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsextras.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsevents.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsdocuments.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsaccount.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsemail.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsanalytics.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsdonations.js"></script>
|
|
<script src="/portal/admin/core/api/js/libs/appfactory/afsspinner.js"></script>
|
|
|
|
|
|
<link href="/portal/admin/core/api/styles/tabler/tabler.min.css" rel="stylesheet"/>
|
|
<script src="/portal/admin/core/api/js/libs/tabler/tabler.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
<h1>Fancytree API</h1>
|
|
<div class="description">
|
|
Demonstrate some Fancytree and FancytreeNode API methods.
|
|
<br>
|
|
See the <a href="https://github.com/mar10/fancytree/wiki/TutorialApi"
|
|
target="_blank" class="external">API Tutorial</a>
|
|
for details.
|
|
</div>
|
|
<div>
|
|
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
|
|
</div>
|
|
|
|
<div id="tree">
|
|
<ul>
|
|
<li>This simple node (and the following) have been created from html.
|
|
<li id="id1" title="This is item #1">item1 with key and tooltip
|
|
<li id="id2">item2 with key "id2"
|
|
|
|
<li id="id3" class="folder">Standard Folder with some children
|
|
<ul>
|
|
<li id="id3.1">Sub-item 3.1
|
|
<li id="id3.2">Sub-item 3.2
|
|
</ul>
|
|
|
|
<li id="id4">item 4. Note that also non-folders (i.e. 'documents') may have child nodes
|
|
<ul>
|
|
<li id="id4.1">Sub-item 4.1
|
|
<li id="id4.2">Sub-item 4.2
|
|
<li id="id4.3">Sub-item 4.3
|
|
<ul>
|
|
<li id="id4.3.1">Sub-item 4.3.1
|
|
<li id="id4.3.2">Sub-item 4.3.2
|
|
<ul>
|
|
<li id="id4.3.2.1">Sub-item 4.3.2.1
|
|
<li id="id4.3.2.2">Sub-item 4.3.2.2
|
|
</ul>
|
|
</ul>
|
|
<li id="id4.4">Sub-item 4.4
|
|
</ul>
|
|
|
|
<li id="id5" class="expanded folder">Advanced examples
|
|
<ul>
|
|
<li data="key: 'node5.1'">item5.1: Using data attribute as an alternative way to specify a key.
|
|
<li data="key: 'node5.3', folder: true">item5.1: Using data attribute as an alternative way to specify a folder.
|
|
<li id="id5.2">Sub-item 5.2
|
|
<li>Item without a key. Keys are optional (generated automatically), but may be used in the callbacks
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>Active node: <span id="echoActive">-</span></div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<script data-main="main" src="/portal/admin/core/api/js/libs/require.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
$(function(){
|
|
// Initialize the tree inside the <div>element.
|
|
// The tree structure is read from the contained <ul> tag.
|
|
$("#tree").fancytree({
|
|
checkbox: true,
|
|
activate: function(event, data) {
|
|
$("#echoActive").text(data.node.title);
|
|
// alert(node.getKeyPath());
|
|
if( data.node.url )
|
|
window.open(data.node.url, data.node.target);
|
|
},
|
|
deactivate: function(event, data) {
|
|
$("#echoSelected").text("-");
|
|
},
|
|
focus: function(event, data) {
|
|
$("#echoFocused").text(data.node.title);
|
|
},
|
|
blur: function(event, data) {
|
|
$("#echoFocused").text("-");
|
|
},
|
|
lazyLoad: function(event, data){
|
|
// Simulate a slow ajax request
|
|
var dfd = new $.Deferred();
|
|
data.result = dfd.promise();
|
|
window.setTimeout(function(){
|
|
dfd.resolve([
|
|
{ title: "Lazy node 1", lazy: true },
|
|
{ title: "Simple node 2", select: true }
|
|
]);
|
|
}, 1500);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|