Biojs.AreaSelector showcase
PLEASE NOTE: the above example is being affected by the CSS rules of this site. Click on 'view in window' to see the component by using its own CSS stylesheet(s) only.
View in windowOverview
This component visualize a div in a upper layer that can be used to select an area of other component. Although is not biological related component, it is generic enough to be used in other components, that require to select a region, see chromosome example. Just one selector can be used for a HTML component.
WARNING: The CSS value for the position will be changed to relative.
Version 1.0.0.
To get the above Biojs.AreaSelector to work on your page, you need to do the following:
- Include the file Biojs.AreaSelector.js and its dependencies to your page header.
Biojs scripts
<script language="JavaScript" type="text/javascript" src="src/Biojs.js">
External script(s)
<script language="JavaScript" type="text/javascript" src="../biojs/dependencies/jquery/jquery-1.7.2.min.js">
CSS stylesheet(s)
<link rel="stylesheet" href="../biojs/dependencies/jquery/jquery-ui-1.8.2.css" />
- Create a div tag which holds an unique identifier.
<body> ... <div id="YourOwnDivId" /> ... </body> - Create a code snippet within a <script> tag and instance Biojs.AreaSelector into.
window.onload = function() { var instance = new Biojs.AreaSelector({ target: "YourOwnDivId", area: [10,10,40,40] }); };
Required Parameters
-
target | {string}
Identifier of the DIV tag where the component should be displayed.
-
resize_left | {boolean}
to indicate if the selector can be resizable from the left side. default value: true
-
resize_right | {boolean}
to indicate if the selector can be resizable from the right side. default value: true
-
resize_top | {boolean}
to indicate if the selector can be resizable from the top side. default value: true
-
resize_bottom | {boolean}
to indicate if the selector can be resizable from the bottom side. default value: true
-
area | {array}
an array with 4 elements(integers) to indicate the start position of the area selector. The first two elements indicate the X and Y position of the top-left corner, the last 2 elements indicate the bottom-right position. The position are relative to the target element.
Optional Parameters
getCoveredArea
get the current value of the area
Example :
var area = instance.getCoveredArea();
alert("The current area is from the point [" + area.region[0] + "," + area.region[1] + "] to the point [" + area.region[2] + "," + area.region[3] + "] ");
setCoveredArea
set the value of the area
Parameters:
-
{string} area
A 4-element array indicating the position to locate the selector. The first two elements indicate the X and Y position of the top-left corner, the last 2 elements indicate the bottom-right position. The position are relative to the target element.
Example :
instance.setCoveredArea([ 20,20,50,50]);
onRegionChanged
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument. It gets activated when the covered area has changed
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{string}
type
The name of the event. -
{array}
region
A 4-element array indicating the current position of the selector. The first two elements indicate the X and Y position of the top-left corner, the last 2 elements indicate the bottom-right position. The position are relative to the target element.
Example :
instance.onRegionChanged(function( objEvent ) {
alert("The current area is from the point [" + objEvent.region[0] + "," + objEvent.region[1] + "] to the point [" + objEvent.region[2] + "," + objEvent.region[3] + "] ");
});