Views 模組:自定一個按月彙整日期收合或展開日期列表功能

Views 內置了一個 Archives Default Views,但不能滿足需求。就像這位朋友需要一個 "按月彙整日期收合或展開日期列表功能"

有模組做嗎 ?? 不知。不過使用 Views 加上少許的 jQuery 還是能輕鬆達到效果,不花你十分鐘的時間。(** 文章最後附有 Views 2 Export Code)

首先看看 "月彙整日期收合或展開日期列表" 需要什麼:

  • 按年份及月份區分
  • 每一個 "年份及月份" 下列出該月份每天的文章
  • 列出的文章包括了發表日期及標題連結

好了,我們簡單地建立一個 Views, 做一些很基本的設定,取出必要的 Fields。

由於我們要按年月份區分,所以 Node: Post date 需要自定日期格式:

其一個是: Y M
另一個是:d

唯一必要注意的是:我們要以年月日期來作群組:

假如你沒有設定錯誤,會看到相似的列表:

已經接近成功了!! 接下來是一些 CSS 及 jQuery Code

CSS 隨你喜歡了,我給了個參考:


.view-MonthlyArchives .views-field-created-1,
.view-MonthlyArchives .views-field-title { float:left; margin-right:10px}

.view-MonthlyArchives .view-content li,
.view-MonthlyArchives .view-content .item-list
 {clear:both}

jQuery Code:


$(document).ready(function(){
				
				var vMA = $('.view-MonthlyArchives').find('.view-content');
				$(vMA).find('ul').hide();
				
				 $(vMA).find('ul').each(function(){
					var li_count = $(this).find('li').length;
					$(this).prev('h3').append(' (' + li_count + ')');
					});

				$(vMA).find('h3').click(function() {
					$(this).next('ul').slideToggle('fast');
				});

			});

注意:.view-MonthlyAcrchives 是來自 Views 名稱的,你需要修改為正確的。

怎麼增加 jQuery Code ??

最簡單當然是直接貼在版型中啦。也可以另存新檔,在版型 .info 中增加:

scripts[] = scripts.js // 你的檔案名,然後再清除 CACHES 才有效果哦 !!
 

就是這麼簡單,最終效果:

假如你沒能做到,直接匯入 Views Export Code 看看。

“Views 模組:自定一個按月彙整日期收合或展開日期列表功能” 有 4 則迴響

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *