[译]使用jQuery在ASP.NET超链接控件上实现快捷键
快捷键是Gmail和Windows Live Mail这些流行的Web应用程序的一个特性，用来在执行普通的操作时节省时间，不用再在键盘和鼠标之间来回切换。在这篇短文中，我会演示一个如何用jQuery在ASP.NET超链接控件上实现快捷键。
注意：为了演示方便，我把jQuery代码与前台代码放到同一页面上。理想情况下，为了便于维护这些资源，应当把它放到一个单独的文件夹下。
让我们快速进入解决方案，看看如何使用jQuery在ASP.NET超链接控件上实现快捷键
代码<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Implement KeyBoard Shortcuts on Hyperlinks</title>
<script type='text/javascript'
src='../Scripts/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
$(function() {
$(document).keyup(function(e) {
var key = (e.keyCode ? e.keyCode : e.charCode);
switch (key) {
case 49:
navigateUrl($('a[id$=linkA]'));
break;
case 50:
navigateUrl($('a[id$=linkB]'));
break;
case 51:
navigateUrl($('a[id$=linkC]'));
break;
default: ;
}
});
function navigateUrl(jObj) {
window.location.href = $(jObj).attr("href");
alert("Navigating to " + $(jObj).attr("href"));
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="tableDiv">
<h2>Use Keyboard Keys 1, 2 or 3 to invoke respective
websites</h2><br />
<asp:HyperLink ID="linkA" runat="server"
NavigateUrl="http://www.dotnetcurry.com">
DotNetCurry</asp:HyperLink><br /><br />
<asp:HyperLink ID="linkB" runat="server"
NavigateUrl="http://www.sqlservercurry.com">
SqlServerCurry</asp:HyperLink><br /><br />
<asp:HyperLink ID="linkC" runat="server"
NavigateUrl="http://www.devcurry.com">
DevCurry</asp:HyperLink><br /><br />
</div>
</form>
</body>
</html>
<head runat="server">
<title>Implement KeyBoard Shortcuts on Hyperlinks</title>
<script type='text/javascript'
src='../Scripts/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
$(function() {
$(document).keyup(function(e) {
var key = (e.keyCode ? e.keyCode : e.charCode);
switch (key) {
case 49:
navigateUrl($('a[id$=linkA]'));
break;
case 50:
navigateUrl($('a[id$=linkB]'));
break;
case 51:
navigateUrl($('a[id$=linkC]'));
break;
default: ;
}
});
function navigateUrl(jObj) {
window.location.href = $(jObj).attr("href");
alert("Navigating to " + $(jObj).attr("href"));
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="tableDiv">
<h2>Use Keyboard Keys 1, 2 or 3 to invoke respective
websites</h2><br />
<asp:HyperLink ID="linkA" runat="server"
NavigateUrl="http://www.dotnetcurry.com">
DotNetCurry</asp:HyperLink><br /><br />
<asp:HyperLink ID="linkB" runat="server"
NavigateUrl="http://www.sqlservercurry.com">
SqlServerCurry</asp:HyperLink><br /><br />
<asp:HyperLink ID="linkC" runat="server"
NavigateUrl="http://www.devcurry.com">
DevCurry</asp:HyperLink><br /><br />
</div>
</form>
</body>
</html>
如下所示，用jQuery实现一个快捷键相当的简单。代码首先捕获keyup事件并用keyCode或charCode去判断按下的键。
$(document).keyup(function(e) {
var key = (e.keyCode ? e.keyCode : e.charCode);
在如下的代码中，如果key=49，则说明数字键1被按下并且第一个超链接将被自动触发。同样的如果key=50或51，则说明数字键2或3分别被按下，并且第二个或第三个超链接将被自动触发。一旦key值与switch case语句的状态匹配，navigateUrl() 函数将通过传递一个超链接对象被调用。所以如果用户按下数字键1，第一个超链接对象将被传入navigateUrl() 函数，如下所示：
switch (key) {
case 49:
navigateUrl($('a[id$=linkA]'));
break;
navigateUrl() 函数如下：
function navigateUrl(jObj) {
window.location.href = $(jObj).attr("href");
}
此函数接受一个超链接对象并且设置window.location.href，使其等于传入参数的href属性。这就是我们如何用快捷键调用事件。
