asia_Kstyle6/modules/announcement/annc_index10.html.erb

185 lines
6.3 KiB
Plaintext

<div class="i-annc index-announcement-10">
<h3 class="i-annc__page-title">{{page-title}}</h3>
<div class="VivaTimeline">
<dl>
<!--月份 1-->
<dt>{{date-head}}</dt>
<!--左側文章 start-->
<div class="data" data-level="0" data-list="announcements">
<dd class=" evenodd clearfix ">
<div class="circ"></div>
<div class="time" date-format="%Y-%m">{{postdate}}</div>
<!--填入日期-->
<div class="events">
<div class="events-header">{{title}}</div>
<!--填入標題-->
<div class="events-body">
<div class="row">
<div class="col-md-6 pull-left">
<img class="events-object img-responsive img-rounded" src="{{img_src}}"/><!--填入圖片網址--></div>
<div class="events-desc">{{subtitle}}</div>
<!--填入描述-->
</div>
</div>
<div class="events-footer">
<a class="i-annc__title" href="{{link_to_show}}">more </a>
</div>
<!--可填底部標題 或刪除-->
</div>
</dd>
</div>
</dl>
</div>
</div>
{{pagination_goes_here}}
<script type="text/javascript">
jQuery(function(){
jQuery('.data > dd:odd').addClass(' pos-left');
jQuery('.data > dd:even').addClass('pos-right');
});
</script>
<script type="text/javascript">
;
(function ($, window, document, undefined) {
//'use strict';
var pluginName = 'vivaTimeline'; //Plugin名稱
//Timeline建構式
var Timeline = function (element, opt) {
//私有變數
this.target = element;
this.carouselInterval;
this.checkImgLoad;
this.imgLoad = false;
//初始化
this._init(opt);
this._event();
}
//ImportKML2D預設參數
Timeline.options = {
carousel: true,
carouselTime: 10000
}
//Timeline私有方法
Timeline.prototype = {
//初始化
_init: function (_opt) {
//合併自訂參數與預設參數
var self = this;
self.options = $.extend(true, {}, Timeline.options, _opt);
self.target.find('.events-body').each(function () {
var rowcount = $(this).find('.row').length;
if (rowcount > 1) {
var html = "<ol>";
for (var i = 0; i < rowcount; i++) {
html += "<li data-target='" + i + "'></li>";
}
html += "</ol>";
$(this).siblings('.events-footer').html(html).find('li').first().addClass('active');
}
});
self.target.find('.events-body').each(function () {
$(this).find('.row').first().show().siblings().hide();
});
self.target.find('img').on('load', function () {
self.target.find('.events-body').each(function () {
var maxHeight = 0;
$(this).find('.row').each(function () {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$(this).find('.row').height(maxHeight);
});
});
},
//綁定事件
_event: function () {
var self = this;
self.target.find('.events-header').click(function () {
$(this).siblings('.events-body').slideToggle().end().siblings('.events-footer').toggle();
});
self.target.find('.events-footer li').click(function () {
self._carousel($(this));
});
if (self.options.carousel) {
self.carouselInterval = setInterval(function () {
self._carousel();
}, self.options.carouselTime);
self.target.find('.events').hover(function () {
clearInterval(self.carouselInterval);
self.carouselInterval = null;
}, function () {
if (self.carouselInterval == undefined) {
self.carouselInterval = setInterval(function () {
self._carousel();
}, self.options.carouselTime);
}
});
}
},
//自動輪播
_carousel: function (_container) {
var self = this;
if (_container == undefined) {
self.target.find('.events-footer .active').each(function () {
var nextTarget;
if ($(this).is(':last-child')) {
nextTarget = $(this).siblings().first();
} else {
nextTarget = $(this).next();
}
self._carousel(nextTarget);
});
} else {
var target = _container.data().target;
_container.addClass('active').siblings().removeClass('active');
_container.closest('.events-footer').siblings('.events-body').find('.row').eq(target).show().siblings().hide();
}
}
}
//公開方法
$.fn[pluginName] = function (options, args) {
var timeline;
this.each(function () {
timeline = new Timeline($(this), options);
});
return this;
}
})(jQuery, window, document);
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.VivaTimeline').vivaTimeline({carousel: true, carouselTime: 3000});
});
</script>
<script type="text/javascript">