<div id="omsmian-toolview" class="views tabs">
<div id="omsmian-toolbarbox" class="toolbar tabbar-labels toolbar-bottom omsmiantoolbar" style="display: ;height: 30px">
<div id="omsmian-toolbar" class="toolbar-inner">
<!-- --------------------------------------------------------------------- -->
<a id="home" href="#view-home" class="tab-link tab-link-active omsmain-tablink">
<span class="tabbar-label">Home</span>
</a>
<!-- --------------------------------------------------------------------- -->
<a id="p2index" href="#view-p2index" class="tab-link omsmain-tablink">
<span class="tabbar-label">Page2</span>
</a>
<!-- --------------------------------------------------------------------- -->
<a id="p3" href="#view-p3" class="tab-link omsmain-tablink">
<span class="tabbar-label">P3</span>
</a>
<!-- --------------------------------------------------------------------- -->
<a id="p5index" href="#view-p5index" class="tab-link omsmain-tablink">
<span class="tabbar-label">P5</span>
</a>
<!-- --------------------------------------------------------------------- -->
</div>
</div>
<div id="view-home" class="view view-main tab tab-active">
<div class="page " data-name="home" style="background-color: ">
<div class="page-content" style="padding: 0;margin:0">
...
</div>
</div>
var homeView = app.views.create('#view-home', {
name: 'view-home',
url: '/',
on: {
pageInit: function() {
console.log('homeView init!');
$$('html').addClass('device-windows theme-dark color-theme-teal');
}
}
});
$$('.omsmain-tablink').on('click', function() {
if ($$('#view-' + this.id).length == 0) {
var tabname = this.id;
var taburl = '/' + this.id + '/';
var htmladd = '<div id="view-' + tabname + '" class="view tab"></div>';
$$('#omsmian-toolview').append(htmladd);
////////////////////////////////////step1. ADD view tab html done, if having 30+ tabs, not everyone will
////////////////////////////////////be used/clicked ... so only add/create once by clicked.
app.views.create('#view-' + this.id, {
name: tabname,
url: taburl
});
////////////////////////////////////////step2. create view >>> linek to routes path done
};
app.tab.show('#view-' + this.id, true);
tabname = null;
taburl = null;
htmladd = null;
console.log('now this tab=' + this.id);
});
0.need set routes done at 1st!!!
KEEP INMIND :
If ur <a id="page2" href="#view-page2"
thus
The ID of class="view tab" >>> id="view-page2"
thus
The url in app.views.create >>> '/page2/' = routes path
app.views.create('#view-page2' , {
name: 'page2',
url: '/page2/'
});
and in the routes :
{
path: '/page2/',
componentUrl: '/uQbKp.html',
options: {
context: {
pagetitle: 'page2',
},
},
},
*******. view url in app.views.create = routes path
this way will keep tabs KeepAlive…If u needed
works in F74.5.0