Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- jQuery Timeline -->
<link rel="stylesheet" href="./dist/timeline.min.css?ver=1.0.0">
<!-- Font Awesome latest -->
<script src="http://email.tl.fortawesome.com/c/eJxNjUEOwiAQRU9TlmQYaIcuWKhJ70E7g1XbYgrG68vS5Oct3uJ9DiwDC6lHQDAEiGQsut5qgw5Grw0QeX2d7NSPdOsc1E2nfNb4lZJ30Uve1RokQYQEJrJ1kmZKHJ3zwzAubkHPRm1hrfVdOnvpcGr7FGmZ4z_T7OwZPfJsUD-LOsMrYnts1Pm8_wAiUTJN"></script>
<!-- HTML5 ShimとRespond.js IE8のHTML5要素とメディアクエリのサポート -->
<!-- 警告：Respond.jsは、file:// 経由でページを表示しても機能しません -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://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"><a href="#"><i class="fa fa-home"></i> HOME</a></li>
<li class="breadcrumb-item active">jQuery Timeline</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="{ eventId:1,start:'',end:'',content:'text text text text ...' }">Event Label</li>
<li data-timeline-node="{ start:'',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="{ eventId:3,start:'',end:'',row:2,bgColor:'#89c997',color:'#ffffff',callback:'$(\'#myModal\').modal()',content:'Show modal window via bootstrap' }">Event having callback</li>
<li data-timeline-node="{ eventId:2,start:'',end:'',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:'',end:'',row:3,extend:{'post_id':13,'permalink':'https://www.google.com/'} }">Event having extended params</li>
<li data-timeline-node="{ start:'',end:'',row:4,bgColor:'#e6eb94',margin:6 }">Sample Event ( ~ )</li>
<li data-timeline-node="{ start:'',row:4,bdColor:'#942343',image:'./dist/img/sample.bmp' }">Event having image for point type</li>
<li data-timeline-node="{ start:'',end:'',row:5 }">Long event from the past over range</li>
<li data-timeline-node="{ start:'',end:'',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">
<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="col-lg-6 col-md-12">
<div class="card mb-3">
<div class="card-block">
<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 -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3.1.1 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- tether 1.4.0 (for using bootstrap's tooltip component) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap 4.0.0-alpha.6 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- jQuery Timeline -->
<script src="./dist/timeline.min.js?ver=1.0.0"></script>
<!-- script src="./src/timeline.js"></script -->
<!-- local scripts -->
<script>
$(function () {
"use strict";
$("#myTimeline").timeline();
});
</script>
</body>
</html>