Newer
Older
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example jQuery Timeline</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 4.0.0-alpha.6 -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery Timeline -->
<link href="./css/timeline.min.css?ver=1.0.0" rel="stylesheet">
<!-- HTML5 ShimとRespond.js IE8のHTML5要素とメディアクエリのサポート -->
<!-- 警告：Respond.jsは、file:// 経由でページを表示しても機能しません -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<nav class="content-header">
<ol class="breadcrumb">
<li class="breadcrumb-item active"><a href="./index.html"><i class="fa fa-plug"></i> jQuery Timeline</a></li>
</ol>
</nav>
<!-- /.content-header -->
<section class="row">
<div class="content-main col-lg-12">
<div id="myTimeline">
<ul class="timeline-events">
<li>Not allowed event definition</li>
<li data-timeline-node="{ start:'2017-05-26 10:00',end:'2017-05-26 13:00',content:'text text text text ...' }">Event Label</li>
<li data-timeline-node="{ start:'2017-05-26 23:10',content:'<p>In this way, you can include <em>HTML tags</em> in the event body.<br>:<br>:</p>' }">Event with undefined of end date</li>
<li data-timeline-node="{ start:'2017-05-26 12:45',end:'2017-05-26 13:45',row:2,bgColor:'#89c997',color:'#ffffff',callback:'$(\'#myModal\').modal()',content:'Show modal window via bootstrap' }">Event having callback</li>
<li data-timeline-node="{ start:'2017-05-26 16:08',end:'2017-05-26 17:54',row:3,bgColor:'#a1d8e6',color:'#008db7',extend:{toggle:'popover',placement:'bottom',content:'Show popover via bootstrap'} }">Event having custom colored</li>
<li data-timeline-node="{ start:'2017-05-25 23:00',end:'2017-05-26 04:15',row:3,extend:{'post_id':13,'permalink':'https://www.google.com/'} }">Event having extended params</li>
<li data-timeline-node="{ end:'2017-05-25 09:00',row:4,bgColor:'#e6eb94',margin:6 }">Event with undefined of start date</li>
<li data-timeline-node="{ start:'2017-05-27 17:15',row:4,bdColor:'#942343',image:'./dist/img/sample.bmp' }">Event having image for point type</li>
<li data-timeline-node="{ start:'2017-05-24 20:21',end:'2017-05-26 0:12',row:5 }">Long event from the past over range</li>
<li data-timeline-node="{ start:'2017-05-26 23:50',end:'2017-05-28 1:23',row:6,bgColor:'#fbdac8' }">Long event until the future over range</li>
</ul>
</div>
</div>
<!-- /.content-main -->
<div class="col-lg-6 col-md-12" hidden>
<div class="card mb-3">
<div class"card-block">
<h5><i class="fa fa-cog"></i> Timeline Configuration</h5>
<div class="card-text">
</div>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="card-block timeline-event-view">
<p class="h1">Timeline Event Detail</p>
<p class="lead">Please click on any event on the above timeline.</p>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</section>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
<div class="modal fade" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="timeline-event-view"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- tether 1.4.0 (for using bootstrap's tooltip component) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- local scripts -->
<script>
$(function () {
$("#myTimeline").timeline({
startDatetime: '2017-05-25',
rows: 6,
rangeAlign: 'center'
});
// usage bootstrap's popover
$('.timeline-node').each(function(){
if ( $(this).data('toggle') === 'popover' ) {
$(this).attr( 'title', $(this).text() );
$(this).popover({
trigger: 'hover'
});
}
});