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">
</div>

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

$('.console').console({
  commandValidate:function(line){
   if (line == "") return false;
   else return true;
  },
  commandHandle:function(line){
     return [{msg:"=> [12,42]",
              className:"jquery-console-message-value"},
             {msg:":: [a]",
              className:"jquery-console-message-type"}]
  },
  charInsertTrigger:function(keycode,line){
    // 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.

$('.console').console({

  // 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
  commandValidate:function(){},

  // Handle the command line, return a string, boolean, or list
  commandHandle:function(){},

  // Handle the command completion when the tab key is pressed. 
  // It returns a list of string completion suffixes.
  completeHandle:function(){},

  // Handle the command completion when the tab key is pressed. 
  completeIssuer:function(){},

  // Autofocus the terminal
  autofocus:true,

  // Trigger a fade in/out when the console is reset
  fadeOnReset:true,

  // Animate the scroll to top
  animateScroll:true,

  // Prompt history
  promptHistory:true,

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

  // Handle a user-signaled interrupt
  cancelHandle:function(){},
  
});

---

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