<td>If true, items can be dragged to another moment int time. See section <ahref="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
<td>If true, items can be dragged to another moment in time. See section <ahref="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
</tr>
</table>
@ -1044,7 +1044,7 @@ function (option, path) {
<td>template</td>
<td>function</td>
<td>none</td>
<td>A template function used to generate the contents of the items. The function is called by the Timeline with an items' data as the first argument and the item element as the second, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <ahref="#Templates">Templates</a> for a detailed explanation.</td>
<td>A template function used to generate the contents of the items. The function is called by the Timeline with an items' data as the first argument, the item element as the second argument and the edited data as the third argument, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <ahref="#Templates">Templates</a> for a detailed explanation.</td>
</tr>
<tr>
@ -1439,15 +1439,21 @@ document.getElementById('myTimeline').onclick = function (event) {
</tr>
<tr>
<td>zoomIn(percentage)</td>
<td>zoomIn(percentage [, options])</td>
<td>none</td>
<td>Zoom in the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged.
<td>Zoom in the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
<ul>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul>
</td>
</tr>
<tr>
<td>zoomOut(percentage)</td>
<td>zoomOut(percentage [, options])</td>
<td>none</td>
<td>Zoom out the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged.
<td>Zoom out the current visible window. The parameter <code>percentage</code> can be a <code>Number</code> and must be between 0 and 1. If the parameter value of <code>percentage</code> is null, the window will be left unchanged. Available options:
<ul>
<li><code>animation: boolean or {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
</ul>
</td>
</tr>
@ -1698,6 +1704,14 @@ var items = new vis.DataSet([
]);
</pre>
<p>
Individual manipulation actions (<code>updateTime</code>, <code>updateGroup</code> and <code>remove</code>) can also be set on individual items. If any of the item-level
actions are specified (and <code>overrideItems</code> is not <code>false</code>) then that takes precedence over the settings at the timeline level. Current behavior is
that if any of the item-level actions are not specified, those items get <code>undefined</code> value (rather than inheriting from the timeline level). This may change
in future major releases, and code that specifies all item level values will handle major release changes better. That is, instead of using
One can specify callback functions to validate changes made by the user. There are a number of callback functions for this purpose:
</p>
@ -1743,11 +1757,11 @@ var items = new vis.DataSet([
<h2id="Templates">Templates</h2>
<p>
Timeline supports templates to format item contents. Any template engine (such as <ahref="http://handlebarsjs.com/">handlebars</a> or <ahref="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as argument, and outputs formatted HTML:
Timeline supports templates to format item contents. Any template engine (such as <ahref="http://handlebarsjs.com/">handlebars</a> or <ahref="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an item's data as the first argument, the item element as the second argument and the edited data as the third argument, and outputs formatted HTML:
</p>
<preclass="prettyprint lang-js">var options = {
template: function (item) {
template: function (item, element, data) {
var html = ... // generate HTML markup for this item
return html;
}
@ -1759,8 +1773,11 @@ var items = new vis.DataSet([
Yotam Berkowitz
7 years ago