| 给按钮、链接等控件增加快捷键的控件 |
|
|
|
作者：佚名 文章来源：不详 点击数： 更新时间：2006-12-6 1:11:00  |
给按钮、链接等控件增加快捷键的控件
给按钮、链接等控件增加快捷键的控件
肯定有这样子的需求：我们希望能用快捷键代替鼠标点击做一些事情，例如一个典型的应用就是论坛上常用的Ctrl + Enter 快捷发帖子。就以Ctrl+Enter快捷发帖子为例，实质上呢，就是通过js脚本，捕获系统的onkeyup事件，判断event.ctrlKey是否为true并且event.keyCode为13，如果满足这个条件，那么就调用按钮对象的click()方法，等同于用鼠标去点击按钮。写个简单的示例代码：
<html>
<head>
<title> 快捷键提交示例代码 </title>
<link rel="stylesheet" href=’css/style.css’ type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="宝玉" />
<script language="JavaScript" type="text/javascript">
<!--
// 快捷键响应
// targetObj: 目标对象，如果满足快捷键条件，触发目标对象的click事件
// ctrlKey: 是否按住了Ctrl组合键
// shiftKey: 是否按住了Shift组合键
// altKey: 是否按住了Alt组合键
// keycode: 按键对应的数值
function Hotkey(event, targetObj, ctrlKey, shiftKey, altKey, keycode)
{
if (
targetObj
&& event.ctrlKey == ctrlKey
&& event.shiftKey == shiftKey
&& event.altKey == altKey
&& event.keyCode == keycode
)
targetObj.click();
}
function fnKeyup(event)
{
var b = document.getElementById("myButton");
Hotkey(event, b, true, false, false, 13);
}
// 捕获系统的Keyup事件
// 如果是Mozilla系列浏览器
if (document.addEventListener)
document.addEventListener("keyup",fnKeyup,true);
else
document.attachEvent("onkeyup",fnKeyup);
//-->
</script>
</head>
<body>
<form method="get" action="no.aspx">
<input type="submit" id="myButton"/>
Ctrl + Enter
</form>
</body>
</html>
上面的脚本可以方便的给指定的按钮加上快捷键。如果现在我们希望应用到我们的服务器端控件当中去，例如Button、Linkbutton、Hyperlink等，因为控件的ID各不相同，而且所对应的快捷键也各不相同，那么我们就需要写一个控件来给他们添加快捷键了。
想想这个控件需要哪些属性？
TargetControlID:string：既然是给其他控件绑定的，那么所要绑定的目标控件ID是少不了了，根据这个控件ID，我们才能确定一个控件，才能知道它输出时的客户端ID，才能根据客户端ID来在脚本里面确定这个对象。
CtrlKey:bool：判断是否用到Ctrl组合键
ShiftKey:bool：判断是否用到Shift组合键
AltKey:bool：判断是否用到Alt组合键
KeyCode:int：和DHTML里面的event.keyCode对应的，例如Enter的keyCode是13。（注：其实这个不是很友好，因为用的时候还要找一下键盘各个按键和keyCode的对应关系，如果结合一个快捷键设置的控件就比较完美了）
Text:string：可能顺便需要一点文字说明什么的
相对来说，这是一个比较简单的用户自定义控件应用，创建一个名字为HotKey的类，继承自System.Web.UI.Controls。根据目标控件ID查找控件对象：this.cachedTargetControl = this.NamingContainer.FindControl(this.TargetControlID);
根据上面属性，我们就可以生成相应的客户端脚本了，然后在重写控件的OnPreRender事件中使用RegisterClientScriptBlock方法输出脚本。
代码相对比较简单：
using System;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.Design;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
namespace CommunityServer.Controls
{
/// <summary>
/// hotkey
/// author: dotey
/// http://www.communityserver.cn
/// </summary>
public class Hotkey : Control
{
private static readonly String scriptKey = "CommunityServer.Controls.Hotkey";
public Hotkey()
{
}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender (e);
string hotkeyFunctionScript = @"
<script>
function Hotkey(event, targetObj, ctrlKey, shiftKey, altKey, keycode)
{
if (
targetObj
&& event.ctrlKey == ctrlKey
&& event.shiftKey == shiftKey
&& event.altKey == altKey
&& event.keyCode == keycode
)
targetObj.click();
}
</script>
";
if ( !Page.IsClientScriptBlockRegistered( scriptKey ) )
{
this.Page.RegisterClientScriptBlock( scriptKey, hotkeyFunctionScript );
}
string key = scriptKey + "-" + targetControl.ClientID;
if ( targetControl != null && !Page.IsClientScriptBlockRegistered( key ) )
{
this.Page.RegisterClientScriptBlock( key, CreateScript() );
}
}
protected override void Render(HtmlTextWriter writer)
{
base.Render (writer);
writer.Write(this.Text);
}
/// <summary>
/// 根据属性生成相关脚本
/// </summary>
/// <returns></returns>
private string CreateScript()
{
if ( targetControl == null )
return "";
string functionName = string.Format("fn{0}Keyup", targetControl.ClientID);
StringBuilder s = new StringBuilder();
s.Append("<script>\n");
s.AppendFormat("function {0}(event)\n", functionName);
s.Append("{\n");
s.AppendFormat("\tvar b = document.getElementById(’{0}’);\n", targetControl.ClientID);
s.AppendFormat("\tHotkey(event, b, {0}, {1}, {2}, {3});\n",
this.CtrlKey.ToString().ToLower(),
this.ShiftKey.ToString().ToLower(),
&nbs[1] [2] [3] 下一页
|
| 文章录入：wuyongjian 责任编辑：wuyongjian |
|
上一篇文章： 绑定填充comobox控件
下一篇文章： 自定义控件主题风格使用 |
| 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
