Giter Site home page Giter Site logo

703669046 / timeslider Goto Github PK

View Code? Open in Web Editor NEW

This project forked from v-v-vishnevskiy/timeslider

0.0 0.0 0.0 45 KB

TimeSlider Plugin for jQuery

Home Page: http://v-v-vishnevskiy.github.io/timeslider/demo/demo.html

License: MIT License

CSS 7.91% JavaScript 86.25% HTML 5.84%

timeslider's Introduction

TimeSlider Plugin for jQuery


English description | Описание на русском

Lightweight and usable plugin for timeline management.

Features

  • Any number of time cells at one page.
  • Drag and drop

Demo

Demo page.

Dependencies

Usage

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();

Settings

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

Donations

timeslider's People

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.