tabsheet addCls

[delagoutte]

i need to add cls in runtime to a title tabsheet.

i try this

  procedure HighligthTabSheet(aTest : Boolean; var aUniTabSheet : TUniTabSheet);
   var C : TComponent;
  begin
    C :=  FindComponentUni(aUniTabSheet.Name);
    if aTest then
    begin
      if C <> nil then
      aUniTabSheet.JSInterface.JSCall('addCls', ['TabNew']);
      //UniSession.AddJS('$(''#'+TUniControl(C).JSId+'_tab'').addClass(''TabNew'')');
    end
    else
    begin
      if C <> nil then
      aUniTabSheet.JSInterface.JSCall('removeCls', ['TabNew']);
      //UniSession.AddJS('$(''#'+TUniControl(C).JSId+'_tab'').removeClass(''TabNew'')');
    end;
  end;

with

aUniTabSheet.JSInterface.JSCall('addCls', ['TabNew']);

nothing : the class don't seem to be add.

 

 

with

UniSession.AddJS('$(''#'+TUniControl(C).JSId+'_tab'').addClass(''TabNew'')')

it seems to work but when the mouse is over the title tabsheet, the class is removed and after when the mouse exit , the class is not comming back

 

 

in unievents of unipagecontrol i have

function beforeInit(sender, config)
{
  config.cls ='custom-maintab-browser';
}

and in custom css i have  (normal font color is black, with tabnew the font is red)

.custom-maintab-browser{}

.custom-maintab-browser .x-tab-default, .x-tab-bar-default{
  background-color: rgb(255, 255, 255) !important;

}

.custom-maintab-browser .x-tab-default .x-tab-inner-default{
  color:rgb(0,0,0) !important;
  font-weight: normal !important;  
}

.custom-maintab-browser .x-tab-default.TabNew .x-tab-inner-default{
  color:rgb(255,0,0) !important;
  font-weight: normal !important;  
}


.custom-maintab-browser .x-tab-active .x-tab-inner-default{
  color:rgb(0,0,0) !important;
  font-weight: bold !important;  
} 

.custom-maintab-browser .x-tab-active.TabNew .x-tab-inner-default{
  color:rgb(255,0,0) !important;
  font-weight: bold !important;  
} 

.custom-maintab-browser .x-tab-active .x-tab-button-default{
  border-bottom: solid 5px #0757A0 !important;
}

.custom-maintab-browser .x-tab-active.TabNew .x-tab-button-default {
  border-bottom: solid 5px #FF0000 !important;
}

how can I get the added class to stay in place ?

[Sherzod]

This post may help you:

 

[delagoutte]

the problem is that i must add and remove the class at runtime so i can't use the afterrender event.

so when i over and out over the tab the class that i add is removed

[Sherzod]

3 minutes ago, delagoutte said:

the problem is that i must add and remove the class at runtime so i can't use the afterrender event.

Okay. So what is the problem?

[delagoutte]

open the sample project that i attach.

click on button add class

the first tabsheet is red+bold+underline red because it is active +class TabNew

if it is not active it is red +class TabNew

mouse over the tabsheet> the Tabnew class was deleted so the the tabsheet have not got the good color

testtabsheet.zip

[delagoutte]

@Sherzoddo you see the problem with my sample project ?

[Sherzod]

@delagoutte

Sorry, I don't quite understood...

[delagoutte]

@Sherzod

I hope it will be clearer with this recording

as you can see, i add class on some tabsheet but when the mouse over the title tabsheet the class is remove and lost. i would like the class stay assigned to the tabsheet.

[delagoutte]

it seems i finish to find a solution for my problem i  use this :

 procedure HighligthTabSheet(aTest : Boolean; var aUniTabSheet : TUniTabSheet);
   var C : TComponent;
  begin
    C :=  FindComponentUni(aUniTabSheet.Name);
    if aTest then
    begin
      if C <> nil then
      begin
       UniSession.AddJS(PCMain.Pages[seTsAdd.Value].JSName+'.tab.addCls(''TabNew'')');
       UniSession.AddJS(PCMain.Pages[seTsAdd.Value].JSName+'.tab.addOverCls(''TabNew'')');
     end
    end
    else
    begin
      if C <> nil then
      begin
       UniSession.AddJS(PCMain.Pages[seTsAdd.Value].JSName+'.tab.removeCls(''TabNew'')');
       UniSession.AddJS(PCMain.Pages[seTsAdd.Value].JSName+'.tab.removeOverCls(''TabNew'')');
      end
    end;
  end;