Jump to content

tabsheet addCls


delagoutte
 Share

Recommended Posts

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 ?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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.

tabsheet_lose_addcls.gif.ef4189eebd16881e0b1f6f411ba6a395.gif

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...