Hi,
I have a first view (main view with toolbar display:none and tabbar display:none) wich display 2 links : ACCESS A and ACCESS B
I would like to display on ACCESS A : customize toolbar and tabbar and on ACCESS B : another customize toolbar and tabbar
But tabbar display on first main-view…
I tried to do with route.js like :
routes = [
{
path: '/',
url: './index.html',
},
{
path: '/ACCESSA/',
async: function (routeTo, routeFrom, resolve, reject) {
// Router instance
var router = this;
// App instance
var app = router.app;
var idcat="1";
// Show Preloader
app.preloader.show();
app.request({
url: 'http://api.XXXX.com/data/mydata.php',
type: "GET",
dataType: 'json',
data: "id="+id,
timeout: 1000,
success: function(reponse){
if(reponse['success']==true && reponse['results']['nb']>0)
{
var txt=[];
for(var key in reponse['results'])
{
if(!txt[key])
{
txt[key] = [];
}
txt[key]['id']=reponse['results'][key].id;
txt[key]['title']=reponse['results'][key].title;
}
}
else if(reponse['error']=="noresult")
{
}
app.preloader.hide();
// Resolve route to load page
resolve(
{
componentUrl: './pages/index_ACCESS_A.html',
},
{
context: {
txt: txt,
}
}
);
alert("test");
},
error: function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
{
app.preloader.hide();
navigator.notification.confirm(
"Error loading ! Refresh ?",
callback_refresh_result,
'Information',
'No,Yes');
}
else
{
app.preloader.hide();
alert("Error loading data !");
}
}
})
},
on: {
pageInit: function (e, page) {
},
pageBeforeIn: function (e, page) {
$$('.views').addClass("toolbar-fixed");
$$('.views').addClass("tab");
$$('.toolbar').html(`<div class="toolbar-inner toolbar_casanovapro">
<a href="/ACCESSA/" class="tab-link tab-link-active">
<i class="fa fa-home fa-lg" aria-hidden="true" style="margin-top:5px;"></i>
<span class="tabbar-label" style="font-size:0.7em;">INDEX ACCESS A</span>
</a>
<a href="/ACCESSA_TAB2/" class="tab-link">
<i class="fa fa-plug" aria-hidden="true" style="margin-top:5px;"></i>
<span class="tabbar-label" style="font-size:0.7em;">TAB 2</span>
</a>
</div>`
);
$$('#view-ACCESSA').addClass("tab-active");
$$('.toolbar').show();
},
},
},
index.html like this :
<div id="app">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<!-- Views/Tabs container -->
<div class="views ios-edges">
<div class="toolbar tabbar-labels toolbar-bottom-md" style="display:none;"></div>
<div id="view-home" class="view view-main">
<div class="page vertical-center" data-page="home">
<!-- Scrollable page content-->
<div class="page-content container_home">
<div class="row row_home" align="center">
<div class="col-100"><a href="/ACCESSA/" class="link">ACCESSA</a></div>
<div class="col-100" style="height:15%;"></div>
<div class="col-100"><a href="/ACCESSB/" id="link">ACCESSB</a></div>
</div>
</div>
</div>
</div>
<!-- P.1 -->
<!-- view-ACCESSA view-main -->
<div id="view-ACCESSA" class="view tab"></div>
<!-- End of VIEW ACCESSA-->
<!-- P.2 -->
<!-- view-ACCESSA_TAB2 -->
<div id="view-ACCESSA_TAB2" class="view tab"></div>
</div>
</div>
On app.js :
// Init Create views
var homeView = app.views.create('#view-home', {
url: '/'
});
var ACCESSAView = app.views.create('#view-ACCESSA', {
url: '/ACCESSA/'
});
var ACCESSA_TAB2View = app.views.create('#view-ACCESSA_', {
url: '/ACCESSA_TAB2/'
});