Added examples

cheton · cheton · commit 3756e903f149 · 2016-03-30T11:02:36.000+08:00
diff --git a/examples/bundle.js b/examples/bundle.js
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="chrome=1">
+<title>infinite-tree</title>
+<link rel="stylesheet" href="infinite-tree.css" />
+<style>
+.infinite-tree-content {
+    max-height: 400px;
+}
+</style>
+<meta name="viewport" content="width=device-width">
+<!--[if lt IE 9]>
+<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+<![endif]-->
+</head>
+<body>
+<h1>infinite-tree</h1>
+<p>A browser-ready tree library that can efficiently display a large tree with smooth scrolling.</p>
+<div id="tree"></div>
+<script src="bundle.js"></script>
+</body>
+</body>
+</html>
diff --git a/examples/index.js b/examples/index.js
@@ -0,0 +1,20 @@
+var InfiniteTree = require('../lib');
+
+var data = [];
+var source = '{"id":"<root>","label":"<root>","children":[{"id":"alpha","label":"Alpha"},{"id":"bravo","label":"Bravo","children":[{"id":"charlie","label":"Charlie","children":[{"id":"delta","label":"Delta","children":[{"id":"echo","label":"Echo"},{"id":"foxtrot","label":"Foxtrot"}]},{"id":"golf","label":"Golf"}]},{"id":"hotel","label":"Hotel","children":[{"id":"india","label":"India","children":[{"id":"juliet","label":"Juliet"}]}]},{"id":"kilo","label":"Kilo"}]}]}';
+
+for (var i = 0; i < 1000; ++i) {
+    data.push(JSON.parse(source.replace(/"(id|label)":"([^"]*)"/g, '"$1": "$2.' + i + '"')));
+}
+
+var tree = new InfiniteTree({
+    el: document.querySelector('#tree'),
+    data: data,
+    autoOpen: true
+});
+
+window.tree = tree;
+
+// API
+// node = tree.getNodeById();
+// tree.selectNode();
diff --git a/examples/infinite-tree.css b/examples/infinite-tree.css
@@ -0,0 +1,23 @@
+.infinite-tree-scroll {
+  overflow: auto;
+}
+.infinite-tree-content {
+  outline: 0;
+}
+.infinite-tree-content .tree-selected.tree-item,
+.infinite-tree-content .tree-selected.tree-item:hover {
+  background: #deecfd;
+  border: 1px solid #06c;
+}
+.infinite-tree-content .tree-item {
+  border: 1px solid transparent;
+  cursor: pointer;
+  user-select: none;
+}
+.infinite-tree-content .tree-item:hover {
+  background: #f2fdff;
+}
+.infinite-tree-no-data {
+  text-align: center;
+}
+
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -0,0 +1,29 @@
+/* eslint no-var: 0 */
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+    cache: true,
+    debug: true,
+    devtool: 'eval',
+    entry: path.resolve('index.js'),
+    output: {
+        path: path.join(__dirname),
+        filename: 'bundle.js'
+    },
+    module: {
+        loaders: [
+            {
+                test: /\.jsx?$/,
+                loader: 'babel',
+                exclude: /node_modules/,
+                query: {
+                    presets: ['es2015', 'stage-0']
+                }
+            }
+        ]
+    },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({ minimize: true })
+    ]
+};
