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;

sorry this plugin exist in extjs but it is bugged so with the same name there may be a conflict. so i rename the plugin use this version of fileplugin_tabscrollermenu.zip and use function tabPanel.beforeInit(sender, config) { sender.plugins = [ 'tabscrollermenu_w']; }

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

@Sherzoddo you see the problem with my sample project ?

hello, i look that and //big rectangle chere the mask is applied .x-mask{ opacity: 0.5; background: rgb(255, 0, 0) none repeat scroll 0% 0%; } //rectangle around screen mask message .x-mask-msg{ opacity: 0.5; background: rgb(0, 255, 0) none repeat scroll 0% 0%; } //interior of screenmask message .x-mask-msg-inner{ opacity: 0.5; background: rgb(255, 0, 0) none repeat scroll 0% 0%; } //part text of screen mask .-x-mask-msg-text{ opacity: 0.5; background: rgb(0, 0, 255) none repeat scroll 0% 0%; } in your case i think you must modified the .x-mask-msg-inner

Hello, i test your class and it is ok is it this red part in my screenshot that you would change ? or the background of 'Hello'

i found a solution and i create a topic for this

Hello, i share with you a method for adding a scroller menu for unipage control download the join file plugin_tabscrollermenu.zip uncompress in a directory where you have your application. for me it is in assets/plugin in unimainmodule register the js file and css file of the plugin uses .... uniGUIClasses,uniguitypes; .... initialization RegisterMainModuleClass(TUniMainModule); UniAddCSSLibrary('assets/plugin/TabScrollerMenu.css', False, [upoPlatformDesktop]); UniAddJSLibrary('assets/plugin/TabScrollerMenu.js', False, [upoPlatformDesktop]); in your unipagecontrol->unievents->Ext.tab.Panel[TabPanel] add : function tabPanel.beforeInit(sender, config) { sender.plugins = [ 'tabscrollermenu']; } note : if the property of a unitabsheet tabvisible = false then the tabsheet will not be in the menu

inspect network tab in developper tools in firefox/chrome you probably have a 404 error for a css file

sorry , i used firefox style editor to change font size for test. if use class in unigui there is not problem

no idea ?

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

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

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 ?

thank you it works perfectly