Using mouse gestures in an ASP.NET application with jQuery
Most applications allow a user to work both with the mouse and with the keyboard. With the mouse that usually means clicking on buttons or, in the case of a web application, on hyperlinks. using mouse gestures is still not all that common though and that is a shame because it is really easy to add to an application and can be a very useful addition of the user.
To demonstrate how easy it is to add mouse gestures to an ASP.NET application I created a small sample to do just that.
To start with I created a real simple ASP.NET page with a label and two buttons. The label contains a number and the clicking either of the buttons will decrease or increase the number. The page looks like this.
Enabling gestures is just a few minutes work 
.
First I downloaded the latest version of jQuery and the jGesture plug-in.
Wiring the whole thins just takes a few lines of code. In this case I decided to use the left and right gesture as they match the direction of the two arrows on the page. The first thing is to add the two JavaScript file to the page. Next when the page loads we can use the jQuery ready() function to hook up the mouse gesture event handler. Inside our handler we check is the gesture was left or right and if that was the case we just trigger the click action of the appropriate button. Sounds complicated but using jQuery just a few lines of code. The complete JavaScript needed looks like this:
$().ready(function() {
$().gesture(function(gs) {
var gestureName = gs.getName();
if (gestureName == "right") {
$(".BtnRight").click();
}
else if (gestureName == "left") {
$(".BtnLeft").click();
}
});
});
With this code in pace all a use has to do is drag the mouse left or right anywhere over the page to increment or decrement the number. And with the default settings it doesn’t even matter which mouse button he uses.
Note that I use the Button CSS classes as selector instead of the button ID. In this case not really needed but un general this approach works much better with ASP.NET because of the name mangling ASP.NET does.
The complete ASP.NET page looks like this:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Gestures._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.3.1.js" type="text/javascript"></script> 1:
2: <script src="Scripts/jgesture-1.0.3.js" type="text/javascript">
1: </script>
2: <script type="text/javascript">
3: $().ready(function() { 4: $().gesture(function(gs) { 5: var gestureName = gs.getName();
6: if (gestureName == "right") { 7: $(".BtnRight").click(); 8: }
9: else if (gestureName == "left") { 10: $(".BtnLeft").click(); 11: }
12: });
13: });
14:
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%">
<col width="50%" />
<col />
<col width="50%" />
<tr>
<td align="center">
<asp:ImageButton ID="BtnLeft"
ImageUrl="~/Img/Back.png"
runat="server"
OnClick="BtnLeft_Click"
CssClass="BtnLeft" />
</td>
<td align="center">
<asp:Label ID="LblNumber"
runat="server"
Text="0"
Font-Size="XX-Large"></asp:Label>
</td>
<td align="center">
<asp:ImageButton ID="BtnRight"
ImageUrl="~/Img/Next.png"
runat="server"
OnClick="BtnRight_Click"
CssClass="BtnRight" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Enjoy!