html时间选择器时光轴,jQuery简易时光轴实现方法示例

本文实例讲述了jQuery简易时光轴实现方法。分享给大家供大家参考，具体如下：

timeLine

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;

}

订单小助手:

查看更多

footer

{bigAction}

{bigInfo}

-

{smallTime}

{smallAction}

{smallInfo}

var index = 0;

$(function(){

hqOrderNodeCreate();//总部下单

})

//总部下单

function hqOrderNodeCreate(){

var bigTitleData = {

bigAction: '总部下单',

bigInfo: ''

};

createBigTitle(bigTitleData, index);

}

//基地生产

function baseOrderNodeCreate(){

var bigTitleData = {

bigAction: '基地生产',

bigInfo: ''

};

createBigTitle(bigTitleData, index);

}

//仓库库存

function stockNodeCreate(){

var bigTitleData = {

bigAction: '仓库库存',

bigInfo: ''

};

createBigTitle(bigTitleData, index);

}

//发货

function delNodeCreate(){

var bigTitleData = {

bigAction: '发货',

bigInfo: ''

};

createBigTitle(bigTitleData, index);

}

//结算

function setNodeCreate(){

var bigTitleData = {

bigAction: '结算',

bigInfo: ''

};

createBigTitle(bigTitleData, index);

}

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

function createBigTitle(bigTitleData, index){

//生成大标题

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

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

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

);

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

var bigContentData = [{

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'

}];

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

}

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

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

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

if(index === 0){

index++;

baseOrderNodeCreate();//基地生产

}

else if(index === 1){

index++;

stockNodeCreate();//仓库库存

}

else if(index === 2){

index++;

delNodeCreate();//发货

}

else if(index === 3){

index++;

setNodeCreate();//结算

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

}

}

})

// + - 按钮 收缩效果

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

var clickObj = $(this);

var bigContentObj = clickObj.parent().next().next();

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

bigContentObj.slideDown(500, function(){

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

});

}

else if(clickObj.text() === '-'){

bigContentObj.slideUp(500, function(){

clickObj.html('+');

});

}

})

希望本文所述对大家jQuery程序设计有所帮助。