I have done a CMS with the kitchensink layout v1 with a left menu and the right main-view where I load startpage.html
And from the left menu I load page1.html in the main-view.
In page1.html I have a bottom tabbar/toolbar and when I click on any of the tabs I want to load a new page in view-1 and view-2 etc.
But it is not loading the view and make it visible!?
So this is what I have:
index.html
<div class="views">
<div class="view view-left navbar-through">
menu content here..
</div>
<div class="view view-main navbar-through">
main view content here..
</div>
<div class="view view-1 navbar-through">
view-1 content here...
</div>
<div class="view view-2 navbar-through">
view-2 content here...
</div>
</div>
Then in my .js file I init the views and load the default pages in them and this works. I loads the correct pages in the different views.
var mainView=myApp.addView('.view-main',{
dynamicNavbar:true,
});
mainView.loadPage({url:'startpage.html', animatePages:false});
var view1=myApp.addView('.view-1',{
dynamicNavbar:true,
});
view1.loadPage({url:'page1.html', animatePages:false});
var view2=myApp.addView('.view-2',{
dynamicNavbar:true,
});
view2.loadPage({url:'page2.html', animatePages:false});
Then in page1.html where I have the tabbar, and from where I want to load different pages in different views I have this:
<div class="navbar">
<div class="navbar-inner">
<div class="center">PAGE1</div>
<div class="right">
<a href="#" class="link icon-only open-panel"> <i class="icon icon-bars"></i></a>
</div>
</div>
</div>
<div class="pages">
<div data-page="page1" class="page no-swipeback">
<div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="page1.html" data-view=".view-1" class="subtab-link active no-animation">
LOAD PAGE1 IN VIEW 1
</a>
<a href="page2.html" data-view=".view-2" class="subtab-link no-animation">
LOAD PAGE2 IN VIEW2
</a>
<a href="page3.html" data-view=".view-3" class="subtab-link no-animation">
LOAD PAGE3 IN VIEW3
</a>
</div>
</div>
<div class="page-content">
<div class="content-block" style="margin-top:20px;">
some page content here...
</div>
</div>
</div>
</div>
But when I click the link to load for example page2.html in view-2 then nothing happens!
Any input really appreciated, thanks.
I also tried to open page3.html in view-1 from the left menu, but nothing. And no errors.
So the view is not getting active and it is not loading the page that I want. What am I missing?