add Ox.TreeList demo
This commit is contained in:
parent
d7badfe326
commit
87b386e89e
2 changed files with 76 additions and 0 deletions
13
demos/list/index.html
Normal file
13
demos/list/index.html
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE HTML>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>ox.js list demo</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
|
||||||
|
<script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script>
|
||||||
|
<script type="text/javascript" src="../../build/js/ox.js"></script>
|
||||||
|
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
|
||||||
|
<script type="text/javascript" src="js/list.js"></script>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
</html>
|
63
demos/list/js/list.js
Normal file
63
demos/list/js/list.js
Normal file
|
@ -0,0 +1,63 @@
|
||||||
|
$(function() {
|
||||||
|
|
||||||
|
Ox.theme('modern');
|
||||||
|
|
||||||
|
var $treeList = new Ox.TreeList({
|
||||||
|
items: [
|
||||||
|
{id: 'D', title: 'D', items: [
|
||||||
|
{id: 'debord', title: 'Guy Debord', items: [
|
||||||
|
{id: 'in_girum', title: 'In girum imus nocte et consumimur igni'}
|
||||||
|
]}
|
||||||
|
]},
|
||||||
|
{id: 'G', title: 'G', expanded: true, items: [
|
||||||
|
{id: 'godard', title: 'Jean-Luc Godard', expanded: true, items: [
|
||||||
|
{id: 'allemagne_90', title: 'Allemagne 90 neuf zero'},
|
||||||
|
{id: 'film_socialisme', title: 'Film socialisme'}
|
||||||
|
]},
|
||||||
|
{id: 'grandrieux', title: 'Philippe Grandrieux', items: [
|
||||||
|
{id: 'sombre', title: 'Sombre'}
|
||||||
|
]}
|
||||||
|
]},
|
||||||
|
{id: 'H', title: 'H', items: [
|
||||||
|
{id: 'haynes', title: 'Todd Haynes', items: [
|
||||||
|
{id: 'far_from_heaven', title: 'Far From Heaven'},
|
||||||
|
{id: 'i_m_not_there', title: 'I\'m Not There'}
|
||||||
|
]}
|
||||||
|
]},
|
||||||
|
{id: 'L', title: 'L', items: [
|
||||||
|
{id: 'lynch', title: 'David Lynch', items: [
|
||||||
|
{id: 'inland_empire', title: 'Inland Empire'}
|
||||||
|
]}
|
||||||
|
]},
|
||||||
|
{id: 'S', title: 'S', items: [
|
||||||
|
{id: 'scorsese', title: 'Martin Scorsese', items: [
|
||||||
|
{id: 'casino', title: 'Casino'}
|
||||||
|
]}
|
||||||
|
]}
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
$debug = new Ox.Element('div'),
|
||||||
|
$button = new Ox.Button({
|
||||||
|
title: 'Debug'
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
click: function() {
|
||||||
|
$text.html(JSON.stringify($treeList.$element.options('items')))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.appendTo($debug),
|
||||||
|
$text = new Ox.Element('div').appendTo($debug),
|
||||||
|
$splitPanel = new Ox.SplitPanel({
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
element: $treeList,
|
||||||
|
size: 256
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: $debug
|
||||||
|
}
|
||||||
|
],
|
||||||
|
orientation: 'horizontal'
|
||||||
|
}).appendTo($('body'));
|
||||||
|
|
||||||
|
});
|
Loading…
Reference in a new issue