This time I will share jQuery Plugin and tutorial about Extendable Terminal & Console Emulator With jQuery – console.js, hope it will help you in programming stack.
| File Size: | 13 KB |
|---|---|
| Views Total: | 1028 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.console.js"></script> |
2. Create a container element where you’d like to place the terminal / command console.
1 |
<div class="console-demo"> |
2 |
</div> |
3. Call the function on the container element and add your own commands as this:
01 |
$('.console').console({ |
02 |
commandVali<a href="https://www.jqueryscript.net/time-clock/">date</a>:function(line){ |
03 |
if (line == "") return false; |
04 |
else return true; |
05 |
}, |
06 |
commandHandle:function(line){ |
07 |
return [{msg:"=> [12,42]", |
08 |
className:"jquery-console-message-value"}, |
09 |
{msg:":: [a]", |
10 |
className:"jquery-console-message-type"}] |
11 |
}, |
12 |
charInsertTrigger:function(keycode,line){ |
13 |
// Let you type until you press a-z |
14 |
// Never allow zero. |
15 |
return !line.match(/[a-z]+/) && keycode != '0'.charCodeAt(0); |
16 |
} |
17 |
}); |
4. Style the terminal / command console in the CSS.
01 |
div.console-demo div.jquery-console-inner { |
02 |
width: 900px; |
03 |
height: 200px; |
04 |
background: #333; |
05 |
padding: 0.5em; |
06 |
overflow: auto |
07 |
} |
08 |
09 |
div.console-demo div.jquery-console-prompt-box { |
10 |
color: #fff; |
11 |
font-family: monospace; |
12 |
} |
13 |
14 |
div.console-demo div.jquery-console-focus span.jquery-console-cursor { |
15 |
background: #fefefe; |
16 |
color: #333; |
17 |
font-weight: bold |
18 |
} |
19 |
20 |
div.console-demo div.jquery-console-message-error { |
21 |
color: #ef0505; |
22 |
font-family: sans-serif; |
23 |
font-weight: bold; |
24 |
padding: 0.1em; |
25 |
} |
26 |
27 |
div.console-demo div.jquery-console-message-value { |
28 |
color: #1ad027; |
29 |
font-family: monospace; |
30 |
padding: 0.1em; |
31 |
} |
32 |
33 |
div.console-demo div.jquery-console-message-type { |
34 |
color: #52666f; |
35 |
font-family: monospace; |
36 |
padding: 0.1em; |
37 |
} |
5. All possible configuration options.
01 |
$('.console').console({ |
02 |
03 |
// prompt label |
04 |
promptLabel: 'root > ', |
05 |
06 |
// Welcome message |
07 |
welcomeMessage: 'Welcome', |
08 |
09 |
// Number of columns |
10 |
cols: 5, |
11 |
12 |
// When user hits return, validate whether to trigger commandHandle and re-prompt |
13 |
commandValidate:function(){}, |
14 |
15 |
// Handle the command line, return a string, boolean, or list |
16 |
commandHandle:function(){}, |
17 |
18 |
// Handle the command completion when the tab key is pressed. |
19 |
// It returns a list of string completion suffixes. |
20 |
completeHandle:function(){}, |
21 |
22 |
// Handle the command completion when the tab key is pressed. |
23 |
completeIssuer:function(){}, |
24 |
25 |
// Autofocus the terminal |
26 |
autofocus:true, |
27 |
28 |
// Trigger a fade in/out when the console is reset |
29 |
fadeOnReset:true, |
30 |
31 |
// Animate the scroll to top |
32 |
animate<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>:true, |
33 |
34 |
// Prompt history |
35 |
promptHistory:true, |
36 |
37 |
// Predicate for whether to allow character insertion. |
38 |
// charInsertTrigger(char,line) is called. |
39 |
charInsertTrigger:function(){}, |
40 |
41 |
// Handle a user-signaled interrupt |
42 |
cancelHandle:function(){}, |
43 |
|
44 |
}); |
This awesome jQuery plugin is developed by chrisdone. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
