Extendable Terminal & Console Emulator With jQuery - console.js

File Size: 13 KB
Views Total: 1359
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Extendable Terminal & Console Emulator With jQuery - console.js

console.js is a configurable and extendable terminal emulator that provides a simple way of adding a terminal / command console to your web applications.

How to use it:

1. Download the plugin and then place the console.js file after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.console.js"></script>

2. Create a container element where you'd like to place the terminal / command console.

<div class="console-demo">

3. Call the function on the container element and add your own commands as this:

   if (line == "") return false;
   else return true;
     return [{msg:"=> [12,42]",
             {msg:":: [a]",
    // Let you type until you press a-z
    // Never allow zero.
    return !line.match(/[a-z]+/) && keycode != '0'.charCodeAt(0);

4. Style the terminal / command console in the CSS.

div.console-demo div.jquery-console-inner {
  width: 900px;
  height: 200px;
  background: #333;
  padding: 0.5em;
  overflow: auto

div.console-demo div.jquery-console-prompt-box {
  color: #fff;
  font-family: monospace;

div.console-demo div.jquery-console-focus span.jquery-console-cursor {
  background: #fefefe;
  color: #333;
  font-weight: bold

div.console-demo div.jquery-console-message-error {
  color: #ef0505;
  font-family: sans-serif;
  font-weight: bold;
  padding: 0.1em;

div.console-demo div.jquery-console-message-value {
  color: #1ad027;
  font-family: monospace;
  padding: 0.1em;

div.console-demo div.jquery-console-message-type {
  color: #52666f;
  font-family: monospace;
  padding: 0.1em;

5. All possible configuration options.


  // prompt label
  promptLabel: 'root > ',

  // Welcome message
  welcomeMessage: 'Welcome',

  // Number of columns
  cols: 5,

  // When user hits return, validate whether to trigger commandHandle and re-prompt

  // Handle the command line, return a string, boolean, or list

  // Handle the command completion when the tab key is pressed. 
  // It returns a list of string completion suffixes.

  // Handle the command completion when the tab key is pressed. 

  // Autofocus the terminal

  // Trigger a fade in/out when the console is reset

  // Animate the scroll to top

  // Prompt history

  // Predicate for whether to allow character insertion. 
  // charInsertTrigger(char,line) is called.

  // Handle a user-signaled interrupt

This awesome jQuery plugin is developed by chrisdone. For more Advanced Usages, please check the demo page or visit the official website.