[Tool] 插入折疊區域功能

之前寫了一個仿博客園網頁端推薦的插入代碼插件, 后來在總結一些技術文檔時，總是想把一些屬性或者方法，參數等，都用表格的形式清晰的列舉出來，但是插入的表格太大的話，上下跨度就顯得特別大，來回上下滾動的手都抽筋了，于是在之前的基礎上，加了一個插入折疊區域的功能。

在這里先列舉一下之前那個插入代碼插件的改進內容（2015.3.26）：

默認會在內容區加載剪貼板的內容，如果從 VS 等其他 IDE 中復制了代碼，則打開插件后會自動加載內容到內容區域；
增加制表符替換功能，因為網頁上顯示一個 TAB 是占了 8 個空格，看起來跑得有點兒遠，所以加了一個將 TAB 替換成對應數量的空格；
添加屬性 Settings 基類，方便后續對插件屬性設置的開發；

下面開始介紹折疊區域功能吧。

一效果圖

插件工具截圖：

在 Live Writer 中預覽的效果圖：

在博客園中的效果圖：

收縮時

展開時

二開發相關說明

方法與插入代碼的插件一樣，先自己定義一個樣式框架，然后往里面對應位置填寫動態文本，唯一區別就是，之前仿博客園的插入代碼，腳本方法都是博客園自帶的，而這次展開和收縮的腳本需要自己實現；

我定義的樣式框架如下：

// 折疊區域結構
private static string FoldCodeFrame =
    "<div class=\"memento_fold\">" +
        "<div class=\"memento_tool\" id=\"memento_header_{0}\">" +
            "<span id=\"memento_tag_{0}\" style=\"cursor: text; color: black; font-weight: bold;\" title=\"區域名稱\">{1}</span>" +
            "<span><a href=\"http://www.rzrgm.cn/memento\" title=\"MementoTool V1.0.0\">?</a></span>" +
            "<span id=\"memento_show_{0}\" style=\"float: right;\" title=\"展開\" onclick=\"memento_fold_show('{0}', '{2}', '{4}', '{6}')\">{2}</span>" +
        "</div>" +
        "<div id=\"memento_box_{0}\" class=\"memento_box\">{3}" +
        "</div>" +
        "<div class=\"memento_tool\" style=\"display: none\" id=\"memento_footer_{0}\">" +
            "<span><a href=\"#memento_tag_{0}\" title=\"返回折疊區域頂部（區域名稱位置處）\">{5}</a></span>" +
            "<span style=\"float: right;\" title=\"隱藏\" onclick=\"memento_fold_show('{0}', '{2}', '{4}', '{6}')\">{4}</span>" +
        "</div>" +
    "</div>"

折疊區域框架

其中 {0} 依舊是 GUID 生成的標識符，{1}{2}{3}{4}{5}{6} 則是對應第一張圖上標注的順序；

我自己定義的框架樣式 CSS 如下：

.memento_fold{
    margin: 10px
    background-color: #FFE6B3
}
.memento_tool{
    font-family: Courier New!important
    color: #0080FF
    font-size: 10pt
    border: #ccc dashed 1px
    border-color: purple
    padding-top: 3px
    padding-bottom: 3px
    padding-right: 5px
    padding-left: 5px
}
.memento_tool a:link, .memento_tool a:visited, .memento_tool a:active{
    color: #0080FF
    text-decoration: none
}
.memento_tool span{
    cursor: pointer
    margin-left: 5px
}
.memento_box {
    border: blue groove 1px
    margin: 5px
    padding: 5px
    background-color: #f5f5f5
    display: none
    overflow: auto
}

CSS樣式

展開和收縮的腳本代碼如下：

var showTagStr, hiddenTagStr, maxHeight
var showBtn, contentPart, footerPart
function $M_Get(element){
    return element = document.getElementById(element)
}
function $M_Show(){
    var h = contentPart.offsetHeight
    function dmove(){
        if(h >= maxHeight){
            contentPart.style.height = maxHeight+'px'
            clearInterval(iIntervalId)
        }
        else{
            h += 20; //設置層展開的速度
            contentPart.style.display = 'block'
            footerPart.style.display = "block"
            contentPart.style.height = h+'px'
        }
    }
    iIntervalId = setInterval(dmove , 5)
}
function $M_Hide(){
    var h = contentPart.offsetHeight
    function dmove(){
        if(h <= 0){
            contentPart.style.display='none'
            footerPart.style.display = "none"
            clearInterval(iIntervalId)
        }
        else{
            h -= 20;//設置層收縮的速度
            contentPart.style.height = h+'px'
        }
    }
    iIntervalId = setInterval(dmove,5)
}
function $M_Fold(targetid,objN, footerid){
    contentPart = $M_Get(targetid)
    showBtn = $M_Get(objN)
    footerPart = $M_Get(footerid)
    if (contentPart.style.display == "block"){
        $M_Hide()
        showBtn.innerHTML = showTagStr
    }
    else {
        $M_Show(targetid)
        showBtn.innerHTML = hiddenTagStr
    }
}

// id是標識區域唯一的標志，在代碼里由GUID生成，
// showTag是"展開"處文本
// hiddenTag是"隱藏"處文本
// maxh是折疊內容的最大高度，超過時則顯示滾動條
function memento_fold_show(id, showTag, hiddenTag, maxh)
{
    showTagStr = showTag
    hiddenTagStr = hiddenTag
    maxHeight = maxh
    $M_Fold("memento_box_"+id, "memento_show_"+id, "memento_footer_"+id)
}

View Code

沒開發過 JS+CSS，這些都是在網上邊查資料邊實現的，權當自娛自樂了；腳本內容很簡單易懂（因為連我這個菜鳥都會用了^_^），所以貼出來代碼就不再解釋了；

三使用說明

將之前的 CSS 代碼貼到博客園-設置-頁面定制CSS代碼那兒；

將之前的 JavaScript 代碼貼到博客園-設置-頁首Html代碼那兒；

我自己則是直接上傳一個 CSS 文件和一個 JavaScript 文件，然后在博客園-設置-頁腳 Html 代碼添加這兩個文件的引用，如下所示，都是可以的，條條道路通羅馬嘛。

<style type="text/css">
    @import url(http://files.cnblogs.com/files/memento/foldpart.css);
</style>
<script type="text/javascript" language="javascript" src="https://files.cnblogs.com/files/memento/foldpart.js"></script>

然后將我開發的 dll 拷貝到 Live Writer 目錄下的 Plugins 文件夾里，運行 Live Writer 就可以使用了；

四資源下載

posted @ 2015-03-29 19:15 01星河閱讀(1127) 評論(1) 收藏舉報

刷新頁面返回頂部

01星河

十里風雨，二兩酒。

[Tool] 插入折疊區域功能

一效果圖

二開發相關說明

三使用說明

四資源下載

公告

01星河

十里風雨，二兩酒。

[Tool] 插入折疊區域功能

一 效果圖

二 開發相關說明

三 使用說明

四 資源下載

公告

十里風雨，二兩酒。

一效果圖

二開發相關說明

三使用說明

四資源下載