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.
