English description | Описание на русском
Lightweight and usable plugin for timeline management.
- Any number of time cells at one page.
- Drag and drop
Demo page.
1. Load jQuery library
<script src="/path/to/jquery.min.js"></script>2. Load TimeSlider plugin's stylesheet and JavaScript
<link href="css/timeslider.css" rel="stylesheet">
<script src="js/timeslider.js"></script>3. Create an empty DIV element that will be served as the container for the plugin
<div id="ts" class="time-slider"></div>4. Initialize the plugin and we're ready to go.
$('#ts').TimeSlider();| Option | Default | Type | Description |
|---|---|---|---|
| start_timestamp | Current local time | Integer | Left border from which starts the ruler. Timestamp in milliseconds since January 1 1970. |
| current_timestamp | Current local time | Integer | Current time. Timestamp in milliseconds. Red vertical line. |
| hours_per_ruler | 24 | Float | Length of the ruler in hours. Min is 1, Max is 48. |
| graduation_step | 20 | Integer | Minimum pixels between graduations on the ruler. It can vary from 20 to 39. Calculated independently. |
| distance_between_gtitle | 80 | Integer | Minimum pixels between titles of graduations. |
| update_timestamp_interval | 1000 | Integer | Interval through which will update the current time. In milliseconds. |
| update_interval | 1000 | Integer | Interval through which will updates the graphical elements. In milliseconds. |
| show_ms | false | Boolean | Whether to show the milliseconds? |
| init_cells | null | Array|Function | Add time cells on initial. Can be list of time cells or a function with plugin context. |
| ruler_enable_move | true | Boolean | Enabling on move the ruler from UI. |
| timecell_enable_move | true | Boolean | Enabling on move time cells from UI. |
| timecell_enable_resize | true | Boolean | Enabling on resizing time cells from UI. |
| on_add_timecell_callback | null | Function | Callback. Is called after add time cell. Callback has 3 parameters: id (id of time cell), start (the start point of time cell), stop (the end point of time cell, can be not set if time cell is not finished). |
| on_toggle_timecell_callback | null | Function | |
| on_remove_timecell_callback | null | Function | |
| on_remove_all_timecells_callback | null | Function | |
| on_dblclick_timecell_callback | null | Function | |
| on_move_timecell_callback | null | Function | |
| on_resize_timecell_callback | null | Function | |
| on_change_timecell_callback | null | Function | |
| on_dblclick_ruler_callback | null | Function | |
| on_move_ruler_callback | null | Function | |
| on_change_ruler_callback | null | Function |
- PayPal: https://www.paypal.me/vishnevskiy
- Yandex.Money: https://money.yandex.ru/to/410011466316463