Newby user that has a couple of questions

[Guest]

I’m looking into onsen ui as a replacement of jQuery Mobile which I have been using for some years now. The questions I have are:

• I would like to insert tabs, no problem I got that to work. But how do I create different tabs for different templates? This is the example I’m working off:

<ons-tabbar animation="slide">
  <ons-tab label="Tab 1" page="tab1.html" active>
  </ons-tab>
  <ons-tab label="Tab 2" page="tab2.html">
  </ons-tab>
</ons-tabbar>

<ons-template id="tab1.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Tab 1</div>
    </ons-toolbar>

    <p style="text-align: center;">
      This is the first page.
    </p>
  </ons-page>
</ons-template>

<ons-template id="tab2.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Tab 2</div>
    </ons-toolbar>

    <p style="text-align: center;">
      This is the second page.
    </p>
  </ons-page>
</ons-template>

• Next: how do I create dynamic templates? I’m building an app which lists news items. When clicked on an item, the item must appear in a different template. I can’t use page=“item.html?item=1” because that gives a 404 error.

• Lastly: Is there a way to use both tabs and splitter menu in one file? The following does not work:

<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html')" tappable>
          Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          Settings
        </ons-list-item>
        <ons-list-item onclick="fn.load('about.html')" tappable>
          About
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>

<ons-tabbar animation="slide">
  <ons-tab label="Tab 1" page="home.html" active>
  </ons-tab>
  <ons-tab label="Tab 2" page="settings.html">
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Main
      </div>
    </ons-toolbar>
    <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
      Swipe right to open the menu!
    </p>
  </ons-page>
</ons-template>

<ons-template id="settings.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Settings
      </div>
    </ons-toolbar>
  </ons-page>
</ons-template>

<ons-template id="about.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        About
      </div>
    </ons-toolbar>
  </ons-page>
</ons-template>

[munsterlander]

@vespino Hopefully, I understood everything correctly. If not, let me know.

1. How to do tabs within tabs (I think this is what you wanted): https://codepen.io/anon/pen/RRrqyL

2. Think of your app as a single page website. You wouldn’t be posting data, but you would pass it via variables passed to your functions, i.e.

<ons-list-item onclick="myFunction(1)">Item 1</ons-list-item>

function myFunction(itm){
  console.log('This was passed '+itm);
}

This tutorial may provide more info: http://tutorial.onsen.io/?framework=vanilla&category=Community tutorials&module=passing_data as inline JS as I wrote it for the above example is contrary to SOC principles.

3. Check out this codepen which solves your issue: https://codepen.io/anon/pen/oYbGjj

[Guest]

@munsterlander Thanks, this helps a lot!

1. is however not what I’m looking for. I’m looking for a way to have tabs per template. In your example tabs 1 and 2 are on every page and 3 and 4 are added to the page. When I remove the first ons-tabbar and add this to the first ons-template, no tabs appear.

I’m looking to have tab 1 and tab 2 on template 1 and tab 3 and 4 on template 2 and so on.

[munsterlander]

@vespino Are you wanting to reuse the tabs? Basically, say you have the home page which has a tabbar. Now for your tabs 1-4, what do you want on them?

[Guest]

@munsterlander the 2 tabs on the homepage must lead to home and a subpage. When arriving on the sub page, 2 other tabs must appear, one to the homepage and one to be defined. Probably not even a link but some sort of action button.

[Guest]

@munsterlander can you help me with this?

[munsterlander]

@vespino Ok, I think I get what you want. In this example, I defined 4 unique tabs, but understand that Tab 3 could be referenced to Tab 1. Your choice of template.

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

Edit: Just wanted to throw in, that I finally made a codepen account so I can save all of these examples I do.

Edit 2: To briefly explain, this uses a navigator so you can push as many different page styles as you want. You could also do a toolbar with a back button if that was the style you wanted. The most important thing I want you to see, is how you use templates to specify the content. You can change any of those and reuse them as little or as much as your app needs.

[Guest]

@munsterlander ok so “pushPage” is the way to go. Thanks, I will look into it some more.

[munsterlander]

@vespino Well, pushPage belongs to the navigator component. I have combined a navigator with a tabbar to get what you want. I really recommend reading the following to get an idea of what you can do:

https://onsen.io/v2/docs/guide/js/

Then for specific questions:

https://onsen.io/v2/docs/js.html

Most importantly, for examples:

http://tutorial.onsen.io/