tag:blogger.com,1999:blog-7578287429492178802024-02-19T05:39:34.439+01:00jQuery timeline pluginAndrew Malkovhttp://www.blogger.com/profile/04613555731962934729noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-757828742949217880.post-17621795713539083142012-03-19T23:31:00.000+01:002012-03-19T23:37:35.574+01:00jQuery timeline plugin configurationThere are several configuration parameters that you can use for jQuery timeline plugin.<br />
<br />
For apply the plugin you should write the next code:<br />
<br />
<pre class="brush:javascript">$(document).ready(function () {
$("#timeline").timeline(settings);
}
</pre>
<br />
Where the <i>settings</i> is a set of key/value pairs that configure the plugin. All settings instead of <i>timelineDataUrl</i> are optional.
<br />
<br />
<b>timelineDataUrl</b><br />
The string containing the URL to which the ajax request will be sent. The plugin expects to receive a json object (with the data about events) as a response from this URL.<br />
<br />
<b>eventDateFormat</b><br />
<span style="font-size: x-small;"><span style="color: #666666;">Default:</span> 'dd.MM.yyyy HH:mm'
</span><br />
The format string that determines how the plugin will show the dates for the events.<br />
<br />
<b>language</b><br />
<span style="font-size: x-small;"><span style="color: #666666;">Default:</span> 'en'
</span><br />
The language that will be used to show the months names. The plugin supports 'en' (English), 'ko' (Korean), 'ru' (Russian) by default, and can be extended to support any language.<br />
<br />
<b>showLegend</b><br />
<span style="font-size: x-small;"><span style="color: #666666;">Default:</span> false
</span><br />
The value determines will the plugin show the legend block or not.<br />
<br />
<b>legendHeader</b><br />
<span style="font-size: x-small;"><span style="color: #666666;">Default:</span> 'Legend'
</span><br />
The string that will be shown as header for the legend block.<br />
<br />
<b>legendBusyDescription</b><br />
<span style="font-size: x-small;"><span style="color: #666666;">Default:</span> 'Time is occupied'
</span><br />
The string that will be shown as a description for the event item in the legend block.<br />
<br />
<b>getTooltipHtml(event)</b><br />
<span style="font-size: x-small;"><span style="color: #666666;">Default:</span> function (event) { return event.name + '<br/>' + event.startDate + ' - ' + event.finishDate; }</span><br />
The function that will be used to get the html code that will be shown in the event tooltip.<br />
<br />Andrew Malkovhttp://www.blogger.com/profile/04613555731962934729noreply@blogger.com1Leuven, Belgium50.877571 4.70432850.797419500000004 4.5463995000000006 50.9577225 4.8622565tag:blogger.com,1999:blog-757828742949217880.post-76172779119021397802012-03-05T22:11:00.001+01:002012-03-19T23:40:07.022+01:00jQuery timeline plugin sections<b>jQuery Timeline plugin sections</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhqy_nF1FQxFQfr0LPg9KBST9ZR3Ozl0M653AEysjvKylDds6QK1FxJAI6uLKI7FBBy7-5XBt2yyC-rDGeWho-YFeWQ9cw0cnpQew7_AKHNeaY5zqHM-sEL37DGphTcpsgH_2MIZ0Cg/s1600/timeline_sections.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="117" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhqy_nF1FQxFQfr0LPg9KBST9ZR3Ozl0M653AEysjvKylDds6QK1FxJAI6uLKI7FBBy7-5XBt2yyC-rDGeWho-YFeWQ9cw0cnpQew7_AKHNeaY5zqHM-sEL37DGphTcpsgH_2MIZ0Cg/s400/timeline_sections.png" width="400" /></a></div>
<br />
Timeline contains three main sections:<br />
<br />
<ul>
<li>Header section</li>
<li>Bands section</li>
<li>Legend section</li>
</ul>
<div>
<b><br /></b><br />
<b><br /></b></div>
<div>
<b>Header section</b></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFkFKbX1iokttKtLSgPXX2jdo5evANnokbL43ftwkxc1p2KPoYPzeKVddxgWouCJ6SlqYRvWqR2P46zyX4UI2w_gGiLUm9YLynI3UwhH-YHKyYO6uIvSwTQcOF9SF0d7IYSI4JTF9lbA/s1600/timeline-header-section.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFkFKbX1iokttKtLSgPXX2jdo5evANnokbL43ftwkxc1p2KPoYPzeKVddxgWouCJ6SlqYRvWqR2P46zyX4UI2w_gGiLUm9YLynI3UwhH-YHKyYO6uIvSwTQcOF9SF0d7IYSI4JTF9lbA/s400/timeline-header-section.png" width="400" /></a></div>
<div>
<br /></div>
<div>
Header section contains <b>months </b>and <b>weeks </b>headers.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<b>Bands section</b></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjADYmJbm_q35BGNEjrbhx1EVHh8v4DQA2QtvnvP9pEB3D7msjP_HstrwZ-hBIOHJ-WBy_8xCX-TloIey1gvlNgm78BXcb_RbAPCgAM0jnKdvVibQpD34qDHkgBYD3jBKXLpnKrGAdHOw/s1600/timeline-bands-section.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="95" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjADYmJbm_q35BGNEjrbhx1EVHh8v4DQA2QtvnvP9pEB3D7msjP_HstrwZ-hBIOHJ-WBy_8xCX-TloIey1gvlNgm78BXcb_RbAPCgAM0jnKdvVibQpD34qDHkgBYD3jBKXLpnKrGAdHOw/s400/timeline-bands-section.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Bands section contains rows - bands. Each band has name and events. Each event contains name and tooltip.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<b>Legend section</b></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKU_qkETpzm2YPWOaJFdna_yEU_ccgloJ7wfq8tfyKspN3qE3IDjdcQTv4fR2EbjnNwDtfU7XCp2sgNdYC81CNJZOoQIoSqRwGMe7x311VMFONqOqrrIaw27h1ChZM4vKsG84HQwQXpg/s1600/timeline-legend-section.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="28" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKU_qkETpzm2YPWOaJFdna_yEU_ccgloJ7wfq8tfyKspN3qE3IDjdcQTv4fR2EbjnNwDtfU7XCp2sgNdYC81CNJZOoQIoSqRwGMe7x311VMFONqOqrrIaw27h1ChZM4vKsG84HQwQXpg/s400/timeline-legend-section.png" width="400" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Legend section contains description for the timeline.<br />
<br />
Read the next post: <a href="http://jquery-timeline.blogspot.com/2012/03/jquery-timeline-plugin-configuration.html">Configuration of the jQuery timeline plugin</a></div>Andrew Malkovhttp://www.blogger.com/profile/04613555731962934729noreply@blogger.com1Leuven, Belgium50.877571 4.70432850.797419500000004 4.5463995000000006 50.9577225 4.8622565tag:blogger.com,1999:blog-757828742949217880.post-44114253561708361832012-03-04T15:48:00.000+01:002012-03-19T23:34:53.676+01:00jQuery timeline plugin has been released<br />
<b>jQuery.timeline()</b> is a plugin for jQuery which allows you to show your events in a timeline (aka time-board).<br />
<br />
Example of the output result of the timeline plugin:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2zIhWqvZicBQmzQbpB5kY6GjpGGcpJekbAS7JtFfmnRS-TJ_A7O4kAqyFjUFQnZnHXN7jy311RV_PcuYr43z9IIfM5dzkUjRRepMY6sHuW5Czd9Z-ZP-uXkq5iwgAQ3LWWpNIEA82vw/s1600/timeline.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2zIhWqvZicBQmzQbpB5kY6GjpGGcpJekbAS7JtFfmnRS-TJ_A7O4kAqyFjUFQnZnHXN7jy311RV_PcuYr43z9IIfM5dzkUjRRepMY6sHuW5Czd9Z-ZP-uXkq5iwgAQ3LWWpNIEA82vw/s640/timeline.png" width="640" /></a></div>
<br />
You can find the source code at:<br />
<a href="https://github.com/anmalkov/jquery-timeline" target="_blank">https://github.com/anmalkov/jquery-timeline</a><br />
<br />
The documentation and examples how to use it, will be published soon.<br />
<br />
<b>Documentation:</b><br />
<br />
<ul>
<li><a href="http://jquery-timeline.blogspot.com/2012/03/jquery-timeline-plugin-sections.html" target="_blank">jQuery timeline plugin sections</a></li>
<li><a href="http://jquery-timeline.blogspot.com/2012/03/jquery-timeline-plugin-configuration.html">Configuration of the jQuery timeline plugin</a></li>
<li>Sending data back to jQuery timeline plugin (coming soon)</li>
</ul>Andrew Malkovhttp://www.blogger.com/profile/04613555731962934729noreply@blogger.com5Leuven, Belgium50.877571 4.70432850.797419500000004 4.5463995000000006 50.9577225 4.8622565