LEADTOOLS JavaScript (Leadtools.Controls)
LEAD Technologies, Inc

IdleCursor Property

Example 

Gets or sets the mouse cursor to use for the idle state of this ImageViewerInteractiveMode
Syntax
  get_idleCursor();
 set_idleCursor(value);
!MISSING Scrap '_RTJavaScript_PROPERTY_SYNTAX'!

Property Value

TypeDescription
stringThe mouse cursor to use for the idle state of this ImageViewerInteractiveMode. The default value is null.
Remarks

IdleCursor and WorkingCursor are only used when this ImageViewerInteractiveMode is attached to the left mouse button. It will not be used if this mode is attached to any other button or to touch. Mouse cursors are only supported by desktop browsers.

The values are standard HTML cursor strings. You can use a value like "crosshair" or "move". They will be set into the CSS style.cursor property of the HTML element. A value of null, means do not change the cursor.

The cursors are set into the ImageViewer main div (ImageViewer.DivId) and foreground canvas (ImageViewer.CanvasId) elements when this interactive mode is assigned to the left mouse button. Also, the cursors will be set in any elements added by the user to the InteractiveService.UserElements collection.

IdleCursor will be set when the the interactive mode is started (after Start is called) and removed when the mode is stopped (when Stop is called).

WorkingCursor will be set when the interactive mode is working (When OnWorkStarted is called) and removed (or set back to idle) when the interactive mode has stopped working (When OnWorkCompleted) is called).

These cursors can be used to provide a visual clue into the current interactive mode operations. For instance, when using the ImageViewerPanZoomInteractiveMode interactive mode, you can set IdleCursor to "crosshair" and WorkingCursor to "move".

Example

Start with the ImageViewer example, remove all the code inside the example function (search for the // TODO: add example code here comment) and insert the following code:

Open the HTML page in your browser and click the example button. Now when hover over the viewer, the cursor changes to a "crosshair", when you click and drag, the cursor changes to "move".

  • JavaScript
  •   
     
    example: function SiteLibrary_DefaultPage$example(viewer) {
       // Get the default interactive mode (setup in the other part of this demo to
       // ImageViewerPanZoomInteractiveMode
       var interactiveMode = viewer.get_defaultInteractiveMode();
       // Set its cursors
       interactiveMode.set_idleCursor("crosshair");
       interactiveMode.set_workingCursor("move");
       // Stop and start the move for the cursors to take effect
       interactiveMode.stop(viewer);
       interactiveMode.start(viewer);
    
       var exampleLabel = document.getElementById("exampleLabel");
       exampleLabel.textContent = "cursor will be crosshair when you hover over the viewer (idle) and move when you click and drag (working)";
    },
See Also

Reference

ImageViewerInteractiveMode Object
ImageViewerInteractiveMode Members

 

 


Products | Support | Contact Us | Copyright Notices

© 2006-2012 All Rights Reserved. LEAD Technologies, Inc.