用Redmine的Macro优化其wiki页面 (jQuery使用)

用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 = "&nbsp;";        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