How to make an ON/OFF button in the tab bar

[barts2108]

Hi djp,

This is actually not a real issue for the tabbar, but it is a nice to have for my app.

I would like to have a possiblity to use a button in the tabbar as on/off button for some external thing. Say the about button I will change to this on/off button, then the behaviour should be like this:

If I press on/off button to switch ON, the button should be highlighted If I press on/off button to swithc OFF, the button should be dimmed Both actions should not interfere with the other buttons and their selection. EDIT: (the highlighting can be done with images, or with gradient whichever one is easier) Am I correct to say that I should add something like a ONOFF class next to the ENABLED class ? -and- if I pressed a button that hasClass(ONOFF), I skip the hasClass(ENABLED)

Currently it is for only 1 button that I could use this very well.

[DataZombies]

Actually the way to do this is to pass a function via the tab's anchor tag...

About Code would have to be developed in jqt.bars.js, initTabbar(), tabbar touches section, to assign the function to the tab's click handler. Unfortunately, I don't have time to implement this functionality. You're more that welcome to fork this repo and develop this yourself.

[barts2108]

FYI: I did the following:

Around line 425

/* A onoff button overrules normal behaviour */
if ($me.hasClass('onoff')) {
    if ($me.hasClass('off')) {
        $(this).toggleClass('off', false);
        $(this).toggleClass('on', true);
    } else {
        $(this).toggleClass('off', true);
        $(this).toggleClass('on', false);
    }
} else {
    /* disabled this if because I want the button to work always */
    //if (!$me.hasClass('enabled')) {
    animation = animations.indexOf(':' + $me.data('animation') + ':') > -1 ? $me.data('animation') : '';
    target = $me.data('default_target');

    jQT.goTo(target, animation);
    $('#tabbar a').each(function () {
        $(this).toggleClass('enabled', ($me.get(0) === $(this).get(0)));
    });
    //}

I add

class="onoff off"

to any class I want to have as on/off button and I added some css for highlighting

#tabbar a.on::before {
  background-image:
    -webkit-gradient(linear, left top, left bottom,
      from(rgba(215, 215, 215, 0)),
      color-stop(.43, rgba(215, 215, 215, 0)),
      to(rgba(215, 215, 215, 1))),
    -webkit-gradient(radial, 60 162, 150, 60 162, 149, 
      from(rgba(155, 155, 155, 0)), 
      to(rgba(155, 155, 155, 1))),
    -webkit-gradient(radial, 20 -43, 60, 20 -43, 40, 
      from(rgba(245, 245, 245, 1)), 
      to(rgba(245, 245, 245, 1)));
}

The only thing still need to be done is the action...

[DataZombies]

Looks good!

[barts2108]

now I would like to add my javascript function name to the href like this:

<a href="myFunction(arg1, arg2)" class="onoff off" mask="bar_img/jqt.png" animation="slideup">

I see that it could be done with the eval() function, but I also see that eval is evil, so it not seems the way to go for a decent callback. Any suggestions ?

[DataZombies]

I can't think of the best method for that. Try Googling it.

[barts2108]

FYI: found a way to make the callback

In jqt.bars.js (for cod

/* A onoff button overrules normal behaviour */
if ($me.hasClass('onoff')) {
    if ($me.hasClass('off')) {
        $(this).toggleClass('off', false);
        $(this).toggleClass('on', true);
    } else {
        $(this).toggleClass('off', true);
        $(this).toggleClass('on', false);
    }
    target = $me.data('default_target');
    if (typeof (window[target]) == "function") (
        window[target]($me);
    }
} else {
    /* disabled this if because I want the button to work always */
    //if (!$me.hasClass('enabled')) {
    animation = animations.indexOf(':' + $me.data('animation') + ':') > -1 ? $me.data('animation') : '';
    target = $me.data('default_target');

    jQT.goTo(target, animation);
    $('#tabbar a').each(function () {
        $(this).toggleClass('enabled', ($me.get(0) === $(this).get(0)));
    });
    //}

the anchor tag for the toggle button:

<a href=""toggleCallback" class="onoff off" mask="bar_img/jqt.png" animation="slideup">

and the callback function:

function toggleCallback(theVar) {
  ...
}

[DataZombies]

That look pretty good.