rsanford Posted June 27, 2013 Share Posted June 27, 2013 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 More sharing options...
erich.wanker Posted June 27, 2013 Share Posted June 27, 2013 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 1 Link to comment Share on other sites More sharing options...
Oliver Morsch Posted June 27, 2013 Share Posted June 27, 2013 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; } 2 Link to comment Share on other sites More sharing options...
Jancarlos Martins Posted June 27, 2013 Share Posted June 27, 2013 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 1 3 Link to comment Share on other sites More sharing options...
Oliver Morsch Posted June 27, 2013 Share Posted June 27, 2013 sender.addCls(...); And I tried to use "sender.body.className" without success, so that I had to do this: "document.getElementById(sender.body.id).className"... thx Link to comment Share on other sites More sharing options...
rsanford Posted June 28, 2013 Author Share Posted June 28, 2013 Thanks everyone, I appreciate your help. I will check out your suggestions. Link to comment Share on other sites More sharing options...
rsanford Posted July 2, 2013 Author Share Posted July 2, 2013 Would it be possible to get a sample program that can demo the panel effects please? Thank you. Link to comment Share on other sites More sharing options...
Harry Rogers Posted August 13, 2013 Share Posted August 13, 2013 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 More sharing options...
Oliver Morsch Posted August 13, 2013 Share Posted August 13, 2013 //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 More sharing options...
Harry Rogers Posted August 14, 2013 Share Posted August 14, 2013 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 More sharing options...
Oliver Morsch Posted August 14, 2013 Share Posted August 14, 2013 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 More sharing options...
Harry Rogers Posted August 14, 2013 Share Posted August 14, 2013 I've found the problem. I'm setting the panel.color property as part of the creation process (odd/even alternation) if I don't do that it works fine. Many thanks for your help Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now