jQuery簡易時光軸實現(xiàn)方法示例
本文實例講述了jQuery簡易時光軸實現(xiàn)方法。分享給大家供大家參考,具體如下:
<!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; } /*-----大標(biāo)題-----*/ .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; } /*-----大標(biāo)題end-----*/ /*-----小標(biāo)題-----*/ .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; } /*-----小標(biāo)題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> <!-- 大標(biāo)題模板 --> <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> <!-- 詳細(xì)信息模板 --> <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); } //基地生產(chǎn) function baseOrderNodeCreate(){ var bigTitleData = { bigAction: '基地生產(chǎn)', bigInfo: '' }; createBigTitle(bigTitleData, index); } //倉庫庫存 function stockNodeCreate(){ var bigTitleData = { bigAction: '倉庫庫存', bigInfo: '' }; createBigTitle(bigTitleData, index); } //發(fā)貨 function delNodeCreate(){ var bigTitleData = { bigAction: '發(fā)貨', bigInfo: '' }; createBigTitle(bigTitleData, index); } //結(jié)算 function setNodeCreate(){ var bigTitleData = { bigAction: '結(jié)算', bigInfo: '' }; createBigTitle(bigTitleData, index); } //生成大標(biāo)題,一次生成一個 function createBigTitle(bigTitleData, index){ //生成大標(biāo)題 $('.timeLine').append($('#bigTitleTpl').html() .replace('{bigAction}', bigTitleData.bigAction) .replace('{bigInfo}', bigTitleData.bigInfo) ); //生成大標(biāo)題下對應(yīng)的內(nèi)容 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: '分發(fā) ' + 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); } //查看更多, 每次點擊生成一個新的節(jié)點 $('.showMore').on('click', function(){ if($(this).text() === '查看更多'){ if(index === 0){ index++; baseOrderNodeCreate();//基地生產(chǎn) } else if(index === 1){ index++; stockNodeCreate();//倉庫庫存 } else if(index === 2){ index++; delNodeCreate();//發(fā)貨 } else if(index === 3){ index++; setNodeCreate();//結(jié)算 $(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>');//切換圖標(biāo) }); } else if(clickObj.text() === '-'){ bigContentObj.slideUp(500, function(){ clickObj.html('<a href="javascript:;" rel="external nofollow" rel="external nofollow" ">+</a>'); }); } }) </script> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jquery tools系列 overlay 學(xué)習(xí)
接著上次scrollable的學(xué)習(xí),今天繼續(xù)jquery tools六大功能的第四個功能——overlay的學(xué)習(xí)。2009-09-09jquery.post用法關(guān)于type設(shè)置問題補充
當(dāng)使用ajax獲取data數(shù)據(jù)的時候,直接data.foo就可以得到。而較低版本的jquery就不行比如1.4之前,下面為大家介紹下jquery.post用法關(guān)于type設(shè)置問題2014-01-01jQuery事件的綁定、觸發(fā)、及監(jiān)聽方法簡單說明
這篇文章主要介紹了jQuery事件的綁定、觸發(fā)、及監(jiān)聽方法簡單說明,使用jQuery的事件會使代碼更加簡單,同時對各瀏覽器的兼容性也還不錯,需要的朋友可以參考下2016-05-05Javascript 鏈?zhǔn)秸{(diào)用實現(xiàn)代碼(參考jquery)
謂的鏈?zhǔn)秸{(diào)用無非是一個語法技巧而已,我就學(xué)Jquery寫了一個粗淺的庫。2010-05-05