jQuery timeline control with support for stacking events.
107 |
125 | $('.eventcontrol').EventControl({
126 | oncreate: function(item, element) {
127 | // Called when creating the item.
128 | // Can set attributes on the element here,
129 | // for example:
130 | element.css('color', 'red');
131 | },
132 | onhover: function(item, element, event, inout) {
133 | // Called when mouse hovers over an item
134 | // inout is 'in' when entering, and 'out' when exiting.
135 | },
136 | onclick: function(item, element, event) {
137 | // Called when an item is left-clicked.
138 | },
139 | data: [], // An array of objects with a timestamp key.
140 | hammertime: true, // Enable use of hammer.js to support touch devices
141 | items_height: 101, // height in px of item/event area
142 | markers_height: 31, // height in px of markers area
143 | displayUTC: false, // Show timestamps as UTC, else local time
144 | });
145 |
146 | Once created, the EventControl object can be accessed as demonstrated 147 | below. Right now, there is no support for updating the dataset, I plan 148 | to add this later. 149 |
150 |
151 | var state = $('.eventcontrol').EventControl(); // save state
152 | $('.eventcontrol').EventControl(state); // restore state
153 | // zoom in / out: focus is (0 - 1), optional, default is 0.5
154 | $('.eventcontrol').EventControl('zoom-in', focus);
155 | $('.eventcontrol').EventControl('zoom-out', focus);
156 |
157 | The library can optionally use hammer.js to support basic 158 | touch controls. Supporting pinch to zoom interferes with all kinds of 159 | functionality, so you'll probably want to hook up zoom in/out to 160 | separate controls. 161 |
162 |