jQWidgets jqxDraw on() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDraw is a small jQuery-based plugin that is used to draw shapes and texts using VML, SVG and HTML5
The on() method is used for adding an event handler to an element of the specified jqxDraw widget.
Syntax:
Instance.on(Element, 'click', function () { // Getting the Y coordinate of the circle's center var Y_Coordinate = parseInt(Instance.getAttr(Element, 'cy')); // Moving the circle down with 15 pixels Instance.attr(Element, { cy: Y_Coordinate + 15 }); });
Parameters: This method accepts three parameters that are illustrated below:
- Element: This is the specified element.
- click: This is the specified event.
- function: This is the specified function to add the event handler.
Return values: This method does not return any values.
Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
Example: The below example illustrates the jQWidgets jqxDraw on() Method.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link rel = "stylesheet" href = "jqwidgets/styles/jqx.base.css" type = "text/css" /> < script type = "text/javascript" src = "scripts/jquery-1.11.1.min.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxcore.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqxdraw.js" > </ script > < script type = "text/javascript" src = "jqwidgets/jqx-all.js" > </ script > </ head > < body > < center > < h1 style = "color:green;" > w3wiki </ h1 > < h3 >jQWidgets jqxDraw on() Method</ h3 > < div id = "jqx_Draw" style = "height:200px; width:700px;" > </ div > < div id = "log" ></ div > < script type = "text/javascript" > $(document).ready(function () { $('#jqx_Draw').jqxDraw(); var Instance = $('#jqx_Draw').jqxDraw('getInstance'); // Creating a circle with cx of 130, cy of 50, // radius of 25 and parameters for filling the // circle with green color var Element = Instance.circle(130, 50, 25, { fill: 'green' }); Instance.on(Element, 'click', function () { // Getting the Y coordinate of the circle's center var Y_Coordinate = parseInt( Instance.getAttr(Element, 'cy')); // Moving the circle down with 15 pixels Instance.attr(Element, { cy: Y_Coordinate + 15 }); }); Instance.refresh(); }); </ script > </ center > </ body > </ html > |
Output:
Reference: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdraw/jquery-draw-api.htm?search=
Contact Us