Lucifr

分享网络、博客、软件及其它趣事

jQuery + CSS 打造一个可伸展的代码框

| Comments

长久以来，长代码的换行就一直困扰着我。有一段时间我曾经使用 SyntaxHighlighter 这个代码高亮插件，它的 v2 版本可以做到对长代码的自动换行，可效果欠佳，时常出现换行不正常的情况。

最近看到的这篇教程，介绍了如何利用 jQuery 制作一个鼠标悬停时可以自动伸展的代码框。

Lucifr 针对这个方案进行了一点点优化，主要是当代码行的长度超出了伸展后的框的长度时，会自动出现水平方向的滚动条；此外 Lucifr 研究了半天才发现在更新版的 jQuery 为了避免冲突要把其中所有的 $ 都替换成 jQuery 才行。

以下是这个方案的几个部分：

  1. 一个 js 文件，包含以下代码（Thanks to Kars for mods），可保存为 extend.js：

    (function ($) {
    $("pre:not([name='code'])").wrapInner("<span></span>");

$("pre").hover(function() {
    var contentwidth = $(this).contents().width();
    var blockwidth = $(this).width();       
    if(contentwidth > blockwidth) {
        $(this).stop().animate({ width: '950px' }, 250, function(){$(this).css("overflow","auto");});
        }
    }, function() {
        $(this).stop().animate({ width: '597px' }, 250, function(){$(this).css("overflow","hidden");});
});
})(jQuery);

    以上代码中 950px 是伸展后的最大宽度，597px 是当前正文部分的宽度，可以根据实际情况自行修改。

  2. 在 </body> 标签之前载入这个 js：

    <script src="http://js所在路径/extend.js" type="text/javascript"></script>

  3. CSS 里对 <pre> 元素样式的一些设定：

    pre {
    overflow: hidden; 
    z-index: 999;
}

OK，效果嘛，可见本文。

Comments