Example of jQuery Simple Time Axis Implementation Method
- 2021-08-03 08:51:53
- OfStack
This paper describes the implementation method of jQuery simple time axis with examples. Share it for your reference, as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>timeLine</title>
<style>
body{
margin: 0;
padding: 0;
background: #e8ffe8;
}
#head, #content, #footer{
width: 1000px;
margin: 0 auto;
}
#head{
text-align: center;
height: 100px;
line-height: 100px;
}
#footer{
clear: both;
text-align: center;
height: 30px;
line-height: 30px;
}
/*----- Headlines -----*/
.bigElement{
clear: both;
position: relative;
}
.bigTitle{
font-size: 16px;
font-weight: bold;
height: 70px;
line-height: 70px;
background: #e8ffe8;
color: #635d5a;
}
.bigAction, .bigInfo{
float: left;
}
.bigAction{
border-right: 3px solid #635d5a;
text-align: right;
width: 220px;
}
.bigButtonSeeMore{
float: right;
width: 70px;
height: 70px;
text-align: center;
}
.bigButtonSeeMore > a{
text-decoration: none;
display: block;
color: #635d5a;
outline: none;
blr: expression(this.onFocus=this.blur());
}
.bigButtonSeeMore > a:hover{
color: #8cdbff;
}
.bigContent{
clear: both;
}
/*----- Headlines end-----*/
/*----- Subheadings -----*/
.smallElement{
clear: both;
position: relative;
height: auto;
font-size: 16px;
background: #e8ffe8;
color: #635d5a;
}
.smallTitle{
text-align: right;
width: 220px;
}
.smallTitle, .smallContent{
float: left;
}
.smallContent{
border-left: 3px solid #635d5a;
}
.smallInfo{
margin-top: 20px;
text-indent: 40px;
}
/*----- Subheadings end-----*/
/*-----3 Angle -----*/
.bigTitleTrifonIconR{
border-color: #e8ffe8 #e8ffe8 #e8ffe8 #635d5a;
border-style: solid;
border-width: 7px;
width: 0;
height: 0;
font-size: 0;
position: absolute;
top: 28px;
left: 223px;
}
.smallTitleTrifonIconL{
border-color: #e8ffe8 #635d5a #e8ffe8 #e8ffe8;
border-style: solid;
border-width: 6px;
width: 0;
height: 0;
font-size: 0;
position: absolute;
top: 23px;
left: 208px;
}
/* Template */
.hide{
display: none;
}
/* See more */
.showMore{
clear: both;
text-align: center;
height: 70px;
line-height: 70px;
}
.showMore:hover{
cursor: pointer;
background: #FFEFDB;
color: #8cdbff;
}
</style>
</head>
<body>
<div id='head'>
<span> Order Assistant :</span>
<input type='text' id='txtDoccode' />
</div>
<div id='content'>
<div class='timeLine'></div>
<div class='showMore'> See more </div>
</div>
<div id='footer'>footer</div>
<!-- Headline template -->
<div class='hide' id='bigTitleTpl'>
<div class='bigElement'>
<div class='bigTitle'>
<div class='bigAction'>{bigAction} </div>
<div class='bigInfo'> {bigInfo}</div>
<div class='bigButtonSeeMore'><a href='javascript:;'>-</a></div>
</div>
<div class='bigTitleTrifonIconR'> </div>
<div class='bigContent'></div>
</div>
</div>
<!-- Details template -->
<div class='hide' id='bigContentTpl'>
<div class='smallElement'>
<div class='smallTitle'>
<div class='smallTime'><br/>{smallTime} </div>
</div>
<div class='smallTitleTrifonIconL'> </div>
<div class='smallContent'>
<div class='smallAction'><br/> {smallAction}</div>
<div class='smallInfo'> {smallInfo}</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.8.0/jquery.js"></script>
<script>
var index = 0;
$(function(){
hqOrderNodeCreate();// Order placing at headquarters
})
// Order placing at headquarters
function hqOrderNodeCreate(){
var bigTitleData = {
bigAction: ' Order placing at headquarters ',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
// Base production
function baseOrderNodeCreate(){
var bigTitleData = {
bigAction: ' Base production ',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
// Warehouse inventory
function stockNodeCreate(){
var bigTitleData = {
bigAction: ' Warehouse inventory ',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
// Delivery
function delNodeCreate(){
var bigTitleData = {
bigAction: ' Delivery ',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
// Settlement
function setNodeCreate(){
var bigTitleData = {
bigAction: ' Settlement ',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
// Generate a headline ,1 Secondary generation 1 A
function createBigTitle(bigTitleData, index){
// Generate a headline
$('.timeLine').append($('#bigTitleTpl').html()
.replace('{bigAction}', bigTitleData.bigAction)
.replace('{bigInfo}', bigTitleData.bigInfo)
);
// Generate the corresponding content under the header
var bigContentData = [{
smallTime: '2010.10.11',
smallAction: ' Record bill ' + index,
smallInfo: ' Operation time : 10:30:55'
},{
smallTime: '2010.10.15',
smallAction: ' Audit ' + index,
smallInfo: ' Operation time : 10:10:55'
},{
smallTime: '2010.10.15',
smallAction: ' Distribute ' + index,
smallInfo: ' Operation time : 10:10:55'
}];
var bigContentTplStr = $('#bigContentTpl').html();
var str = '';
for(var i=0; i< bigContentData.length; i++){
str += bigContentTplStr.replace('{smallTime}', bigContentData[i].smallTime)
.replace('{smallAction}', bigContentData[i].smallAction)
.replace('{smallInfo}', bigContentData[i].smallInfo);
}
$('.bigContent:eq(' + index + ')').html(str).hide().slideDown(500);
}
// See more , Generate per click 1 New nodes
$('.showMore').on('click', function(){
if($(this).text() === ' See more '){
if(index === 0){
index++;
baseOrderNodeCreate();// Base production
}
else if(index === 1){
index++;
stockNodeCreate();// Warehouse inventory
}
else if(index === 2){
index++;
delNodeCreate();// Delivery
}
else if(index === 3){
index++;
setNodeCreate();// Settlement
$(this).text(' → _ → There is no record ');
}
}
})
// + - Button Shrinkage effect
$(document).on('click', '.bigButtonSeeMore', function(){
var clickObj = $(this);
var bigContentObj = clickObj.parent().next().next();
if(clickObj.text() === '+'){
bigContentObj.slideDown(500, function(){
clickObj.html('<a href="javascript:;" rel="external nofollow" rel="external nofollow" ">-</a>');// Toggle icon
});
}
else if(clickObj.text() === '-'){
bigContentObj.slideUp(500, function(){
clickObj.html('<a href="javascript:;" rel="external nofollow" rel="external nofollow" ">+</a>');
});
}
})
</script>
</body>
</html>
More readers interested in jQuery can check the topics of this site: "Summary of jQuery Extension Skills", "Summary of jQuery Common Plug-ins and Usage", "Summary of jQuery Drag Effects and Skills", "Summary of jQuery Table (table) Operation Skills", "Summary of Ajax Usage in jquery", "Summary of jQuery Common Classic Special Effects", "Summary of jQuery Animation and Special Effects Usage" and "Summary of jquery Selector Usage"
I hope this article is helpful to everyone's jQuery programming.