自己写的一个类似于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);
});
});
相关推荐
另外除了注册页面也非常详细的数据验证，其他页面如添加活动页面基本没有数据验证（不想重复劳动，代码基本非常类似）. 代码中用到了较多的jQuery和部分Ajax（借助jQuery实现），在阅读代码的时候如果不熟悉jQuery...
sea.js也提供了类似的`config`方法来处理非CMD模块，类似于require.js的`shim`。 总的来说，AMD和CMD在模块化开发中各有优势。AMD更适用于大型项目，尤其是需要动态加载和按需加载的场景，而CMD则更适合小规模的、...
在ASP.NET页面的`<head>`标签中，添加对jQuery和wijmo库的引用。确保这些文件与你的网页在同一目录结构下，或者通过CDN链接获取： ```html <script src="path/to/jquery.min.js"> ...
通过上述步骤，我们可以构建一个类似于百度的分页系统，既能高效地处理大数据，又能提供良好的用户体验。在实际开发中，还需要考虑错误处理、用户体验优化和性能测试等细节，以确保分页功能的稳定性和效率。
1. **模块化开发**：Seajs 提供了类似于 Node.js 的模块加载机制，允许开发者将代码分解为多个模块，每个模块都有自己的作用域，避免全局变量污染，提高代码可维护性。 2. **CMD（Common Module Definition）规范**...
3. **修改操作**：类似添加，用户编辑数据后，Ajax 将更新后的数据发送到服务器。服务器执行 SQL 更新语句，然后返回更新结果。客户端接收到响应后，更新显示的数据。 在提供的文件列表中，我们看到 `index.asp` 和...
Node.js是JavaScript的服务器端实现，而Cheerio则是一个JavaScript库，用于快速、高效地处理HTML文档，类似于jQuery在浏览器中的作用。Cheerio允许开发者使用熟悉的jQuery语法来解析和操作HTML页面，这对于Web爬虫来...
3. **CMD（Common Module Definition）**：CMD是SeaJS提出的，与AMD类似，也支持异步加载，但推崇依赖就近原则，即延迟执行依赖。CMD的`require()`函数会自动处理依赖。 4. **UMD（Universal Module Definition）**...
3. **搜索**：BeautifulSoup支持CSS选择器，可以使用类似jQuery的语法来选取元素，这对于熟悉前端开发的开发者来说非常友好。 4. **修改文档**：除了读取，还可以通过BeautifulSoup修改解析树，比如改变元素的属性...
Kissy的DOM模块提供了类似于jQuery的接口，如`query`用于选择元素，`append`用于插入内容，`hide`和`show`用于控制元素可见性。 5. **时间线管理**：为了同步多个动画，可以使用Kissy的时间线管理工具。通过创建和...
ExtJS 提供了`Ext.select()`方法，类似于jQuery的选择器，可以方便地选取一组DOM元素，并返回Element的数组。 6. 响应事件 在ExtJS中，事件处理通常通过`addListener()`方法（或简写为`on()`)实现，可以为组件或...
这一过程主要依赖于JavaScript或AJAX来实现前端的实时更新，同时后台需要提供接口返回对应级别的数据。 在ASP.NET中，DropDrownList控件是用于创建下拉列表的常用组件。我们首先要在页面上创建三个DropDrownList...
Sea.js遵循CMD（Common Module Definition）规范，与Node.js的模块系统类似，允许通过`require`引入模块，`exports`或`module.exports`导出接口。这种模块化的方式有助于代码的分隔、复用和维护，使得大型项目管理变...