功能完整的jQuery终端插件:JQConsole

jopen 11年前

jq-console 是一功能完整的jQuery终端插件,采用 CoffeeScript 编写。这个插件经测试支持以下浏览器:

  • IE 9+
  • Chrome 10+
  • Firefox 4+
  • Opera 11+
  • iOS 4+

Echo 示例
    /* The console container element */      #console {        position: absolute;        width: 400px;        height: 500px;        background-color:black;      }      /* The inner console element. */      .jqconsole {          padding: 10px;      }      /* The cursor. */      .jqconsole-cursor {          background-color: gray;      }      /* The cursor color when the console looses focus. */      .jqconsole-blurred .jqconsole-cursor {          background-color: #666;      }      /* The current prompt text color */      .jqconsole-prompt {          color: #0d0;      }      /* The command history */      .jqconsole-old-prompt {          color: #0b0;          font-weight: normal;      }      /* The text color when in input mode. */      .jqconsole-input {          color: #dd0;      }      /* Previously entered input. */      .jqconsole-old-input {          color: #bb0;          font-weight: normal;      }      /* The text color of the output. */      .jqconsole-output {          color: white;      }

    <div id="console"></div>      <script src="jquery.js" type="text/javascript" charset="utf-8"></script>      <script src="jqconsole.js" type="text/javascript" charset="utf-8"></script>      <script>        $(function () {          var jqconsole = $('#console').jqconsole('Hi\n', '>>>');          var startPrompt = function () {            // Start the prompt with history enabled.            jqconsole.Prompt(true, function (input) {              // Output input with the class jqconsole-output.              jqconsole.Write(input + '\n', 'jqconsole-output');              // Restart the prompt.              startPrompt();            });          };          startPrompt();        });      </script>

安装

    $(div).jqconsole(welcomeString, promptLabel, continueLabel); 

  • div is the div element or selector. Note that this element must be explicity sized and positioned absolute or relative.
  • welcomeString is the string to be shown when the terminal is first rendered.
  • promptLabel is the label to be shown before the input when using Prompt().
  • continueLabel is the label to be shown before the continued lines of the
    input when using Prompt().

http://replit.github.io/jq-console/