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

2020-05-27 18:04:19易采站长站整理

.hide{
display: none;
}
/*查看更多*/
.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>订单小助手:</span>
<input type='text' id='txtDoccode' />
</div>
<div id='content'>
<div class='timeLine'></div>
<div class='showMore'>查看更多</div>
</div>
<div id='footer'>footer</div>
<!-- 大标题模板 -->
<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>
<!-- 详细信息模板 -->
<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();//总部下单
})
//总部下单
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);