Jump to content

Mouseover or hover over panel - change color or effect


rsanford

Recommended Posts

Hello, I'd like to have the ability to mouseover/mouseenter a unipanel and have the panel change color and/or display some other type of effect, such as a solid white border - something similar to clicking a tile in windows 8, then return to the original color/initial effect at mouseleave.

 

Would anyone know of a way to do this within unigui? Thank in advance.

Link to comment
Share on other sites

Hello rsanford..

 

Change color and font of label:

 

procedure TUniMainModule.setze_label_schwarz(was:TUniLabel);
begin
      was.Cursor:=crHandPoint;
      was.Font.Color:=UniMainModule.schwarz;
      was.Font.Style:=was.Font.Style + [];
end;

 

 

 

change color of panel:

 

procedure TUniMainModule.setze_panel_dunkelgrau(was:TUniPanel);
begin
     was.Cursor:=crDefault;
     was.ClientEvents.ExtEvents.Add
      ('OnAfterrender=function OnAfterrender(sender)'+
      ' {  sender.setBodyStyle("background-color:'+ColorToHtml(dunkelgrau)+'");  }');
end;

 

 

change to round corners and color of panel:

 

procedure TUniMainModule.setze_panel_rund_dunkelgrau(was:TUniPanel);
begin
     was.Cursor:=crDefault;
     was.ClientEvents.ExtEvents.Add
         ('OnAfterrender=function OnAfterrender(sender)'+
       ' {  sender.setBodyStyle("background:'+ColorToHtml(dunkelgrau)+'; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px");  }');
end;

 

 

change color on mouseover:

 

procedure TUniMainModule.funktion_panel_hoover_dunkelgrau_zu_grau(was:TUniPanel);
begin
   was.Cursor:=crHandPoint;
   was.ClientEvents.ExtEvents.Add
      ('OnAfterrender=function OnAfterrender(sender)'+
      ' {  sender.setBodyStyle("background-color:'+ColorToHtml(dunkelgrau)+'"); }');
   was.ClientEvents.ExtEvents.Add
      ('OnMouseout=function Onmouseout(sender)'+
      ' { sender.body.applyStyles("background-color:'+ColorToHtml(dunkelgrau)+'"); }');
   was.ClientEvents.ExtEvents.Add
      ('Onmouseover=function Onmouseover(sender)'+
      ' {sender.body.applyStyles("background-color:'+ColorToHtml(grau)+'"); }');
end;

 

 

change color on mouseover and round corners:

 

procedure TUniMainModule.funktion_panel_rund_hoover_dunkelgrau_zu_grau(was:TUniPanel);
begin
   was.Cursor:=crHandPoint;
   was.ClientEvents.ExtEvents.Add
      ('OnAfterrender=function OnAfterrender(sender)'+
      ' {  sender.setBodyStyle("background-color:'+ColorToHtml(dunkelgrau)+'; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px");  }');
   was.ClientEvents.ExtEvents.Add
      ('OnMouseout=function Onmouseout(sender)'+
      ' { sender.body.applyStyles("background-color:'+ColorToHtml(dunkelgrau)+'"); }');
   was.ClientEvents.ExtEvents.Add
      ('Onmouseover=function Onmouseover(sender)'+
      ' {sender.body.applyStyles("background-color:'+ColorToHtml(grau)+'"); }');
end;

 

 

and the colorToHtml thing:

 

function TUniMainModule.ColorToHtml(DColor:TColor):string;
  var
    tmpRGB : TColorRef;
  begin
    tmpRGB := ColorToRGB(DColor) ;
    Result:=Format('#%.2x%.2x%.2x',
                   [GetRValue(tmpRGB),
                    GetGValue(tmpRGB),
                    GetBValue(tmpRGB)]) ;
  end; {function ColorToHtml}

 

 

 

hth

 

erich

  • Upvote 1
Link to comment
Share on other sites

Simple version:

-> in "TUniPanel / ClientEvents / ExtEvents -> OnAfterrender":
 

