jQuery简易时光轴实现方法示例

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;

}

/*-----大标题-----*/

.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;

}

/*-----大标题end-----*/

/*-----小标题-----*/

.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;

}

/*-----小标题end-----*/

/*-----三角形-----*/

.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;

}

/*模板*/

.hide{

display: none;

}

/*查看更多*/

.showMore{

clear: both;

text-align: center;

height: 70px;

line-height: 70px;

}

.showMore:hover{

cursor: pointer;

background:#FFEFDB;

color:#8cdbff;

}

varindex = 0;

$(function(){

hqOrderNodeCreate();//总部下单

})

//总部下单

functionhqOrderNodeCreate(){

varbigTitleData = {

bigAction:'总部下单',

bigInfo:''

};

createBigTitle(bigTitleData, index);

}

//基地生产

functionbaseOrderNodeCreate(){

varbigTitleData = {

bigAction:'基地生产',

bigInfo:''

};

createBigTitle(bigTitleData, index);

}

//仓库库存

functionstockNodeCreate(){

varbigTitleData = {

bigAction:'仓库库存',

bigInfo:''

};

createBigTitle(bigTitleData, index);

}

//发货

functiondelNodeCreate(){

varbigTitleData = {

bigAction:'发货',

bigInfo:''

};

createBigTitle(bigTitleData, index);

}

//结算

functionsetNodeCreate(){

varbigTitleData = {

bigAction:'结算',

bigInfo:''

};

createBigTitle(bigTitleData, index);

}

//生成大标题,一次生成一个

functioncreateBigTitle(bigTitleData, index){

//生成大标题

$('.timeLine').append($('#bigTitleTpl').html()

.replace('{bigAction}', bigTitleData.bigAction)

.replace('{bigInfo}', bigTitleData.bigInfo)

);

//生成大标题下对应的内容

varbigContentData = [{

smallTime:'2010.10.11',

smallAction:'录单 '+ index,

smallInfo:'操作时间: 10:30:55'

},{

smallTime:'2010.10.15',

smallAction:'审核 '+ index,

smallInfo:'操作时间: 10:10:55'

},{

smallTime:'2010.10.15',

smallAction:'分发 '+ index,

smallInfo:'操作时间: 10:10:55'

}];

varbigContentTplStr = $('#bigContentTpl').html();

varstr ='';

for(vari=0; 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);

}

//查看更多, 每次点击生成一个新的节点

$('.showMore').on('click',function(){

if($(this).text() ==='查看更多'){

if(index === 0){

index++;

baseOrderNodeCreate();//基地生产

}

elseif(index === 1){

index++;

stockNodeCreate();//仓库库存

}

elseif(index === 2){

index++;

delNodeCreate();//发货

}

elseif(index === 3){

index++;

setNodeCreate();//结算

$(this).text(' →_→ 没有记录了');

}

}

})

// + - 按钮 收缩效果

$(document).on('click','.bigButtonSeeMore',function(){

varclickObj = $(this);

varbigContentObj = clickObj.parent().next().next();

if(clickObj.text() ==='+'){

bigContentObj.slideDown(500,function(){

clickObj.html('');//切换图标

});

}

elseif(clickObj.text() ==='-'){

bigContentObj.slideUp(500,function(){

clickObj.html('');

});

}

})