本文实例讲述了jQuery简易时光轴实现方法。分享给大家供大家参考，具体如下：
<!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 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); } //结算 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:;" rel="external nofollow" rel="external nofollow" ">-</a>');//切换图标 }); } else if(clickObj.text() === '-'){ bigContentObj.slideUp(500, function(){ clickObj.html('<a href="javascript:;" rel="external nofollow" rel="external nofollow" ">+</a>'); }); } }) </script></body></html>更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
新闻热点
疑难解答
