Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

An example for the issue #71 #77

Closed
wants to merge 1 commit into from
Closed

An example for the issue #71 #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions demo/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@
<li><a target="content" href="sample-form.html">Embed in forms</a>
<li><a target="content" href="sample-multiline.html">Large nodes</a>
<li><a target="content" href="sample-scroll.html">Smart scrolling</a>
<li><a target="content" href="sample-keyboard.html">Keyboard navigation</a>
</ul>
<li class="folder">Test
<ul>
Expand Down
150 changes: 150 additions & 0 deletions demo/sample-keyboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Fancytree - Example</title>

<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery-ui.custom.js" type="text/javascript"></script>

<link href="../src/skin-win7/ui.fancytree.css" rel="stylesheet" type="text/css">
<script src="../src/jquery.fancytree.js" type="text/javascript"></script>

<!-- Start_Exclude: This block is not part of the sample code -->
<link href="../lib/prettify.css" rel="stylesheet">
<script src="../lib/prettify.js" type="text/javascript"></script>
<link href="sample.css" rel="stylesheet" type="text/css">
<script src="sample.js" type="text/javascript"></script>

<style type="text/css">
.fancytree-node input {
margin-left: 10px;
}
</style>
<!-- End_Exclude -->

<script type="text/javascript">
function createNode(e, ctx) {
// add fake <input/> to the node
var $input = $("<input/>").val(ctx.node.title);
$("span.fancytree-title", ctx.node.li).before($input);
}

$(function () {
var source = [
{
title: "Item 1",
children: [
{ title: "Item 1.1" },
{ title: "Item 1.2" }
]
}, {
title: "Item 2",
children: [
{ title: "Item 2.1" },
{ title: "Item 2.2" }
]
}, {
title: "Item 3",
children: [
{ title: "Item 3.1" },
{ title: "Item 3.2" }
]
}, {
title: "Item 4",
children: [
{ title: "Item 4.1" },
{ title: "Item 4.2" }
]
}
];

$("#tree1").fancytree({
source: source,
checkbox: true,
createNode: createNode,
tabbable: true
});

$("#tree2").fancytree({
source: source,
checkbox: true,
createNode: createNode,
tabbable: false
});

$("#tree3").fancytree({
source: source,
checkbox: true,
createNode: createNode,
tabbable: "nodes"
});
});
</script>
</head>

<body class="example">
<h1>Example: keyboard navigation</h1>
<!-- Start_Exclude: This block is not part of the sample code -->
<div class="description">
This example demonstrates the navigation inside and outside of the tree with TAB and arrow keys.<br/>
There are three trees with different values of tabbable option.<br/>
NOTE: The example is experimental: backspace, spacebar and arrow keys don't work correctly in input fields for now.
</div>
<div>
<label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<hr>
<!-- End_Exclude -->

<div>
<label>Fake input:<input id="input1"/></label>
</div>
<br/>

<div>
<label>Tree with 'tabbable = true':</label>
<div id="tree1"></div>
</div>
<br/>

<div>
<label>Fake input:<input id="input2"/></label>
</div>
<br/>

<div>
<label>Tree with 'tabbable = false':</label>
<div id="tree2"></div>
</div>
<br/>

<div>
<label>Fake input:<input id="input3"/></label>
</div>
<br/>

<div>
<label>Tree with 'tabbable = "nodes"' (it's a new experimental feature):</label>
<div id="tree3"></div>
</div>
<br/>

<div>
<label>Fake input:<input id="input4"/></label>
</div>

<!-- Start_Exclude: This block is not part of the sample code -->
<p id="sampleButtons">
</p>
<hr>
<p class="sample-links no_code">
<a class="hideInsideFS" href="https://github.com/mar10/fancytree/">Fancytree project home</a>
<a class="hideOutsideFS" href="#">Link to this page</a>
<a class="hideInsideFS" href="index.html">Example Browser</a>
<a href="#" id="codeExample">View source code</a>
</p>
<pre id="sourceCode" class="prettyprint" style="display:none"></pre>
<!-- End_Exclude -->
</body>
</html>