How do you get a button to behave like a tab?



  • I would like to link to a template page and have it behave just like a tab in a tab bar. Is this possible? I haven’t found any answer that it is.

    The reason I want to do this is to have JS trigger a change in the “Next” button once someone write a message. It all of a sudden becomes green and active. I know the the Onsen UI doesn’t let it’s buttons be disabled, but I could easily make a non-Onsen button if it were possible to do this.

    Onsen UI

    <ons-button id="messageComplete" class="BTNToNextPage" onclick="messageCompleteButton()">Next</ons-button>
    

    JS

    function messageCompleteButton() {
        window.location='address.html';
       };
    

    0_1504138884554_Screenshot 2017-08-30 20.19.59.png


  • Onsen UI

    @Woody-Deck If the page is part of the tab bar, you can call tabbar.setActiveTab(index) to activate it from the button. If it’s not in the tabbar, perhaps you can create an ons-modal with a page inside. By the way, you can add disabled attribute to ons-button.



  • @Woody-Deck Check out this codepen as Onsen 100% supports everything you have asked for.

    https://codepen.io/munsterlander/pen/KvbmBq



  • @Fran-Diox Awesome, thank you!

    @munsterlander Super awesome! Thank you for being a good human. I hope this helps other people who come across my question.


Log in to reply