jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Updated the page timeline_examples.html

gh-pages
jos 9 years ago
parent
6e5d3f0226
commit
fd80837b94
5 changed files with 99 additions and 406 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +17
    -1
      css/examples.css
  2. +0
    -100
      examples/timeline/12_custom_styling.html
  3. +5
    -1
      index.html
  4. +22
    -28
      network_examples.html
  5. +55
    -276
      timeline_examples.html

+ 17
- 1
css/examples.css View File

@ -58,4 +58,20 @@ div.exampleTitle {
line-height: 30px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
}
a.exampleLink:before {
content:'';
display:inline-block;
margin-left:15px;
width: 15px;
height: 10px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #688fba;
}
a.exampleLink {
display:block;
text-decoration: underline;
}

+ 0
- 100
examples/timeline/12_custom_styling.html View File

@ -1,100 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Custom styling</title>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font-family: purisa, 'comic sans', cursive;
}
.vis-timeline {
border: 2px solid purple;
font-family: purisa, 'comic sans', cursive;
font-size: 12pt;
background: #ffecea;
}
.vis-item {
border-color: #F991A3;
background-color: pink;
font-size: 15pt;
color: purple;
box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
}
.vis-item,
.vis-item.vis-line {
border-width: 3px;
}
.vis-item.vis-dot {
border-width: 10px;
border-radius: 10px;
}
.vis-item.vis-selected {
border-color: green;
background-color: lightgreen;
}
.vis-time-axis .vis-text {
color: purple;
padding-top: 10px;
padding-left: 10px;
}
.vis-time-axis .vis-text.vis-major {
font-weight: bold;
}
.vis-time-axis .vis-grid.vis-minor {
border-width: 2px;
border-color: pink;
}
.vis-time-axis .vis-grid.vis-major {
border-width: 2px;
border-color: #F991A3;
}
</style>
<script src="../googleAnalytics.js"></script>
</head>
<body>
<p>
The style of the Timeline can be fully customized via CSS:
</p>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
// note that months are zero-based in the JavaScript Date object
var items = new vis.DataSet([
{start: new Date(2010,7,23), content: '<div>Conversation</div><img src="img/community-users-icon.png" style="width:32px; height:32px;">'},
{start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'},
{start: new Date(2010,7,24,16,0,0), content: 'Report'},
{start: new Date(2010,7,26), end: new Date(2010,8,2), content: 'Traject A'},
{start: new Date(2010,7,28), content: '<div>Memo</div><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'},
{start: new Date(2010,7,29), content: '<div>Phone call</div><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'},
{start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'},
{start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">'}
]);
var options = {
editable: true,
margin: {
item: 20,
axis: 40
}
};
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 5
- 1
index.html View File

@ -1,5 +1,9 @@
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html lang="en"><head>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

+ 22
- 28
network_examples.html View File

@ -22,23 +22,6 @@
<link href="./dist/vis.css" rel="stylesheet" type="text/css" />
<link href="./css/examples.css" rel="stylesheet" type="text/css" />
<style>
a.exampleLink:before {
content:'';
display:inline-block;
margin-left:15px;
width: 15px;
height: 10px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #688fba;
}
a.exampleLink {
display:block;
text-decoration: underline;
}
</style>
</head>
<body onload="prettyPrint(); loadVis();">
@ -76,10 +59,13 @@
<div class="contentWrapper">
<h1>Network Examples</h1>
We have seperated the examples into groups to make it easier to navigate them. For the documentation, please click the button below: <br><br>
<a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a>
This page contains examples which show how to use Network. For the documentation, please click the button below: <br><br>
<a class="btn btn-primary" href="./docs/network" role="button">View docs »</a>
<h3>basic usage</h3>
<a class='exampleLink' href="examples/network/basic_usage.html">basic usage</a>
<h3>node styles</h3>
<h3>node styles</h3>
<a class='exampleLink' href="examples/network/nodeStyles/colors.html">colors</a>
<a class='exampleLink' href="examples/network/nodeStyles/groups.html">groups</a>
<a class='exampleLink' href="examples/network/nodeStyles/customGroups.html">custom groups</a>
@ -89,43 +75,51 @@
<a class='exampleLink' href="examples/network/nodeStyles/circular_images.html">circular images</a>
<a class='exampleLink' href="examples/network/nodeStyles/shadows.html">node shadows</a>
<a class='exampleLink' href="examples/network/nodeStyles/shapes.html">node shapes</a>
<h3>edge styles</h3>
<h3>edge styles</h3>
<a class='exampleLink' href="examples/network/edgeStyles/arrows.html">arrows (also combined with dashes)</a>
<a class='exampleLink' href="examples/network/edgeStyles/colors.html">different colors</a>
<a class='exampleLink' href="examples/network/edgeStyles/dashes.html">dashes</a>
<a class='exampleLink' href="examples/network/edgeStyles/smooth.html">smooth curves</a>
<a class='exampleLink' href="examples/network/edgeStyles/smoothWorldCup.html">smooth curves in action</a>
<h3>labels</h3>
<h3>labels</h3>
<a class='exampleLink' href="examples/network/labels/label_alignment.html">label alignment (for edges only)</a>
<a class='exampleLink' href="examples/network/labels/label_background.html">label background</a>
<a class='exampleLink' href="examples/network/labels/label_color_and_size.html">colors and sizes</a>
<a class='exampleLink' href="examples/network/labels/label_stroke.html">label stroke</a>
<a class='exampleLink' href="examples/network/labels/multiline_text.html">multiline text</a>
<h3>layout</h3>
<h3>layout</h3>
<a class='exampleLink' href="examples/network/layout/hierarchical_layout.html">hierarchical layout</a>
<a class='exampleLink' href="examples/network/layout/hierarchical_layout_methods.html">hierarchical layout - different methods</a>
<a class='exampleLink' href="examples/network/layout/hierarchical_layout_userdefined.html">hierarchical layout - user defined</a>
<a class='exampleLink' href="examples/network/layout/randomSeed.html">set the random seed so every network will be the same</a>
<h3>events</h3>
<h3>events</h3>
<a class='exampleLink' href="examples/network/events/interactionEvents.html">interaction events, click, rightclick, drag etc.</a>
<a class='exampleLink' href="examples/network/events/physicsEvents.html">physics events, stabilization etc.</a>
<a class='exampleLink' href="examples/network/events/renderEvents.html">rendering events, use to draw custom items on the canvas.</a>
<h3>dynamic data</h3>
<h3>dynamic data</h3>
<a class='exampleLink' href="examples/network/data/datasets.html">dataset for dynamic data</a>
<a class='exampleLink' href="examples/network/data/dynamic_data.html">dynamic data, playground</a>
<a class='exampleLink' href="examples/network/data/importing_from_gephi.html">importing data from gephi</a>
<a class='exampleLink' href="examples/network/data/scaling_custom.html">scaling the nodes with the value.</a>
<a class='exampleLink' href="examples/network/data/scaling_nodes_edges.html">scaling the nodes and edges with the value.</a>
<a class='exampleLink' href="examples/network/data/scaling_nodes_edges_labels.html">scaling the nodes, edges and labels with the value.</a>
<h3>physics</h3>
<h3>physics</h3>
<a class='exampleLink' href="examples/network/physics/physicsConfiguration.html">physics configuration</a>
<h3>example applications</h3>
<h3>example applications</h3>
<a class='exampleLink' href="examples/network/exampleApplications/les_miserables.html">les miserables cast</a>
<a class='exampleLink' href="examples/network/exampleApplications/loadingBar.html">loading bar during stabilization</a>
<a class='exampleLink' href="examples/network/exampleApplications/neighbourhood_highlight.html">neighbourhood heighlight</a>
<a class='exampleLink' href="examples/network/exampleApplications/nodeLegend.html">using nodes as a legend</a>
<a class='exampleLink' href="examples/network/exampleApplications/worldCupPerformance.html">performance test with the worldcup data</a>
<h3>other</h3>
<h3>other</h3>
<a class='exampleLink' href="examples/network/other/animationShowcase.html">animation showcase</a>
<a class='exampleLink' href="examples/network/other/clustering.html">clustering possibilities</a>
<a class='exampleLink' href="examples/network/other/clusteringByZoom.html">clustering by zoom</a>

+ 55
- 276
timeline_examples.html View File

@ -4,7 +4,6 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timeline Examples</title>
<link rel="icon" HREF="favicon.ico">
<!-- Bootstrap -->
@ -17,42 +16,12 @@
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="./css/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/prettify/prettify.js"></script>
<script src="./dist/vis.js"></script>
<link href="./dist/vis.css" rel="stylesheet" type="text/css" />
<link href="./css/examples.css" rel="stylesheet" type="text/css" />
<style>
img.example {
height:150px;
}
</style>
<script language="JavaScript">
function loadVis() {
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-20'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
]);
// Configuration for the Timeline
var options = {height:'552px', clickToUse:true};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
}
</script>
</head>
<body onload="prettyPrint(); loadVis();">
@ -87,258 +56,68 @@
</div>
</div>
<div class="contentWrapper">
<h1>Timeline Examples</h1>
<a class="btn btn-default" href="#allExamples" role="button">View all examples »</a> <a class="btn btn-primary" href="./docs/timeline.html" role="button">View docs »</a>
<div class="textHTMLContent">This small code example shows the easiest way to get a timline up and running. This code has been taken from example 1. The working example is shown next to it. Click it to start the interaction.</div>
<pre class="prettyprint lang-html">
&lt;div id="visualization"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-20'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16'}
{id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27'}
]);
// Configuration for the Timeline
var options = {};
// Create a Timeline
var timeline = new vis.Timeline(
container,
items,
options
);
&lt;/script&gt;</pre>
<div id="visualization"></div>
<div class="contentWrapper">
<h1>Timeline Examples</h1>
This page contains examples which show how to use Timeline. For the documentation, please click the button below: <br><br>
<a class="btn btn-primary" href="./docs/timeline" role="button">View docs »</a>
<h3>basic_usage</h3>
<a class='exampleLink' href="examples/timeline/basicUsage.html">basic usage</a>
<h3>interaction</h3>
<a class='exampleLink' href="examples/timeline/interaction/animateWindow.html">animate window</a>
<a class='exampleLink' href="examples/timeline/interaction/clickToUse.html">click to use</a>
<a class='exampleLink' href="examples/timeline/interaction/eventListeners.html">event listeners</a>
<a class='exampleLink' href="examples/timeline/interaction/limitMoveAndZoom.html">limit move and zoom of the window</a>
<a class='exampleLink' href="examples/timeline/interaction/navigationMenu.html">navigation menu</a>
<a class='exampleLink' href="examples/timeline/interaction/setSelection.html">set selection</a>
<h3>editing</h3>
<a class='exampleLink' href="examples/timeline/editing/customSnappingOfItems.html">custom snapping of items</a>
<a class='exampleLink' href="examples/timeline/editing/editingItems.html">editing items</a>
<a class='exampleLink' href="examples/timeline/editing/editingItemsCallbacks.html">editing items, manipulate using callbacks</a>
<a class='exampleLink' href="examples/timeline/editing/updateDataOnEvent.html">update data on event</a>
<h3>items</h3>
<a class='exampleLink' href="examples/timeline/items/htmlContents.html">HTML contents</a>
<a class='exampleLink' href="examples/timeline/items/pointItems.html">point items</a>
<a class='exampleLink' href="examples/timeline/items/backgroundAreas.html">background areas</a>
<a class='exampleLink' href="examples/timeline/items/backgroundAreasWithGroups.html">background areas with groups</a>
<a class='exampleLink' href="examples/timeline/items/itemOrdering.html">item ordering</a>
<a class='exampleLink' href="examples/timeline/items/rangeOverflowItem.html">range overflow item</a>
<h3>groups</h3>
<a class='exampleLink' href="examples/timeline/groups/groups.html">groups</a>
<a class='exampleLink' href="examples/timeline/groups/groupsOrdering.html">ordering of groups</a>
<a class='exampleLink' href="examples/timeline/groups/subgroups.html">subgroups</a>
<h3>styling</h3>
<a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a>
<a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a>
<a class='exampleLink' href="examples/timeline/styling/axisOrientation.html">axis orientation</a>
<a class='exampleLink' href="examples/timeline/styling/customCss.html">custom CSS</a>
<a class='exampleLink' href="examples/timeline/styling/gridStyling.html">grid styling</a>
<h3>data handling</h3>
<a class='exampleLink' href="examples/timeline/dataHandling/dataSerialization.html">data serialization</a>
<a class='exampleLink' href="examples/timeline/dataHandling/loadExternalData.html">load external data</a>
<h3>other</h3>
<a class='exampleLink' href="examples/timeline/other/customTimeBars.html">custom time bars</a>
<a class='exampleLink' href="examples/timeline/other/dataAttributes.html">data attributes</a>
<a class='exampleLink' href="examples/timeline/other/dataAttributesAll.html">all data attributes</a>
<a class='exampleLink' href="examples/timeline/other/groupsPerformance.html">perforance of groups</a>
<a class='exampleLink' href="examples/timeline/other/hidingPeriods.html">hiding periods</a>
<a class='exampleLink' href="examples/timeline/other/localization.html">localization</a>
<a class='exampleLink' href="examples/timeline/other/performance.html">performance</a>
<h2 id="allExamples">All examples</h2>
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/01_basic.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/1.png">
<div class="exampleTitle">basic usage</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/02_interactive.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/2.png">
<div class="exampleTitle">interactive</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/03_performance.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/3.png">
<div class="exampleTitle">performance</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/04_html_data.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/4.png">
<div class="exampleTitle">html data</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/05_groups.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/5.png">
<div class="exampleTitle">groups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/06_event_listeners.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/6.png">
<div class="exampleTitle">event listeners</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/07_custom_time_bar.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/7.png">
<div class="exampleTitle">custom time bar</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/08_edit_items.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/8.png">
<div class="exampleTitle">edit items</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/09_order_groups.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/9.png">
<div class="exampleTitle">order groups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/10_limit_move_and_zoom.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/10.png">
<div class="exampleTitle">limit move and zoom</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/11_points.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/11.png">
<div class="exampleTitle">points</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/12_custom_styling.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/12.png">
<div class="exampleTitle">custom styling</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/13_past_and_future.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/13.png">
<div class="exampleTitle">past and future</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/14_group_performance.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/14.png">
<div class="exampleTitle">group performance</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/15_item_class_names.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/15.png">
<div class="exampleTitle">item class names</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/16_navigation_menu.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/16.png">
<div class="exampleTitle">navigation menu</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/17_data_serialization.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/17.png">
<div class="exampleTitle">data serialization</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/18_range_overflow.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/18.png">
<div class="exampleTitle">range overflow</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/19_localization.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/19.png">
<div class="exampleTitle">localization</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/20_click_to_use.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/20.png">
<div class="exampleTitle">click to use</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/21_set_selection.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/21.png">
<div class="exampleTitle">set selection</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/22_window_adjustment.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/22.png">
<div class="exampleTitle">window adjustment</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/23_data_attributes.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/23.png">
<div class="exampleTitle">data attributes</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/24_all_data_attributes.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/24.png">
<div class="exampleTitle">all data attributes</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/25_background_areas.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/25.png">
<div class="exampleTitle">background areas</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/26_external_data.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/26.png">
<div class="exampleTitle">external data</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/27_templates.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/27.png">
<div class="exampleTitle">templates</div>
</a>
</div>
<!--there is no example 28?-->
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/29_hiding_times.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/29.png">
<div class="exampleTitle">hiding times</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/30_subgroups.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/30.png">
<div class="exampleTitle">subgroups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/31_background_areas_with_groups.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/31.png">
<div class="exampleTitle">background areas with groups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/32_grid_styling.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/32.png">
<div class="exampleTitle">grid styling</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/33_custom_snapping.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/33.png">
<div class="exampleTitle">custom snapping</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/34_add_custom_timebar.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/34.png">
<div class="exampleTitle">add custom timebar</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/35_item_ordering.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/35.png">
<div class="exampleTitle">item ordering</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/requirejs/requirejs_example.html">
<img class="example img-responsive" src="./images/exampleScreenshots/timeline/requirejs.png">
<div class="exampleTitle">requirejs example</div>
</a>
</div>
</div>
<br />
<br />
<br />
<br />
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Write Preview
Loading…
Cancel
Save