- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
i can get the framework 7 tab bar to work, i mean switch views ,its just static
- Tags:
- HTML5
- Intel® XDK
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
thank you
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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...
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page