<!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; } /*-----大标题-----*/ .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; } </style> </head> <body> <div> <span>订单小助手:</span> <input type='text' /> </div> <div> <div></div> <div>查看更多</div> </div> <div>footer</div> <!-- 大标题模板 --> <div> <div> <div> <div>{bigAction} </div> <div> {bigInfo}</div> <div><a href='javascript:;'>-</a></div> </div> <div> </div> <div></div> </div> </div> <!-- 详细信息模板 --> <div> <div> <div> <div><br/>{smallTime} </div> </div> <div> </div> <div> <div><br/> {smallAction}</div> <div> {smallInfo}</div> </div> </div> </div> <script src="https://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); } //结算 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('<a href="javascript:;" ">-</a>');//切换图标 }); } else if(clickObj.text() === '-'){ bigContentObj.slideUp(500, function(){ clickObj.html('<a href="javascript:;" ">+</a>'); }); } }) </script> </body> </html>
jQuery简易时光轴实现方法示例
内容版权声明：除非注明，否则皆为本站原创文章。