Question

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

jQuery Terminal

此处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）

Answer 1

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

但有一种方法可以使用finalize回调函数有效地执行您要查找的内容，如the documentation for echo中所述：

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

这是关键。如果您查看从jQuery Terminal开始的{{3}}内容输出的源HTML，您可以看到它基本上都是一堆echo个元素，宽度为<div>和它里面的ASCII。

100%

因此，当您尝试在下一行的<div style="width: 100%;">      __ _____                     ________                              __</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

神奇的是所有CSS＆amp; jQuery设置CSS。宽度设置为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") ; } });，720px现在设置为右侧，然后text-align设置为margin-top，因此该行正好向上推1行。以下是这些调整的概况截图：

enter image description here

所以对于所有意图和目的，它在视觉上看起来是一样的。这种方法的警告是你永远不能告诉浏览器如何像这样对CSS表现。所以一定要在几个浏览器中测试它。但如果它窒息，只需调整在-1em中设置的CSS，你就应该能够提出一个适用于浏览器的组合。

Answer 2

阅读@JakeGould's answer后，我设法找到了最终的解决方案而无需额外的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选项，我可以使用jQuery在最后<div>添加一些额外的HTML。

Answer 3

发生这种情况的原因是因为忽略了html中的\ n，所有空格字符都被一个空格替换。为了在一个回声中使用此信息，请使用<br />代替\n，或用<div>包裹每一行。这是插入html如何工作，因为终端只是附加原始数据。另一种选择是使用finalize来改变文本文本，如其他答案所示。

回声内容在jQuery终端的同一行

3 个答案: