Jump to content

CHANGE BACKGROUND COLOR BUTTON [SOLVED]


Alessandro

Recommended Posts

Hi,

 

ExtEvents:

function added(sender, container, pos, eOpts)
{
  sender.addCls('bntLogin');
}

CSS (servermodule):

.bntLogin
{
 background:#1892d1 !important;
 color:#fff !important;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}
.bntLogin:hover
{
 background:#828282 !important;
 -webkit-transition: background 0.5s ease-in-out;
 transition: background 0.5s ease-in-out;
}

Hope this will help you...

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

  • 2 months later...
  • 5 months later...
  • 2 months later...

Como mudar a cor do botão em tempo de execução?

Por exemplo, tenho duas CSS (vermelho e azul), dependendo do resultado de um procedimento

eu tenho que mudar a cor para vermelho, pra chamar a atenção. Como fazer isso?

 

se eu coloco o comando no onShow, funciona:

   UniBitBtn24.ClientEvents.ExtEvents.values['added'] := 'function added(sender, container, pos, eOpts) {sender.addCls("botaoVermelho");}';

 

Mas... em tempo de execução, não.

Usei Repaint, Refresh, Update no botão e nada!

 

------------------------------------

 

How to change the button's color at runtime?
For example, I have two CSS (red and blue), depending on the outcome of a procedure
I have to change the color to red, to draw attention. How to do this?
 
If I post in onShow, ok:
   UniBitBtn24.ClientEvents.ExtEvents.values['added'] := 'function added(sender, container, pos, eOpts) {sender.addCls("botaoVermelho");}';
 
But, in Runtime, not!
I test whith Repaint, refresh, update button, nothing!!!
 
Obrigado.
Link to comment
Share on other sites

  • 2 years later...

you could use a thing like that for change at runtime:

if blue then    
begin
  UniSession.AddJS('$(''#'+MyUniGuiButon.JSId+''').removeClass(''BtnRed'')');
  UniSession.AddJS('$(''#'+MyUniGuiButon.JSId+''').addClass(''BtnBlue'')');
end
else
begin
  UniSession.AddJS('$(''#'+MyUniGuiButon.JSId+''').removeClass(''BtnBlue'')');
  UniSession.AddJS('$(''#'+MyUniGuiButon.JSId+''').addClass(''BtnRed'')');
end;

 

Link to comment
Share on other sites

  • 2 years later...
1 hour ago, skafy said:

If custom CSS must be defined in Server module it must be done in design time.

 

How can I change color of a button in runtime to any color?

Just use :

uniSession.AddJS ('document.getElementById("' + YourComponent.jsID + '").style.background = "red";')

  • Like 1
Link to comment
Share on other sites

I'm getting below error. If I debug JSid has value.

 

image.png.e37077dd40c70e2b6b1b3e58684530a3.png

 

Code:


 

procedure TDetail.ShowButtons(APanel : TUniPanel);
var
  Name: string;
  Color: string;
  Align: string;
begin
  UniMainModule.qryGETButtons.Close;
  try
    UniMainModule.qryGETButtons.ParamByName('TASKINS_ID').AsInteger:= Taskins_ID;
    UniMainModule.qryGETButtons.Prepare;
    UniMainModule.qryGETButtons.Open;
    while not UniMainModule.qryGETButtons.Eof do
    begin
      Name:= UniMainModule.qryGETButtons.FieldByName('NAME').AsString;
      Color:= UniMainModule.qryGETButtons.FieldByName('COLOR').AsString;
      Align:= UniMainModule.qryGETButtons.FieldByName('ALIGN').AsString;

      var Button: TUniButton;
      Button:= TUniButton.Create(Self);
      Button.Parent:= APanel;
      Button.AlignWithMargins:= True;
      Button.Caption:= Name;
      uniSession.AddJS ('document.getElementById("' + Button.JSId + '").style.background = "red";');

      if Align = 'Left' then
        button.Align:= alLeft
      else if Align = 'Center' then
        button.Align:= alClient
      else if Align = 'Right' then
        button.Align:= alRight;

      UniMainModule.qryGETButtons.Next;
    end;
  finally
    UniMainModule.qryGETButtons.Close;
  end;
end;

 

Link to comment
Share on other sites

16 minutes ago, skafy said:
uniSession.AddJS ('document.getElementById("' + Button.JSId + '").style.background = "red";');

 

Try to use this function on TForm.OnReady. Set Color after all components are created.

I use this on OnButtonClick. (Form and all components are already created)

 

 

Link to comment
Share on other sites

7 minutes ago, irigsoft said:

You have to set jsID if this is runtime created component.

 

 

I've tried but it gives me error-> Cannot assign to a read-only property

 

I've also stated that when i debug button.JSid is not null and different between loop cycles.

Link to comment
Share on other sites

1 minute ago, skafy said:

I've tried but it gives me error-> Cannot assign to a read-only property

 

I've also stated that when i debug button.JSid is not null and different between loop cycles.

I am sorry i have changed my post.

Please try to set color on Form.OnReady.

I use addJS on OnButtonClick. (Form and all components are already created)

Link to comment
Share on other sites

39 minutes ago, irigsoft said:

I am sorry i have changed my post.

Please try to set color on Form.OnReady.

I use addJS on OnButtonClick. (Form and all components are already created)

I've managed to change colors now in FormReady event. Thank you for your help.

So I've created buttons in FormCreate event end than find them on FormReady event end change their color.

procedure TDetail.ChangeButtonColors(APanel: TUniPanel);
var
  Name: string;
  Color: string;
begin
  UniMainModule.qryGETButtons.Close;
  try
    UniMainModule.qryGETButtons.Prepare;
    UniMainModule.qryGETButtons.Open;
    UniMainModule.qryGETButtons.First;
    while not UniMainModule.qryGETButtons.Eof do
    begin
      Name:= UniMainModule.qryGETButtons.FieldByName('NAME').AsString;
      Color:= UniMainModule.qryGETButtons.FieldByName('COLOR').AsString;

      var Button: TUniButton;
      Button:= (APanel.FindComponent(Name) as TUniButton);
      if Assigned(Button) then
        uniSession.AddJS ('document.getElementById("' + Button.JSId + '").style.background = "' + Color + '";');
      
      UniMainModule.qryGETButtons.Next;
    end;
  finally
    UniMainModule.qryGETButtons.Close;
  end;
end;

Thanks again

  • Like 1
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...