功能完整的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 positionedabsolute
orrelative
. -
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/