JQuery写的类似于CMD的页面

自制CMD界面教程

最新推荐文章于 2025-09-08 16:59:44 发布

原创最新推荐文章于 2025-09-08 16:59:44 发布 · 473 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #shell #ViewUI

JavaScript文章同时被 2 个专栏收录

19 篇文章

订阅专栏

JQuery文章

12 篇文章

订阅专栏

自己写的一个类似于CMD的页面，供有需要的参考

1、HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="../../css/content.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/default/om-default.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/form_style.css"/>
		<script type="text/javascript" src="../../script/jquery.min.js"></script>
		<script type="text/javascript" src="../../script/operamasks-ui.min.js"></script>
		<script type="text/javascript" src="../../script/util.js"></script>
		<script type="text/javascript" src="../../script/shell/shell.js"></script>
	</head>
	<body>
		<div align="center">
			<br/><br/>
			<div id="result_div" class="result_div" align="left"></div>
			<div id="command_div" class="command_div" align="left">
				<div class="shell_input_div">
					shell><input name="shell_command" class="shell_input" type="text" />
				</div>
			</div>
			<div id="resultContextMenu"></div>
			<div id="commandContextMenu"></div>
		</div>
	</body>
</html>

2、JS代码

$(document).ready(function()
{
	// 记录已经输入的命令
	var commandArr = [];
	
	// 当前索引，用于回忆已经输入的命令
	var index = 0;
	
	// 设置父页面iframe高度
	parent.setIframeHeight("htmlshellshellhtml", 500);
	
	// 命令输入框
	var html = '<div class="shell_input_div">';
	html += 'shell>';
	html += '<input name="shell_command" class="shell_input" type="text" />';
	html += '</div>';
	
	// shell命令输入框获得焦点
	$('input[name=shell_command]').focus();
	
	// 输出结果框滚动条
	$("#result_div").omScrollbar(
	{
        thick:10
    });
	
	// 命令框滚动条
	$("#command_div").omScrollbar(
	{
        thick:10
    });
	
	// shell命令输入框回车事件
	$('input[name=shell_command]').keydown(function(event)
	{
		inputKeyDown(event);
	});
	
	// 输入框键盘事件
	var inputKeyDown = function(event)
	{
		// 回车
		if (13 == event.keyCode)
		{
			getShellResult();
		}
		// 上翻
		else if (38 == event.keyCode)
		{
			if(commandArr.length > 0)
			{
				// 把回忆到的命令放到输入框
				$('input[name=shell_command]').val(commandArr[index--]);
				
				// 更新索引
				if(0 > index)
				{
					index = commandArr.length - 1;
				}
			}
		}
		// 下翻
		else if (40 == event.keyCode)
		{
			if(commandArr.length > 0)
			{
				// 把回忆到的命令放到输入框
				$('input[name=shell_command]').val(commandArr[index++]);
				
				// 更新索引
				if(index >= commandArr.length)
				{
					index = 0;
				}
			}
		}
	}
	
	// 获取查询结果并显示到页面
	var getShellResult = function()
	{
		// 获取输入框值
		var value = $('input[name=shell_command]').val();
		
		// 如果值不为空则执行查询命令
		if(!isEmpty(value))
		{
			// 查询该shell命令
			$.ajax(
			{
				type : 'POST',
				url : '../../shell/getShell',
				data : "shellCommand=" + value,
				success : function(msg)
				{
					// 把命令放到上下文中用于上下键翻的时候使用
					commandArr.push(value);
					index = commandArr.length - 1;
					
					// 替换成页面换行标签
					if(!isEmpty(msg))
					{
						msg = msg.replace(/\r\n/g, "<br/>").replace(/\n/g, "<br/>");
					}
					
					// 更新输入框父级层的内容
					var parDiv = $('input[name=shell_command]').parent();
					parDiv.empty();
					parDiv.append("shell>" + value);
					
					// 更新总层的内容
					var pparDiv = parDiv.parent();
					pparDiv.append(html);
					
					// 新添加的文本框绑定回车事件
					$('input[name=shell_command]').keydown(function(event)
					{
						inputKeyDown(event);
					});
					
					// 滚动条始终保持在最底部
					setScroll("command_div");
					
					// 展示在界面上
					var html_result = '<div class="shell_result_div">';
					html_result += '<span>请求的shell命令：</span><br/>';
					html_result += '<span>';
					html_result += value;
					html_result += '</span><br/>';
					html_result += '<span>响应的结果：</span><br/>';
					html_result += '<span>';
					html_result += msg;
					html_result += '</span><br/>';
					html_result += '<hr/>';
					html_result += '</div>';
					$("#result_div").append(html_result);
					
					// 设置滚动条始终在最底部
					setScroll("result_div");

					// 新添加的文本框获得焦点
					$('input[name=shell_command]').focus();
				},
				error : function(XMLHttpRequest, textStatus, errorThrown)
				{
					// 提示数据加载失败
					$.omMessageBox.alert(
					{
				        type : 'error',
				        title : '友情提示',
				        content : '数据获取失败，请重试',
				        onClose : function(value)
				        {
				        	// 输入框获得焦点
							$('input[name=shell_command]').focus();
				        }
				    });
				}
			});
		}
	}
	
	// 设置滚动条始终在最底部
	var setScroll = function(divID)
	{
		$("#" + divID).omScrollbar('refresh');
		$("#" + divID).scrollTop($("#" + divID)[0].scrollHeight);
	}
	
	// shell命令结果右键菜单
	$('#resultContextMenu').omMenu(
	{
        contextMenu : true,
        dataSource : 
        [
 			{
 				id : 'clear',
 				label : '清空结果',
 				icon : '../../images/clear.png'
 			}
 		],
 		onSelect : function(item, event)
 		{
 			// 清空层内容
 			$('#result_div').empty();
 			
 			// 刷新滚动条
			$("#result_div").omScrollbar('refresh');
        }
    });

	// shell命令层右键菜单
	$('#commandContextMenu').omMenu(
	{
        contextMenu : true,
        dataSource : 
        [
 			{
 				id : 'clear',
 				label : '清空命令',
 				icon : '../../images/clear.png'
 			}
 		],
 		onSelect : function(item, event)
 		{
 			// 清空层内容只保留一个输入框
 			$('#command_div').empty();
			$('#command_div').append(html);

 			// 刷新滚动条
			$("#command_div").omScrollbar('refresh');
			
			// 输入框获得焦点
			$('input[name=shell_command]').focus();
			
			// 新添加的文本框绑定回车事件
			$('input[name=shell_command]').keydown(function(event)
			{
				inputKeyDown(event);
			});
        }
    });
	
	// 绑定在结果层上
	$('#result_div').bind('contextmenu', function(e)
	{
		// 显示右键菜单
		$('#resultContextMenu').omMenu('show', e);
	});

	// 绑定在命令层上
	$('#command_div').bind('contextmenu', function(e)
	{
		// 显示右键菜单
		$('#commandContextMenu').omMenu('show', e);
	});
});