Tabbed app, define link target app tab


#1

I’ve a tabbed app structure like this example:

https://framework7.io/docs/tabs.html#views-as-tabs

Is it possible for links in a side panel to define on which tab it should open, and activate that tab? If this isn’t built in, I think I add a custom callback, which utilizes a custom attribute like below and switches the tab before processing the route. Is this a good way to go?

... in side menu ....
  <a href="/news-index" data-tab="#tab-news">
....

And then a event handler like this:

$('body').on('.panel-left a', function() {
  if ( $(this).attr('data-tab') ) {
    myf7app.tab.show( $(this).attr('data-tab') );
  }
});

#2

Yes, you need to specify the View where to load the page with data-view attribute. And add tab-link class and data-tab attribute to specify Tab-View to show:

<a href="/news-index" class="tab-link" data-tab="#tab-news" data-view="#tab-news">

#3

I’ve tested that combination. It switches to the correct tab/view, but the tabbar doesn’t update to the active tab, and the app doesn’t navigate to the given route. If I remove the data-tab attribute, it correctly navigates to the route on #view-events, but obviously doesn’t change the active tab.

Could it be that the handler for ‘data-tab’ attribute stops event propagation, so that regular navigation is prevented?

<div id="app">
    <!-- Status bar overlay for fullscreen mode-->
    <div class="statusbar"></div>

    <div class="panel panel-left panel-cover">
	<a href="/contact" class="tab-link panel-close" data-tab="#view-events" data-view="#view-events">
	    Test
	</a>
    </div>

    <div id="view-intro" class="view"></div>

    <!-- Views/Tabs container -->
    <div id="views-main" class="views tabs safe-areas">
	<!-- Tabbar for switching views-tabs -->
	<div class="toolbar tabbar-labels toolbar-bottom">
	    <div class="toolbar-inner">
		<a href="#view-home" class="tab-link tab-link-active">
		    <i class="icon material-icons">home</i>
		    <span class="tabbar-label">Nieuws</span>
		</a>
		<a href="#view-events" class="tab-link">
		    <i class="icon material-icons">date_range</i>
		    <span class="tabbar-label">Events</span>
		</a>
		<a href="#view-info" class="tab-link">
		    <i class="icon material-icons">info_outline</i>
		    <span class="tabbar-label">Informatie</span>
		</a>
		<a href="#view-video" class="tab-link">
		    <i class="icon material-icons">play_circle_outline</i>
		    <span class="tabbar-label">Video</span>
		</a>
		<a href="#view-more" class="tab-link">
		    <i class="icon material-icons">more_horiz</i>
		    <span class="tabbar-label">Meer</span>
		</a>
	    </div>
	</div>

	<div id="view-home" class="view view-main tab tab-active"></div>
	<div id="view-events" class="view tab"></div>
	<div id="view-info" class="view tab"></div>
	<div id="view-video" class="view tab"></div>
	<div id="view-more" class="view tab"></div>

    </div>
</div>

#4

Yes, you are right, having tab-link class prevent router from loading this url. So, here is a safe workaround. Just use custom route-tab-link class instead on such link, and this live handler after app init:

$(document).on('click', '.route-tab-link', function (e) {
  var url = $(this).attr('href');
  var view = app.views.get($(this).attr('data-view'));
  var tabId = $(this).attr('data-tab');
  app.tab.show(tabId);
  view.router.navigate(url);
});

#5

I will remove this limitation in next update


#6

Great! This was the workaround I was trying to get working :slight_smile: Thanks!

I removed the ‘view.router.nagivate(url)’ as that already happens automatically.