3/06/2018

自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛

自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛

A+
jquery-bootstrap-timeline-eeyellow.jpg-自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛雖然時間軸的效果看過不少網頁使用,不過倒是很少看到部落格站長放在文章內。這次接到的需求是,案主希望將單車行旅的圖文經歷,版面用時間軸效果串起來。

於是研究了相關的外掛,同時也要顧及手機的 RWD 效果,請見本篇的心得整理。



(圖片出處: eeyellow-Timeline)


一、時間軸外掛


以下這個頁面可看到各式各樣的時間軸效果:



在挑選上可注意的地方:

  • 如果是部落格使用,比較適合挑選垂直方向的外掛
  • 有的外掛將時間軸擺中間,讓顯示的項目一左一右依序排列,版面比較好看,適合沒有側邊欄的網站
  • 如果有側邊欄的話,由於文章區塊的寬度受限,比較適合只有單邊顯示的時間軸
  • 如果要考慮手機上的效果,最好注意外掛有沒有支援 RWD



二、eeyellow.Timeline


1. 外掛官網

本篇介紹的時間軸外掛特點如下:



標題收合後的效果像下圖這樣。

jquery-bootstrap-timeline-eeyellow-1.jpg-自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛


介紹網頁包含下載、DEMO 連結,也有安裝操作說明。但你需要有網頁空間,才能依照英文說明內容成功安裝。

或是也可依照以下我整理後的中文流程來進行。


2. 安裝方式

由於時間軸多半不會使用輪播,因此我的安裝方式去除了輪播功能。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

安裝方式以 Blogger 為例,請到後台「主題」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet'></link>


