Framework 7 tab bar

[Ibikunle_o_]

i can get the framework 7 tab bar to work, i mean switch views ,its just static

[Diego_Calp]

Hi,

Following these steps I have F7 Tab Bar working as expected:

- Drop Tab Bar widget in page.

- Add three subpages to the tab bar page.

- Set at XDK Interactivity panel the action for each tab linked to a sub page.

This way each tab bar button shows a subpage.

Regards,
Diego

[Ibikunle_o_]

thank you

[Shaul_H_]

Hi , i also succeeded doing this, but i can't make the other tabs show the active state, it just changes the page, and doesn't show that there is a new active tab... the first tab remains blue, and the other are grey all the time.. is there any way to do this?

Thanks...

[Diego_Calp]

Hi Shaul,

You could do it adding some extra code.

The state is defined by the active property in the tab button class, for example:

<a href="#" class="tab-link widget uib_w_2 active" data-uib="framework7/tab" data-ver="0" id="btntab1">

You need to toggle this parameter setting active to the pressed tab and removing from the other. The steps are:

1. Add an id for each tab button, for example btntab1, btntab2, btntab3.

2. Add these lines in the click event for each tab:

$("#btntab1").addClass("active");
$("#btntab2").removeClass("active");
$("#btntab3").removeClass("active");

You need to repeat it in all your tabs click events, changing the addClass/removeClass to set active the clicked and inactive all others.

I'm asuming you have three tabs, adapt it to the number of tabs you have.

This is the lazy way, of course you can create a function like toggleTab(currentTab) that sets the current and disable others iterating.

Hope this helps, 

Regards

Diego