Zebra API Doc

zebra.ui.PopupManager Class

Popup window manager class. The manager registering and triggers showing context popup menu and tooltips. Menu appearing is triggered by right mouse click or double fingers touch event. To bind a popup menu to an UI component you can either set "tooltip" property of the component with a popup menu instance:

   // create canvas
   var canvas = new zebra.ui.zCanvas();

   // create menu with three items
   var m = new zebra.ui.Menu();
   m.add("Menu Item 1");
   m.add("Menu Item 2");
   m.add("Menu Item 3");

   // bind the menu to root panel
   canvas.root.popup = m;

Or implement "getPopup(target,x,y)" method that can rule showing popup menu depending on the current cursor location:

   // create canvas
   var canvas = new zebra.ui.zCanvas();

   // visualize 50x50 pixels hot component spot  
   // to which the context menu is bound 
   canvas.root.paint = function(g) {
       g.setColor("red");
       g.fillRect(50,50,50,50);
   }

   // create menu with three items
   var m = new zebra.ui.Menu();
   m.add("Menu Item 1");
   m.add("Menu Item 2");
   m.add("Menu Item 3");

   // implement "getPopup" method that shows popup menu only 
   // if mouse cursor located at red rectangular area of the 
   // component
   canvas.root.getPopup = function(target, x, y) {
       // test if mouse cursor position is in red spot area
       // and return context menu if it is true 
       if (x > 50 && y > 50 && x < 100 && y <  100)  {
           return m;
       }
       return null;
   }

Defining a tooltip for an UI component follows the same approach. Other you define set "tooltip" property of your component with a component that has to be shown as the tooltip:

    // create canvas
    var canvas = new zebra.ui.zCanvas();

    // create tooltip 
    var t = new zebra.ui.Label("Tooltip");
    t.setBorder("plain");
    t.setBackground("yellow");
    t.setPadding(6);

    // bind the tooltip to root panel
    canvas.root.popup = t;

Or you can implement "getTooltip(target,x,y)" method if the tooltip showing depends on the mouse cursor location:

   // create canvas
   var canvas = new zebra.ui.zCanvas();

   // create tooltip 
   var t = new zebra.ui.Label("Tooltip");
   t.setBorder("plain");
   t.setBackground("yellow");
   t.setPadding(6);

   // bind the tooltip to root panel
   canvas.root.getPopup = function(target, x, y) {
       return x < 10 && y < 10 ? t : null;
   };

Constructor

zebra.ui.PopupManager

()

Methods

hideTooltip

()

Hide tooltip if it has been shown

mouseClicked

(
  • e
)

Define mouse clicked event handler

Parameters:

mouseEntered

(
  • e
)

Define mouse entered event handler

Parameters:

mouseExited

(
  • e
)

Define mouse exited event handler

Parameters:

mouseMoved

(
  • e
)

Define mouse moved event handler

Parameters:

mousePressed

(
  • e
)

Define mouse pressed event handler

Parameters:

mouseReleased

(
  • e
)

Define mouse released event handler

Parameters:

run

(
  • t
)
private

Task body method

Parameters:

  • t Task

    a task context

Attributes

hideTooltipByPress

Boolean

Indicates if a shown tooltip has to disappear by mouse pressed event

Default: true

showTooltipIn

Integer

Define interval (in milliseconds) between entering a component and showing a tooltip for the entered component

Default: 400

Events

menuItemSelected

Fired when a menu item has been selected

    zebra.ui.popup.bind(function menuItemSelected(menu, index, item) {
        ...
    });

Event Parameters:

  • menu zebra.ui.Menu

    a menu component that triggers the event

  • index Integer

    a menu item index that has been selected

  • item zebra.ui.Panel

    a menu item component that has been selected