用Redmine的Macro优化其wiki页面 (jQuery使用)
概要
本文说明了如何用Redmine的Macro功能结合jQuery和jQueryUI优化Redmine的wiki页面的显示。
以下代码均为在 ${redmine_root}\lib\redmine\wiki_formatting\macros.rb 文件中追加macro实现。
Redmine版本为: 0.8.1
环境配置
在 ${redmine_root}\public\javascripts 文件夹中加入 jquery-1.3.2.min.js 和 jquery-ui-1.7.1.custom.min.js库。
在 ${redmine_root}\public\stylesheets 文件夹中加入 jqueryui 的主题CSS,比如cupertino。
jqueryUI相关的CSS和JS库请在jqueryui.com 下载。
每日工作情况一览表
脚本:
desc "Add accordion in wiki Daily Report page."
macro :accordion_script do |obj, args|
<<"EOB"
<div id="linkDailyReport"></div>
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/cupertino/jquery-ui-1.7.1.custom.css" />
<script type="text/javascript" src="/javascripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
var $j = jQuery;
$j(function(){
var index = 0;
$j("#divWiki p").each(function(i){
if (this.innerHTML.toLowerCase().indexOf("<script ") >= 0) {
return;
}
var linkText = $j(this).text();
if (linkText.search("^2009") == 0) {
var strYear = linkText.substr(0,4);
var strMonth = linkText.substr(5,2);
var month = strYear + "-" + strMonth;
var monthId = "#" + month;
if ($j(monthId).length == 0) {
$j("#linkDailyReport").append('<h3><a href="#">' + strYear + '-' + strMonth + '</a></h3><div id="' + month + '"></div>');
index++;
}
$j(monthId).append('<p>' + $j(this).html() + '</p>');
$j(this).remove();
}
});
$j("#linkDailyReport").accordion({
autoHeight: false
});
$j("#linkDailyReport").accordion('activate', index - 1);
});
</script>
EOB
end
使用方法:
h1. 作業日報 {{accordion_script}} [[作業日報テンプレート]] [[2009-03-18(水)作業日報]] [[2009-03-19(木)作業日報]] [[2009-03-23(月)作業日報]] [[2009-03-24(火)作業日報]] [[2009-03-25(水)作業日報]] [[2009-03-26(木)作業日報]] [[2009-03-27(金)作業日報]] [[2009-03-30(月)作業日報]] [[2009-03-31(火)作業日報]] [[2009-04-01(水)作業日報]] [[2009-04-02(木)作業日報]] [[2009-04-03(金)作業日報]] [[2009-04-06(月)作業日報]] .........
效果图:
在wiki页面的H2、H3上加上编号和索引
脚本:
desc "set section number for h2 h3"
macro :section_number do |obj, args|
<<"EOB"
<script type="text/javascript" src="/javascripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
var $j = jQuery;
var space = " ";
var countH2 = 0;
var countH3 = 0;
$j(".heading2,.heading3").each(function(i) {
if (this.className == "heading2") {
countH2++;
$j(this).prepend(countH2 + space);
countH3 = 0;
} else {
countH3++;
$j(this).prepend(countH2 + "." + countH3 + space);
}});
countH2 = 0;
countH3 = 0;
$j(".wiki h2,.wiki h3").each(function(i) {
if (this.tagName.toLowerCase() == "h2") {
countH2++;
$j(this).prepend(countH2 + space);
countH3 = 0;
} else {
countH3++;
$j(this).prepend(countH2 + "." + countH3 + space);
}});
</script>
EOB
end