Subtle badges in TabCaptions of ChildrenTabs

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1891
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Subtle badges in TabCaptions of ChildrenTabs

Post by jsetzer » 2023-08-10 15:56

Hi, just want to share a small CSS+JS trick for badges in TabCaptions of Children Tabs:

All badges in ChildrenTabs tab headers have the same appearance, regardless of the number of records.

Default appearance

tabcaptions-badges-default.png
tabcaptions-badges-default.png (17.33 KiB) Viewed 2307 times

At first glance, the eye cannot distinguish which tab has records and which does not. I would like the tabs with 0 records to be displayed with less emphasis. Like this:

Slightly modified appearance

tabcaptions-badges-modified.png
tabcaptions-badges-modified.png (17.41 KiB) Viewed 2307 times

Is it the same for you? For me, it helps me to see more quickly which tab contains records. Just compare those two screenshots above. Somehow, my eyes automatically focus on the 4th tab in second screenshot.


Actually, not that much code is required:

Code: Select all

<!-- file: hooks/header-extras.php -->
<style>
    .badge.badge-empty {
        opacity: 0.1;
    }
</style>
<script>
    function myAutoChangeBadges() {
        jQuery('.badge:contains("0")').addClass("badge-empty");
    }
</script>
But there is one obstacle:
Because the ChildrenTabs are loaded dynamically (lazy loaded) and because the tab contents are reloaded after insertion or deletion or after refresh, the code must be executed (a) at the beginning and (b) after a change.

You can use javascript's setinterval()-function (see here: https://www.w3schools.com/jsref/met_win_setinterval.asp) for periodically executing the function.

Or, if you are user of AppGini Helper Javascript Library (* commercial, I am the author), you can make use of two very useful events, prodived by our library:

Code

Code: Select all

// file: hooks/TABLENAME-dv.js

AppGiniHelper.DV.ready(function() {
    myAutoChangeBadges();
});
        
AppGiniHelper.DV.getChildrenTabs().onReload(function() {
    myAutoChangeBadges();
});
See full article in my blog:
https://appgini.bizzworxx.de/appgini/ti ... ackground/

I hope you like it!
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.14 Revision 1665 + all AppGini Helper tools

Post Reply