function OnAfterrender(sender)
{
document.getElementById(sender.body.id).className += " hoverpanel";
}

 

-> in "UniServerModule / CustomCSS": 
 

.hoverpanel:hover {
background-color: #0077FF;
}
  • Upvote 2
Link to comment
Share on other sites

Hi,

 

Very easy, 

 

Client Side

 

ClientEvents->ExtEvents

 

function Onmouseover(sender)
{
   sender.addCls('effectPanel'); // Method extjs http://docs.extjs.com/extjs/4.2.1/#!/api/Ext.panel.Panel-method-addCls
}

 

 

function Onmouseout(sender)
{
   sender.removeCls('effectPanel'); // Method extjs http://docs.extjs.com/extjs/4.2.1/#!/api/Ext.panel.Panel-method-removeCls
}

 

ServerModule.pas -> CustomCSS

 

.effectPanel {

 your effects

}

 

OR

 

create file css and declare into ServerModule.pas -> CustomFiles

 

PerJanBR

  • Like 1
  • Upvote 3
Link to comment
Share on other sites

  • 1 month later...

Hi

What's the syntax for adding this functionality in a dynamically created panel for example ?

 

 

Simple version:

-> in "TUniPanel / ClientEvents / ExtEvents -> OnAfterrender":
 

function OnAfterrender(sender)
{
document.getElementById(sender.body.id).className += " hoverpanel";
}

 

 

I've tried various things like this below but no joy yet .......

 

// add a panel to the display form

Apanel.create(frmDisp);

Apanel. parent := .....

etc

etc

//add some event handlers

//serverside

Apanel.OnClick := clicked;

//Clientside     THIS IS NOT HOW TO DO IT !!!

Apanel.ClientEvents.ExtEvents.Add('function onAfterrender(sender) {  document.getElementById(sender.body.id).className += " hoverpanel";  }');  

Many thanks

Link to comment
Share on other sites

//Clientside     THIS IS NOT HOW TO DO IT !!!

Apanel.ClientEvents.ExtEvents.Add('function onAfterrender(sender) {  document.getElementById(sender.body.id).className += " hoverpanel";  }');  

 

Try this:

Apanel.ClientEvents.ExtEvents.Add('onAfterrender=function onAfterrender(sender) { ...
Link to comment
Share on other sites

Hi Oliver

 

Many thanks for the reply.

Unfortunately I'm not getting anything with this :

Apanel.ClientEvents.ExtEvents.Add('OnAfterrender=function OnAfterrender(sender){document.getElementById(sender.body.id).className += " hoverpanel";}');

 

This works fine in the same app using the in-place editor to add an event handler for the onAfterrender event of a design time created panel.

OnAfterrender(sender){document.getElementById(sender.body.id).className += " hoverpanel";}');

 

Any ideas ?

 

Cheers

Link to comment
Share on other sites

Hi Oliver

 

Many thanks for the reply.

Unfortunately I'm not getting anything with this :

Apanel.ClientEvents.ExtEvents.Add('OnAfterrender=function OnAfterrender(sender){document.getElementById(sender.body.id).className += " hoverpanel";}');

 

This works fine in the same app using the in-place editor to add an event handler for the onAfterrender event of a design time created panel.

OnAfterrender(sender){document.getElementById(sender.body.id).className += " hoverpanel";}');

 

Any ideas ?

 

Cheers

 

This works for me (you must give the component a unique name):

procedure TMainForm.UniButton4Click(Sender: TObject);
var
  aPnl: TUniPanel;
begin
  aPnl := TUniPanel.Create(self);
  aPnl.Left:= 30;
  aPnl.Top := 400;
  aPnl.Caption := 'Test';
  aPnl.Name := 'MyTestPanel';
  aPnl.ClientEvents.ExtEvents.Add('OnAfterrender=function OnAfterrender(sender){document.getElementById(sender.body.id).className += " hoverpanel";}');
  aPnl.Parent := self;
end;

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...