Download the PHP package vsilva472/jquery-timeline without Composer
On this page you can find all versions of the php package vsilva472/jquery-timeline. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download vsilva472/jquery-timeline
More information about vsilva472/jquery-timeline
Files in vsilva472/jquery-timeline
Package jquery-timeline
Short Description A simple and customizable jquery plugin to create responsive timelines
License MIT
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package jquery-timeline
jQuery Timeline
A dead simple jQuery plugin to create responsives timelines with only ~3kb. You can find some online samples of usage here.
Content
- Browser Support
- installation
- Git
- NPM
- Composer
- CDN
- Default Options
- Usage
- Via data-attributes
- Via css classes
- Mixed Selectors
- Using a custom transformer
- Events
- Advanced usage
- Display a loading
- Customizing appearance
- Animations
- Fetching from Laravel
- Google Analytics Integration
- Google TagManager Integration
- Donate
Browser Support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 10+ ✔ | Last ✔ | Last ✔ | Last ✔ | Last ✔ |
installation
Git installation
git clone [email protected]:vsilva472/jquery-timeline.git (SSH) ou
git clone https://github.com/vsilva472/jquery-timeline.git (HTTPS)
NPM installation
npm i @vsilva472/jquery-timeline --save
Composer installation
composer require vsilva472/jquery-timeline
CDN installation
https://www.jsdelivr.com/package/npm/@vsilva472/jquery-timeline
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vsilva472/jquery-timeline@1/dist/jquery.timeline.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@vsilva472/jquery-timeline@1/dist/jquery.timeline.min.js"></script>
Default options
| Attribute | Type | Default | Description |
|---|---|---|---|
| container | String | '[data-timeline]' |
The HTML element to render the timeline |
| apiUrl | String | null |
The url to fetch timeline data |
| allowRawContent | bool | false |
Tell to plugin if it should use .html() or .text() to prevent XSS |
| transformer | callback | function (data) { return data; } |
The transformer to transform the data comming from ajax request |
Note: You can set allowRawContent via data-attribute from the container element just adding the attribute data-timeline-allow-raw-content to the element container.
Usage
Using with default data selectors
Note You should call $('selector').timeline(options) only if you are using jQuery timeline without data-attributes
Using with css class selectors
Using with mixed selectors
The sample above is equivalent to the following configuration
Using a custom transformer
By default jQuery Timeline expect that data received from the ajax request has the following structure:
But each api has your own logic and return your own format, fortunately jQuery Timeline has a method to transform your data before render the content. In this cases you should provide your own transformer witch will adapt the data to the structure described above.
Inside /samples folder you can find a sample that describes this scenario.
Events
jQuery Timeline has a powerful events API that make it extensible and flexible to be integrated with any html page or framework that has jQuery installed.
| Event | Description | Arguments |
|---|---|---|
timeline.start |
Triggered right before initialization | {} |
timeline.ajax.before |
Triggered before the ajax call | {} |
timeline.ajax.fail |
Triggered when ajax fail and receive | { jqXHR: jqXHR, textStatus: textStatus, errorThrown: errorThrown } |
timeline.ajax.complete |
Triggered when ajax is completed (success or fail) | {} |
timeline.before.generate |
Triggered before build HTML structure and before append it to DOM | {} |
timeline.after.generate |
Triggered after build HTML structure and after append it to DOM | {} |
Advanced Usage
See bellow some jQuery Timeline advanced usage samples
Display a loading
Animations
jQuery Timeline applies the css class .timeline-item to each item of the timeline. This open the opportunity of to do some animations on these items with jQuery and/or CSS.
Customizing appearance
If you want to customize the elements of the timeline you should overwrite some css values in the following css classes.
Fetching from Laravel
In some frameworks like Laravel is a common practice the usage of a CSRF-TOKEN for security reasons. This sample shows you how to add X-CSRF-TOKEN before plugin make the request
Google Analytics Integration
Maybe could be interesting to BI team extract some timeline usage informations. The following sample show how you can use jQuery Timeline event's api to send some events to Google Analytics
Google TagManager Integration
The bellow sample ilustrates the situation above but using Google TagManager.
Donate
Support this project donating some HTMLCOIN
Wallet: HqgaiK6T1o2JP4p3p34CZp2g3XnSsSdCXp
Licença
MIT
