Mouse Events with jQuery Plugins

by

mouseEventsPIjQueryThis tutorial demonstrates about the capturing mouse events using mouse-capture.js jQuery plugins.

This plugin has the capability to capture mouse events according to a method in a certain situation. This will help you manipulate and manage all mouse events in the easiest way that you can’t imagine.

 

Basic example as follows:

.mouseclick()

  • Create a design of the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <title>jQuery mouse capture demo</title>
 
 <style type="text/css">
 #capture-click {
   position: absolute;
   background-color: blue;
   color: white; 
   top: 100px;
   height: 200px;
   left: 200px;
   width: 300px;
 }
 </style>
 </head>
 <body>
  <div id="capture-click">It capture the mouse when clicked.</div> 
 </body>
</html>
  • Set the following plugins.
 <script src="jquery-1.3.1.min.js" type="text/javascript"></script>
 <script src="jquery.mousecapture.js" type="text/javascript"></script>
  • Create a script for the mouseclick() event handler.
<script type="text/javascript">
 $(document).ready(function() {
  $(document).ready(function() {
    $("#capture-click").mousecapture({
     "down": function(e, s) {
    $(this).html("Mouse has been clicked");
    // Scale the box to the appropriate size
    $('#capture-click').animate({
     width : '200px',
     height : '200px'
     }, 1000);
   }
   });
 });
 </script>

Description:  When mouse clicked, it will change the width and hieght of a box slowly.

.mousemove()

  • Create a design of the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
 <title>jQuery mouse capture demo</title>
 
 <style type="text/css">
#mouse-move {
 position: absolute;
 background-color: blue;
 color: white;
 top: 400px;
 height: 200px;
 left: 200px;
 width: 300px;
 } 
 </style>
</head>
 <body>
 <div id="mouse-move">It capture the mouse when moving.</div>
 </body>
</html>
  • Set the following plugins.
<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="jquery.mousecapture.js" type="text/javascript"></script>
  • Create a script for the mousemove() event handler.
 <script type="text/javascript">
 $(document).ready(function() {
   $("#mouse-move").mousedown(function() {
     $(this).html("mousedown triggered<br>on " + Date.now());
   });
 
   $("#mouse-move").mouseup(function() {
     $(this).html("mouseup triggered<br>on " + Date.now());
   });
 
   $("#mouse-move").mousemove(function() {
     $(this).html("mousemove triggered<br>on " + Date.now());
   });
 });
 </script>

 

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :
Email – [email protected]
Mobile No. – 09305235027 – tnt

 

Download Sourcecode

Leave a Comment