topic Hi , i also succeeded doing in Software Archive

Framework 7 tab bar

Ibikunle_o_ — Thu, 10 Mar 2016 07:45:08 GMT

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

Hi,

Diego_Calp — Thu, 10 Mar 2016 11:36:00 GMT

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

thank you

Ibikunle_o_ — Fri, 11 Mar 2016 06:04:01 GMT

thank you

Hi , i also succeeded doing

Shaul_H_ — Sat, 04 Jun 2016 20:04:39 GMT

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

Hi Shaul,

Diego_Calp — Sat, 04 Jun 2016 21:09:16 GMT

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