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

长久以来,长代码的换行就一直困扰着我。有一段时间我曾经使用 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,效果嘛,可见本文

Lucifr

Read more posts by this author.

Beijing, China http://lucifr.com