用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