Created
April 23, 2013 18:18
-
-
Save skypanther/5446027 to your computer and use it in GitHub Desktop.
Split window-like CommonJS component for Titanium
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// define your leftView and rightView content views here... | |
var Win = require('ui/components/splitwindow'), | |
win = new Win({ | |
splitWidth: 300, | |
masterTitle: 'Master', | |
detailTitle: 'Details', | |
navBarHidden: true, | |
backgroundColor: 'transparent', | |
}, leftView, rightView); | |
win.open(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var is = {}, | |
osname = Ti.Platform.osname; | |
is.ios = (osname === 'iphone' || osname === 'ipad' || osname === 'ipod'), | |
is.width = Ti.Platform.displayCaps.platformWidth; | |
var Titlebar = function(title) { | |
var hView = Ti.UI.createView({ | |
top:0, left: 0, | |
height: 40, | |
width:'100%', | |
backgroundColor:'transparent', | |
borderRadius: 0, | |
}); | |
if(is.ios) { | |
hView.backgroundGradient = { | |
type: 'linear', | |
colors: [ { color: '#666'}, { color: '#020202' } ], | |
} | |
} else { | |
hView.backgroundColor = '#020202'; | |
} | |
var titleView = Ti.UI.createView({ | |
layout: 'horizontal', | |
width: Ti.UI.SIZE, | |
height: Ti.UI.SIZE, | |
top: 0 | |
}); | |
var label = Ti.UI.createLabel({ | |
text: title, | |
color: '#fff', | |
width: Ti.UI.SIZE, | |
height: Ti.UI.SIZE, | |
top: 3, left: 20, | |
font:{ | |
fontWeight:'bold', | |
fontSize:22, | |
} | |
}); | |
titleView.add(label); | |
hView.add(titleView); | |
return hView; | |
}; | |
var SplitWindow = function(params, master, detail) { | |
var options = params || {}; | |
var splitWidth = options.splitWidth || 300; | |
var win = Ti.UI.createWindow(options); | |
win.layout = 'horizontal'; | |
// add left/master view | |
var mView = Ti.UI.createView({ | |
width: splitWidth, | |
}); | |
var masterTitle = new Titlebar(options.masterTitle || 'Master'); | |
mView.add(masterTitle); | |
win.masterTitle = masterTitle; | |
if(master) { | |
master.top = 40; | |
mView.add(master); | |
win.master = master; | |
} else { | |
win.master = mView; | |
} | |
win.add(mView); | |
var divider = Ti.UI.createView({ | |
width: 1, height: Ti.UI.FILL, | |
backgroundColor: '#ccc' | |
}); | |
win.add(divider); | |
// add right/detail view | |
var rView = Ti.UI.createView({ | |
width: (is.width - splitWidth - 1), | |
}); | |
rView.add(new Titlebar(options.detailTitle || 'Detail')); | |
if(detail) { | |
detail.top = 40; | |
rView.add(detail); | |
win.detail = detail; | |
} else { | |
win.detail = rView; | |
} | |
win.add(rView); | |
if(typeof options.backgroundImage == 'string') { | |
win.backgroundColor = 'transparent'; | |
mView.backgroundColor = 'transparent'; | |
rView.backgroundColor = 'transparent'; | |
win.backgroundImage = options.backgroundImage; | |
} | |
return win; | |
} | |
module.exports = SplitWindow; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment