如何获得钛金属片中选项卡组上方的图像或横幅?

时间:2014-04-24 07:21:09

标签: javascript tabs titanium banner

我仍然很新,但我想在标签栏上方放置一个图像/横幅:

  

图像/横幅

     

标签组

     

标签。

有没有办法如何做到这一点:P?我只能在tabgroup下面得到它。:(

这是我的代码:

console.log(Ti);
var xhr = Titanium.Network.createHTTPClient();
xhr.open("GET","http://rstandaert.createandlearn.eu/mobile_db.js");
xhr.onload = function(){

statusCode = xhr.status;

    if(statusCode == 200)
    {
        var doc = this.responseText;

        var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,'mobile_db.js');
        f.write(doc);
    }

    };
xhr.send();

var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, 'mobile_db.js');



Ti.include(f.nativePath);


Titanium.UI.setBackgroundColor('#DCE6F2');

var tabGroup = Titanium.UI.createTabGroup();


var win1 = Titanium.UI.createWindow({  
    title:"Niveau's",
    backgroundColor:'#DCE6F2',
        window: win1
});

 var win2 = Titanium.UI.createWindow({  
    title:"Domeinen",
    backgroundColor:'#DCE6F2',
        window: win2
});

  var win3 = Titanium.UI.createWindow({  
    title:"Leerwegen",
    backgroundColor:'#DCE6F2',
        window: win3
});

 var win4 = Titanium.UI.createWindow({  
    title:"Instellingen",
    backgroundColor:'#DCE6F2',
        window: win4
});
 var header= Titanium.UI.createView({
    backgroundImage:'logo.jpg',
    //backgroundColor: 'black', 
    top: 0, left:0, 
    height:65, width:320
}); 

var tab3 = Titanium.UI.createWindow({  
    title:'Leerwegen',
    backgroundColor:'#DCE6F2',
        window: win3
});
var tab4 = Titanium.UI.createWindow({  
    title:'Instellingen',
    backgroundColor:'#DCE6F2',
        window: win4
});


var data = [
{title:'Niveau 2', hasChild:true, dest:'Car_1.js', color: '#333333'},
{title:'Niveau 3', hasChild:true, dest:'Car_2.js', color: '#333333'},
{title:'Niveau 4', hasChild:true, dest:'Car_3.js', color: '#333333'}
];

var domeinen = [
{title:'Bouw & infra', hasChild:true, dest:'Dom_1.js', color: '#333333'},
{title:'Afbouw & Onderhoud', hasChild:true, dest:'Dom_2.js', color: '#333333'},
{title:'Techniek en Procesindustrie', hasChild:true, dest:'Dom_3.js', color: '#333333'},
{title:'Media en Vormgeving', hasChild:true, dest:'Dom_4.js', color: '#333333'},
{title:'Informatie en Communicatie technologie', hasChild:true, dest:'Dom_5.js', color: '#333333'},
{title:'Transport, Scheepvaart en Logistiek', hasChild:true, dest:'Dom_6.js', color: '#333333'},
{title:'Mobiliteit en Voertuigen', hasChild:true, dest:'Dom_7.js', color: '#333333'},
{title:'Handel en Ondernemerschap', hasChild:true, dest:'Dom_8.js', color: '#333333'},
{title:'Economie en Administratie', hasChild:true, dest:'Dom_9.js', color: '#333333'},
{title:'veiligheid en Sport', hasChild:true, dest:'Dom_10.js', color: '#333333'},
{title:'Zorg en Welzijn', hasChild:true, dest:'Dom_11.js', color: '#333333'}
];

var Leerwegen = [
{title:'BOL' , hasChild:true, dest:'lw_1.js', color: '#333333'},
{title:'BBL', hasChild:true, dest:'Lw_2.js', color: '#333333'},
{title:'Deeltijd BBL', hasChild:true, dest:'Lw_3.js', color: '#333333'}
];

var Instellingen = [
{title:'ROC' , hasChild:true, dest:'Is_1.js', color: '#333333'},
{title:'Scalda' , hasChild:true, dest:'Is_2.js', color: '#333333'},
{title:'AOC', hasChild:true, dest:'Is_3.js', color: '#333333'},
{title:'Vakscholen', hasChild:true, dest:'Is_4.js', color: '#333333'}
];


var table = Ti.UI.createTableView({
    data: data
});

var table1 = Ti.UI.createTableView({
    data: domeinen
});

var table2 = Ti.UI.createTableView({
    data: Leerwegen
});

var table3 = Ti.UI.createTableView({
    data: Instellingen
});

table.addEventListener('click', function(e){
if (e.rowData.hasChild) {
    var newWin = Ti.UI.createWindow({

    url: e.rowData.dest,
    title:  e.rowData.title,
    backgroundColor: '#DCE6F2'
});
    tab1.open(newWin);
}
});
table1.addEventListener('click', function(e){
if (e.rowData.hasChild) {
    var newWin2 = Ti.UI.createWindow({

    url: e.rowData.dest,
    title:  e.rowData.title,
    backgroundColor: '#DCE6F2'
});
    tab2.open(newWin2);
}
});
table2.addEventListener('click', function(e){
if (e.rowData.hasChild) {
    var newWin3 = Ti.UI.createWindow({

    url: e.rowData.dest,
    title:  e.rowData.title,
    backgroundColor: '#DCE6F2'
});
    tab3.open(newWin3);
}
});

table3.addEventListener('click', function(e){
if (e.rowData.hasChild) {
    var newWin4 = Ti.UI.createWindow({

    url: e.rowData.dest,
    title:  e.rowData.title,
    backgroundColor: '#DCE6F2'
});
    tab4.open(newWin4);
}
});

var view = Ti.UI.createView();
view.add(table);
win1.add(view);

var view2 = Ti.UI.createView();
view2.add(table1);
win2.add(view2);

var view3 = Ti.UI.createView();
view3.add(table2);
win3.add(view3);

var view4 = Ti.UI.createView();
view4.add(table3);
win4.add(view4);




var tab3 = Titanium.UI.createTab({  
    title:'Leerwegen',
       window:win3
});
var tab4 = Titanium.UI.createTab({  
    title:'Instellingen',
       window:win4
});
var tab2 = Titanium.UI.createTab({  
    title:'Domeinen',
    window:win2
});


var tab1 = Ti.UI.createTab({
    title:  "Niveau's",
    window: win1
});

var imageView = Titanium.UI.createImageView({
    image:'topbanner.jpg',
    width:'100%',
    top:0,
    left:0
});

win1.add(imageView);

tabGroup.addTab(tab1);  
tabGroup.addTab(tab2); 
tabGroup.addTab(tab3); 
tabGroup.addTab(tab4);  
tabGroup.open();

提前致谢!!!

1 个答案:

答案 0 :(得分:2)

TabGroup是一个顶级容器组件,这意味着它无法添加到任何内容中。内容必须位于选项卡组内的选项卡内的窗口中。无法在选项卡组本身上方添加标题/横幅。您可以创建一个自定义组件,其外观和操作类似于选项卡组

请参阅此link