Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. joyeux86
    J
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Groups

    joyeux86

    @joyeux86

    0
    Reputation
    1
    Posts
    27
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    joyeux86 Follow


    Posts made by joyeux86

    • How to add <ons-tab> dynamicaly with javascript

      I try to customise the <ons-tab> depending on json string. For example if you are admin, you have an additional admin tab.
      So I have a json string and I try to create <ons-tab> element based on the json field.
      I don’t know how to set it properly because when use “$(’#tabbar1’).append” command tabs seems not properly set.

      You can try this code:

      <!DOCTYPE HTML>
        <html>
        <head>
          <meta charset="utf-8"/>
          <meta name="viewport" content="width=device-width, user-scalable=no">
          <script type="text/javascript" src="components/loader.js"></script>
          
          <script type="text/javascript" src="components/monaca-jquery/jquery.js"></script>
          
          <script type="text/javascript" src="components/monaca-onsenui/js/onsenui.js"></script>
          <link rel="stylesheet" href="components/monaca-onsenui/css/onsenui.css">
          <link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components.css">
      
          <script type="text/javascript">    
          
          function getmyjson() {  
              var payload = '{"data":[{"id":"1","title":"ONE"},{"id":"2","title":"TWO"}]}';
              jsondata = JSON.parse(payload);
      
              $.each(jsondata.data, function(i,item){               
                  $('#tabbar1').append('<ons-tab page="#" label="' +  item.title + '" icon="md-settings" active-icon="md-face"></ons-tab>');               
              });
          }   
       
      
          $(document).ready(function() {
              getmyjson();
          });
          
          </script>
        </head>
        <body>
      
          <ons-page>    
            <ons-tabbar swipeable position="auto" id="tabbar1">
              <ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" active></ons-tab> 
              <ons-tab page="#" label="ZERO" icon="md-settings" active-icon="md-face"></ons-tab>
            </ons-tabbar>
          </ons-page>
                  
          <template id="tab1.html">
            <ons-page id="Tab1">
            </ons-page>
          </template>
         
        </body>
        </html>
      

      You will see something unexpected where tabs are not in the “tabbar1” element.
      0_1515362237508_ons-tab-issue.png

      posted in Onsen UI
      J
      joyeux86