自己写的一个类似于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); }); });