本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