<!--時間軸 js/css, Copyright (c) 2016 eeyellow-->
<style>
.VivaTimeline dl{position:relative;top:0;padding:20px 0;margin:0}.VivaTimeline dl:before{position:absolute;top:0;bottom:0;left:50%;z-index:1;width:2px;margin-left:-1px;content:'';background-color:#ccd1d9}.VivaTimeline dl dt{position:relative;top:30px;z-index:2;width:120px;padding:3px 5px;margin:0 auto 30px;font-weight:400;color:#fff;text-align:center;background-color:#aab2bd;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px}.VivaTimeline dl dd{position:relative;z-index:2}.VivaTimeline dl dd .circ{position:absolute;top:40px;left:50%;z-index:2;width:22px;height:22px;margin-left:-11px;background-color:#4fc1e9;border:4px solid #f5f7fa;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%}.VivaTimeline dl dd .time{position:absolute;top:31px;left:50%;display:inline-block;width:100px;padding:10px 20px;color:#4fc1e9}.VivaTimeline dl dd .events{position:relative;width:47%;padding:10px 0 0;margin-top:31px;background-color:#CCC;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px}.VivaTimeline dl dd .events:before{position:absolute;top:12px;width:0;height:0;content:'';border-style:solid;border-width:6px}.VivaTimeline dl dd .events .events-object{margin:0 auto}.VivaTimeline dl dd .events .events-header{min-height:30px;line-height:20px;text-align:center;font-size:16px;font-weight:bold;cursor:pointer}.VivaTimeline dl dd .events .events-body{overflow:hidden;zoom:1;background-color:#EEE;padding:10px}.VivaTimeline dl dd .events .events-body .row{display:none}.VivaTimeline dl dd .events .events-body .events-desc{text-indent:2em;padding:0 15px}.VivaTimeline dl dd .events .events-footer{text-align:center}.VivaTimeline dl dd .events .events-footer ol{list-style:none;margin:0 auto;padding:0}.VivaTimeline dl dd .events .events-footer ol li{background:#32b487;border-radius:5px;margin:10px;display:inline-block;width:10px;height:10px;cursor:pointer}.VivaTimeline dl dd .events .events-footer ol .active{transform:scale(2)}.VivaTimeline dl dd.pos-right .time{margin-left:-100px;text-align:right}.VivaTimeline dl dd.pos-right .events{float:right}.VivaTimeline dl dd.pos-right .events:before{left:-12px;border-color:transparent #CCC transparent transparent}.VivaTimeline dl dd.pos-left .time{margin-left:0;text-align:left}.VivaTimeline dl dd.pos-left .events{float:left}.VivaTimeline dl dd.pos-left .events:before{right:-12px;border-color:transparent transparent transparent #CCC}.VivaTimeline .carousel-indicators{bottom:0}@media screen and (max-width:767px){.VivaTimeline dl:before{left:90px}.VivaTimeline dl dt{margin:0 30px 30px}.VivaTimeline dl dd .circ{left:90px}.VivaTimeline dl dd .time{left:20px}.VivaTimeline dl dd.pos-left .time{padding:10px 0;margin-left:0;text-align:left}.VivaTimeline dl dd.pos-left .events{float:right;width:73%;margin-right:4%}.VivaTimeline dl dd.pos-left .events:before{left:-12px;border-color:transparent #CCC transparent transparent}.VivaTimeline dl dd.pos-right .time{padding:10px 0;margin-left:0;text-align:left}.VivaTimeline dl dd.pos-right .events{float:right;width:73%;margin-right:4%}/* .VivaTimeline dl dd .events .events-body{display:none}.VivaTimeline dl dd .events .events-footer{display:none}*/}
@media screen and (max-width:500px){.VivaTimeline dl dd.pos-left .events{float:right;width:63%;margin-right:4%}.VivaTimeline dl dd.pos-right .events{float:right;width:63%;margin-right:4%}}
</style>
<script>
//<![CDATA[
(function(e,b,a,f){var d="vivaTimeline";var c=function(h,g){this.target=h;this.carouselInterval;this.checkImgLoad;this.imgLoad=false;this._init(g);this._event()};c.options={carousel:true,carouselTime:10000};c.prototype={_init:function(h){var g=this;g.options=e.extend(true,{},c.options,h);g.target.find(".events-body").each(function(){var l=e(this).find(".row").length;if(l>1){var k="<ol>";for(var j=0;j<l;j++){k+="<li data-target='"+j+"'></li>"}k+="</ol>";e(this).siblings(".events-footer").html(k).find("li").first().addClass("active")}});g.target.find(".events-body").each(function(){e(this).find(".row").first().show().siblings().hide()});g.target.find("img").on("load",function(){g.target.find(".events-body").each(function(){var i=0;e(this).find(".row").each(function(){if(e(this).height()>i){i=e(this).height()}});e(this).find(".row").height(i)})})},_event:function(){var g=this;g.target.find(".events-header").click(function(){e(this).siblings(".events-body").slideToggle().end().siblings(".events-footer").toggle()});g.target.find(".events-footer li").click(function(){g._carousel(e(this))});if(g.options.carousel){g.carouselInterval=setInterval(function(){g._carousel()},g.options.carouselTime);g.target.find(".events").hover(function(){clearInterval(g.carouselInterval);g.carouselInterval=null},function(){if(g.carouselInterval==f){g.carouselInterval=setInterval(function(){g._carousel()},g.options.carouselTime)}})}},_carousel:function(h){var g=this;if(h==f){g.target.find(".events-footer .active").each(function(){var j;if(e(this).is(":last-child")){j=e(this).siblings().first()}else{j=e(this).next()}g._carousel(j)})}else{var i=h.data().target;h.addClass("active").siblings().removeClass("active");h.closest(".events-footer").siblings(".events-body").find(".row").eq(i).show().siblings().hide()}}};e.fn[d]=function(h,g){var i;this.each(function(){i=new c(e(this),h)});return this}})(jQuery,window,document);
//]]>
</script>
<!--時間軸 js/css-->

前 2 行綠字可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery、Bootstrap,如果已經安裝過請刪除,以免重複安裝。


3. 執行程式碼

接著在範本中搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script>
//<![CDATA[
/*執行時間軸*/
$(".VivaTimeline").vivaTimeline();
//]]>
</script>

儲存範本即可。



三、時間軸內容 HTML 範例


在文章中或網頁上,要擺放的時間軸內容,請參考以下的 HTML 範例來修改:

<div class="VivaTimeline">
<dl>

<!--月份 1-->
<dt>Feb 2018</dt>

<!--左側文章 start-->
<dd class="pos-left clearfix">
<div class="circ"></div>
<div class="time">Feb 20</div><!--填入日期-->
<div class="events">
<div class="events-header">Blogger 官方免費幫自訂網址升級 HTTPS!</div><!--填入標題-->
<div class="events-body">
<div class="row">
<div class="col-md-6 pull-left">
<img class="events-object img-responsive img-rounded" src="https://4.bp.blogspot.com/-wXph1d9tAxM/WokCWJ06S6I/AAAAAAAAWZQ/kJcyc9mbSiIT99OE1yEx426CkET1NeHFgCLcBGAs/s1600/blogger-custom-domain-official-https-upgrade.jpg" /><!--填入圖片網址-->
</div>
<div class="events-desc">這真的是最好的新年禮物了,過年前夕在「 FB 社團 」 +Vista Cheng 分享了「 Blogger站長看過來:自訂網域的網誌,也可以支援HTTPS囉 」 ,原來官方悄悄開始測試,可以讓自訂網域直接升級 HTTPS,這代表: 不用付錢,Blogger 免費提供我們網...</div><!--填入描述-->
</div>
</div>
<div class="events-footer"><a href="https://www.wfublog.com/2018/02/blogger-custom-domain-official-https-upgrade.html" target="_blank">繼續閱讀</a></div><!--可填底部標題 或刪除-->
</div>
</dd>
<!--左側文章 end-->

<!--右側文章 start-->
<dd class="pos-right clearfix">
<div class="circ"></div>
<div class="time">Feb 13</div><!--填入日期-->
<div class="events">
<div class="events-header">究竟 Blogger 會不會關閉?從 Google 商業經營的角度分析</div><!--填入標題-->
<div class="events-body">
<div class="row">
<div class="col-md-6 pull-left">
<img class="events-object img-responsive img-rounded" src="https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg" /><!--填入圖片網址-->
</div>
<div class="events-desc">Blogger 會不會倒閉,是使用者長期以來的擔憂。過去曾在「 Blogger 的未來 」發表過看法,不過曾有讀者看完,一段時間後仍提出相同的問題。我想,這件事除非有官方說詞,否則疑問不會有停止的一天。 然而,Google 官方有可能發佈這樣的聲明嗎?我想不會的,連 Yaho...</div><!--填入描述-->
</div>
</div>
<div class="events-footer"><a href="https://www.wfublog.com/2018/02/blogger-custom-domain-official-https-upgrade.html" target="_blank">繼續閱讀</a></div><!--可填底部標題 或刪除-->
</div>
</dd>
<!--右側文章 end-->

<!--月份 2-->
<dt>Jan 2018</dt>

<!--左側文章 start-->
<dd class="pos-left clearfix">
<div class="circ"></div>
<div class="time">Jan 30</div><!--填入日期-->
<div class="events">
<div class="events-header">部落格載入速度太慢,要如何判斷哪些外掛可以移除?</div><!--填入標題-->
<div class="events-body">
<div class="row">
<div class="col-md-6 pull-left">
<img class="events-object img-responsive img-rounded" src="https://2.bp.blogspot.com/-kSoFOb5NBBo/Wm-wzn619hI/AAAAAAAAWVw/13tYUepFvuk3zD3XnU25wBixfDuAzC-0wCLcBGAs/s1600/pagespeed-slow-remove-plugin.jpg" /><!--填入圖片網址-->
</div>
<div class="events-desc">重視 SEO 的站長自然都會關注網頁的載入速度,因為這也是 Google 的排名評分項目之一。過去寫過一系列「 網站效能 」的相關文章,有興趣的站長可以瞭解不同的主題要如何處理。 由於提升「網頁載入速度」的詢問度一直很高,以往就算請讀者看這些相關文章,一段時間後還是可能回頭問...</div><!--填入描述-->
</div>
</div>
<div class="events-footer"><a href="https://www.wfublog.com/2018/01/pagespeed-slow-remove-plugin.html" target="_blank">繼續閱讀</a></div><!--可填底部標題 或刪除-->
</div>
</dd>
<!--左側文章 end-->

<!--右側文章 start-->
<dd class="pos-right clearfix">
<div class="circ"></div>
<div class="time">Jan 17</div><!--填入日期-->
<div class="events">
<div class="events-header">從小編到總編之路﹍如何成為部落客中的佼佼者</div><!--填入標題-->
<div class="events-body">
<div class="row">
<div class="col-md-6 pull-left">
<img class="events-object img-responsive img-rounded" src="https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s780/how-to-become-top-blog-writer.jpg" /><!--填入圖片網址-->
</div>
<div class="events-desc">前陣子這篇「 部落格從搜尋引擎而來的流量,是不會有感情的﹍找回經營網站的動力 」寫完後,有位美食部落格客戶,同時也算本站長期讀者,問了一些 SEO 問題。其實滿訝異的,既然是忠實讀者,想必知道我希望讀者將注意力放在 SEO 以外的地方。 瞭解她詢問的原因後,覺得這段對話可以看...</div><!--填入描述-->
</div>
</div>
<div class="events-footer"><a href="https://www.wfublog.com/2018/01/how-to-become-top-blog-writer.html" target="_blank">繼續閱讀</a></div><!--可填底部標題 或刪除-->
</div>
</dd>
<!--右側文章 end-->

<!--月份 3-->
<dt>Dec 2017</dt>

<!--月份 4-->
<dt>Nov 2017</dt>
</dl>
</div>

修改說明:

  • 需要顯示月份的地方,複製綠色註釋字串「月份」的下一行,並修改內容
  • 需要顯示文章的地方,完整複製註釋「文章 start」~「文章 end」區間的 HTML 碼來修改
  • 在藍字註釋「填入日期」那一行修改日期
  • 在藍字註釋「填入標題」那一行修改標題
  • 在藍字註釋「填入圖片網址」那一行修改 src="" 之間的圖片網址
  • 在藍字註釋「填入描述」那一行修改描述內容
  • 在藍字註釋「底部標題 」那一行修改 HTML 碼
  • 不使用底部標題時,保留原本的字串 <div class="events-footer"></div> 即可

以上範例的效果,可前往 DEMO 頁面:



更多 jQuery 相關外掛:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP