2

我一直在查看jQuery Terminal的文档，但一无所获。基本上，我试图回应以下内容：

jQuery 终端

这里v0.8.7应该是一个链接，但是当我尝试使用.echo(string,{raw:true})ASCII 艺术回显字符串时会失真：

term.echo(
    '      __ _____                     ________                              __\n'+
    '     / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /\n'+
    ' __ / // // // // // _  // _// // / / // _  // _//     // //  \\/ // _ \\/ /\n'+
    '/  / // // // // // ___// / / // / / // ___// / / / / // // /\\  // // / /__\n'+
    '\\___//____ \\\\___//____//_/ _\\_  / /_//____//_/ /_/_/_//_//_/ /_/ \\__\\_\\___/\n'+
    '          \\/              /____/                                     <a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>',
    {raw:true}
);

我尝试使用 2 个单独的 echo 调用，但版本号被推送到新行。如何在不换行的情况下在 ASCII 艺术的末尾添加版本号？

这是我当前的代码：

term.echo(
    '      __ _____                     ________                              __\n'+
    '     / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /\n'+
    ' __ / // // // // // _  // _// // / / // _  // _//     // //  \\/ // _ \\/ /\n'+
    '/  / // // // // // ___// / / // / / // ___// / / / / // // /\\  // // / /__\n'+
    '\\___//____ \\\\___//____//_/ _\\_  / /_//____//_/ /_/ /_//_//_/ /_/ \\__\\_\\___/\n'+
    '          \\/              /____/                                     '
);
term.echo('<a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>',{raw:true});

现场演示：http
://suchmail.eu/Hunpony/djdavid98/cli （使用命令ver）

4

3 回答 3

3

好的，这很有趣。基本上，该函数仅在几种不同的模式下运行，这些模式不会在调用中混合方法。jQuery Terminal echoecho

finalize但是有一种方法可以通过使用回调函数来有效地完成您正在寻找的事情，如文档中所述echo：

finalize — 这是一个带有 div 容器参数的回调函数

那是关键。如果您查看从内容输出的源 HTML，jQuery Terminal您echo会发现它基本上都是一堆<div>宽度为 的元素，其中包含100%ASCII。

<div style="width: 100%;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__&nbsp;_____&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;________&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;__</div>

因此，当您尝试echo在下一行执行此操作时：

term.echo('<a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>',{raw:true});

发生的事情是另一个<div style="width: 100%;">产生了，它把线路打倒了。并且因为它是raw:true它意味着它不能与echo上面的它混合。

但是通过使用finalize并作用于div包含链接的链接，您可以执行以下操作：

term.echo('<a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>',
     { raw:true,
       finalize: function(div) {
          div
         .css("width", "720px")
         .css("text-align", "right")
         .css("margin-top", "-1em")
         ;
       }
     });

神奇的是所有 CSS 和 jQuery 设置 CSS。宽度设置为720px，text-align现在设置为右侧，然后margin-top设置为，-1em因此该行被准确地向上推 1 行。以下是这些调整后的屏幕截图：

在此处输入图像描述

因此，出于所有意图和目的，它在视觉上看起来是一样的。这种方法的警告是你永远无法判断浏览器将如何处理这样的 CSS。所以一定要在几个浏览器中测试它。但是如果它窒息，只需调整设置的 CSS，finalize您应该能够想出一个在浏览器中运行良好的组合。

于 2014-06-22T04:19:29.450 回答
2

在阅读了@JakeGould的答案后，我设法找到了最终解决方案，而无需额外的 CSS。

term.echo(
    '      __ _____                     ________                              __\n'+
    '     / // _  /__ __ _____ ___ __ _/__  ___/__ ___ ______ __ __  __ ___  / /\n'+
    ' __ / // // // // // _  // _// // / / // _  // _//     // //  \\/ // _ \\/ /\n'+
    '/  / // // // // // ___// / / // / / // ___// / / / / // // /\\  // // / /__\n'+
    '\\___//____ \\\\___//____//_/ _\\_  / /_//____//_/ /_/_/_//_//_/ /_/ \\__\\_\\___/\n'+
    '          \\/              /____/                                           '.replace(new RegExp(" {" + (term.version().length+1) + "}$"), ''),
    {finalize: function($div){
        $div.children().last().append('<a href="http://terminal.jcubic.pl/" target="_blank" title="jQueryTerminal Website">v'+term.version()+'</a>')
    }}
);

使用finalize他提到的选项，我能够<div>使用 jQuery 在最后一个 HTML 中添加一些额外的 HTML。

于 2014-06-22T08:54:30.810 回答
2

发生这种情况的原因是因为 html 中的 \n 被忽略，所有空白字符都被替换为一个空格。为了在一个回显中实现这一点，请使用.<br />代替\n或包装每一行<div>。这就是插入 html 的工作方式，因为终端只是附加原始数据。正如其他答案所建议的那样，另一个选项是使用finalize, 来更改文本。

于 2014-06-22T13:36:22.710 回答