之前写了一个 仿博客园网页端推荐的插入代码插件, 后来在总结一些技术文档时,总是想把一些属性或者方法,参数等,都用表格的形式清晰的列举出来,但是插入的表格太大的话,上下跨度就显得特别大,来回上下滚动的手都抽筋了,于是在之前的基础上,加了一个插入折叠区域的功能。

在这里先列举一下之前那个插入代码插件的改进内容(2015.3.26):

  • 默认会在内容区加载剪贴板的内容,如果从 VS 等其他 IDE 中复制了代码,则打开插件后会自动加载内容到内容区域;
  • 增加制表符替换功能,因为网页上显示一个 TAB 是占了 8 个空格,看起来跑得有点儿远,所以加了一个将 TAB 替换成对应数量的空格;
  • 添加属性 Settings 基类,方便后续对插件属性设置的开发;

下面开始介绍折叠区域功能吧。

一  效果图

插件工具截图:

在 Live Writer 中预览的效果图:

[Tool] 插入折叠区域功能

在博客园中的效果图:

[Tool] 插入折叠区域功能 收缩时

[Tool] 插入折叠区域功能  展开时

二  开发相关说明

方法与插入代码的插件一样,先自己定义一个样式框架,然后往里面对应位置填写动态文本,唯一区别就是,之前仿博客园的插入代码,脚本方法都是博客园自带的,而这次展开和收缩的脚本需要自己实现;

我定义的样式框架如下:

// 折叠区域结构
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.cnblogs.com/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>"
折叠区域框架

相关文章:

  • 2021-07-25
  • 2022-12-23
  • 2022-12-23
  • 2021-05-02
  • 2021-10-11
  • 2021-09-08
  • 2021-05-21
  • 2021-09-16
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-01
  • 2021-09-09
  • 2021-07-29
  • 2022-12-23
相关资源
相似解决方案