Tabbar and Splitter

Riaz

Hi,

I’m pretty new to OnsenUI and I want to find out if there is a way to retain, the splitter and Tabbar on every page of an app ?

when I create a new page and push the page into the navigator, like:

document.querySelector('#myNavigator').pushPage("html/home.html");

the page loses the tabbar and splitter, also the header dissappears.

Can someone point me in the direction of maybe a template that can do this ?

Thanks!

Fran Diox

@Riaz You can think about those 3 components as if they were “frames” which content can be changed. If you have a Navigator and, inside it, you put a Splitter, whenever you change the Navigator content, the Splitter will be gone. However, if you put the Navigator as a child of the Splitter, you can safely modify Navigator’s content while keeping the Splitter. Same works for the Tabbar.

You have to think what’s the best structure for your app and choose the right component order. I’d recommend to have a look at the Todo-app and its tutorial. Hope it helps!

Riaz

Thanks so much Fran! I will definitely have a look!

Riaz

Hi @Fran-Diox

Thanks for the help, I managed to get the structure I wanted, however I’m having a slight problem.

When I open the side menu and click on a link, it no longer goes to the desired page, but it does reach the method it supposed to.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Onsen UI Memo App 2.0</title>
    <script src="lib/onsen/js/onsenui.js"></script>
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
    <link href="lib/onsen/css/onsen-css-components.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="style.css">
    <link href="css/app.min.css" rel="stylesheet" />

</head>

<body>

    <ons-splitter id="mySplitter">
        <ons-splitter-side page="html/menu.html" swipeable width="250px" collapse swipe-target-width="50px">
        </ons-splitter-side>
        <ons-splitter-content>
            <ons-toolbar>
                <div class="center logo"><img src="images/logo.png" /></div>
            </ons-toolbar>
            
            <!-- NAVIGATOR -->
            <ons-navigator id="myNavigator">
            </ons-navigator>
            
            <ons-toolbar>
                <div class="center logo"><img src="images/logo.png" /></div>
            </ons-toolbar>
            <ons-tabbar id="myTabbar" position="bottom">
                <ons-tab>
                    <ons-button component="button/menu" onclick="document.querySelector('#mySplitter').left.toggle();">
                        <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
                    </ons-button>
                </ons-tab>
                <ons-tab page="html/contact.html">
                    <ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
                </ons-tab>
                <ons-tab page="html/home.html" class="heart-btn" active>
                    <img src="images/heart-btn.png" />
                </ons-tab>
                <ons-tab page="html/completed_tasks.html">
                    <ons-icon icon="ion-ios-cart, material:md-shopping-cart" size="32px, material:24px"></ons-icon>
                </ons-tab>
                <ons-tab page="html/completed_tasks.html">
                    <ons-icon icon="ion-search, material:md-search" size="32px, material:24px"></ons-icon>
                </ons-tab>
            </ons-tabbar>
        
        </ons-splitter-content>
    </ons-splitter>

</body>
</html>

Menu.html

<ons-page id="menuPage">
    <ons-list id="default-category-list">
        
        <ons-list-header>Default</ons-list-header>
        <ons-list-item tappable category-id="Home" component="gotoPage" page="splitter.html">
            <label class="center" for="radio-home">Home</label>
        </ons-list-item>
        
        <ons-list-item tappable category-id="Decorations" component="gotoPage" page="html/events.html">
            <label class="center" for="radio-decorations">Events</label>
        </ons-list-item>
        
    </ons-list>
</ons-page>

controllers.js

/***********************************************************************
 * App Controllers. These controllers will be called on page initialization. *
 ***********************************************************************/

myApp.controllers = {

    //////////////////////////
    // Tabbar Page Controller //
    //////////////////////////

    tabbarPage: function (page) {
        // Set button functionality to open/close the menu.
        page.querySelector('[component="button/menu"]').onclick = function () {
            document.querySelector('#mySplitter').left.toggle();
        };
        
        // Set button functionality to push 'new_task.html' page.
        Array.prototype.forEach.call(page.querySelectorAll('[component="button/new-task"]'), function (element) {
            element.onclick = function () {
                document.querySelector('#myNavigator').pushPage('html/new_task.html');
            };
            
            element.show && element.show(); // Fix ons-fab in Safari.
        });
        
    },

    ////////////////////////
    // Menu Page Controller //
    ////////////////////////

    menuPage: function (page) {

        /* WHEN I CLICK ON THE MENU BUTTON IT COMES HERE
         *
         * BUT IT DOESN'T REDIRECT TO THE PAGE
         *
         */
         
        Array.prototype.forEach.call(page.querySelectorAll('[component="gotoPage"]'), function (element) {
            element.onclick = function () {
                var pageUrl = this.getAttribute("page");
                document.querySelector('#myNavigator').pushPage(pageUrl); 
                document.querySelector('#mySplitter').left.toggle();
            };
            
            element.show && element.show(); // Fix ons-fab in Safari.
        });
    },

    showDialog: function (id) {
        document.getElementById(id).show();
    },

    hideDialog: function (id) {
        document.getElementById(id).hide();
    },
}

Any help from anyone of the smart people on here would be great much appreciated!!

munsterlander

@Riaz Based on what I see, it probably is working, just your navigator is very small height wise. You are mixing a lot of components that all do the same thing. The navigator is built-in to splitter via the content method. Tabbar is like a navigator with tabs. So really, you either need to change content of the splitter or change the tabs.

I am very confused with your workflow. Can you explain what you are trying to do and how the user should experience it? I feel there may be a better way.

Riaz

Hi @munsterlander, I’m new to Onsen UI I’m still trying to figure out how everything fits in. I used the To-Do App example and moved things around :worried:

What I’m trying to do in simplest explanation:
I need to create a template that has a Header, Splitter and Tabbar… I need these 3 components on every page of the app.

The problem I’m facing is, when I use to navigate

document.querySelector('#myNavigator').pushPage(myPage);

it goes to the page but the Header, Splitter and Tabbar disappear. If I can get a simple template that does this I would really appreciate it!

munsterlander

@Riaz Ok, here you go. https://codepen.io/munsterlander/pen/gmoeXM

I think though, this is not the best implementation. I understand what design you want, my real question, was why do you want it that way? What are you trying to accomplish? Is the menu supposed to change tabs or load new content? If it is loading new content, then why have tabs? If you want tabs, should the menu when it loads new content, load 3 different tabs that provide different content? Like, in the example posted above, if you go to the settings page, should it have 3 tabs for different types of settings BUT if you go to the home page, it has 3 tabs for different home content? Does this make sense because you are combing 2 navigational components and I want to make sure it fits your use case.

Edit: So in my example, home and settings share the same tabs but I just labeled settings tab different so you would know it loaded. About is 3 new tabs. Other is just a blank page showing how you could load other content.

Riaz

@munsterlander Thanks so much for this codepen!

I’ll try and explain the 3 components to you,

Splitter:
This should have the normal navigation menu to navigate between pages, home, contact etc

so its the same on all pages

Tabbar:
This needs to be on every page as the links will link to external URL’s so it’s not different links.

should be same on all pages

Header:
All pages will have the same header,

should be same on all pages

your code is so simple, I see now i over complicated it facepalm

munsterlander

@Riaz Ok, glad you got it working!

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Tabbar and Splitter