Tiny Customizable Terminal Simulator For Websites - jQuery zTerminal
File Size: | 17 KB |
---|---|
Views Total: | 820 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
zTerminal is a simple, lightweight jQuery plugin that adds a configurable, extendable bash terminal to your web applications. The plugin has a few built in base commands, and allows you to easily extend command array in the JavaScript.
How to use it:
1. Load the stylesheet termStyle.css
to style the terminal.
<link rel="stylesheet" href="css/termStyle.css">
2. The HTML structure for the terminal.
<div id="terminal" onclick="document.getElementById('termInput').focus(); return false;"> <p>Welcome to zTerminal 0.2</p> <p>A simple terminal simulator for websites.</p> <p>It is very much a work in progress, started on 2017-5-04. Type in help to see basic commands.</p><br> <ol id="terminalDisp"> </ol> <p>zTerminal@localhost:~ <input type='text' id='termInput' value=''></p> </div>
3. Load jQuery library and the JavaScript file zterm.js
at the bottom of the webpage.
<script src="jquery.min.js"></script> <script src="js/zterm.js"></script>
4. The default commands.
// basic commands array var bc = [ // 0 {title:"help", termResp:" N/A ", helpResp:"This Text" }, //1 {title:"thetime", termResp: Date() , helpResp:"Displays the Date and Time" }, //2 {title:"about", termResp:" Just a Terminal, written by a coder ", helpResp:"About this terminal" }, //3 {title:"contact", termResp:"Want to contact me for some reason? [email protected] ", helpResp:"y contact info" }, //4 {title:"edition", termResp:"Version 0.2 ", helpResp:"The terminal's Version" }, //5 {title:"future", termResp:"Unclear atm ", helpResp:"What to expect" }, //6 {title:"sauce", termResp:"I want that Mulan McNugget sauce, Morty! That's my series arc, Morty! If it takes nine seasons, I want my McNugget... dipping sauce Szechuan sauce, Morty! ", helpResp:"Dry Nuggets" }, //7 {title:"slurms", termResp:"Whimmy Wham Wham Wozzel", helpResp:"The Original Party Worm!" }, //8 {title:"clear", termResp:"N/a ", helpResp:"Clears the screen" } ]; // end of basic commands array
This awesome jQuery plugin is developed by DigitalOccult. For more Advanced Usages, please check the demo page or visit the official website.