titanium开发教程-04-02增加一个搜索栏

 

app.js

 

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

var win = Titanium.UI.createWindow({  
    title:"Tours",
    backgroundColor:"#FFFFFF",
    navBarHidden:false, //Hide the nav bar for the window
    tabBarHidden:false //Hide the tab bar for the window
});
var tab = Titanium.UI.createTab({  
    icon:"KS_nav_views.png",
    title:"Tours",
    window:win
});

var win2 = Titanium.UI.createWindow({
	title:"Specials",
    backgroundColor:"#FFFFFF",
    navBarHidden:false, //Hide the nav bar for the window
    tabBarHidden:false, //Hide the tab bar for the window
	url:"specials.js"//Load the window from an external .js file
});

var tab2 = Titanium.UI.createTab({
	icon:"KS_nav_views.png",
    title:"Specials",
    window:win2
});

var data = [
	{title:"Backpack Cal", leftImage:"images/01-backpack-cal-thumb.png", className:"tableRow"},
	{title:"California Calm", leftImage:"images/02-calm-cal-thumb.png", className:"tableRow"},
	{title:"California Hotsprings", leftImage:"images/03-hotsprings-cal-thumb.png", className:"tableRow"},
	{title:"Cycle California", leftImage:"images/04-cycle-cal-thumb.png", className:"tableRow"},
	{title:"From Desert to Sea", leftImage:"images/05-desert-cal-thumb.png", className:"tableRow"},
	{title:"Kids California", leftImage:"images/06-kids-cal-thumb.png", className:"tableRow"},
	{title:"Nature Watch", leftImage:"images/07-nature-watch-cal-thumb.png", className:"tableRow"},
	{title:"Snowboard Cali", leftImage:"images/08-snowboard-cal-thumb.png", className:"tableRow"},
	{title:"Taste of California", leftImage:"images/09-taste-cal-thumb.png", className:"tableRow"}
]

var rowData = []; //An array that will hold our row objects created by createTableViewRow
for(var i = 0; i < data.length; i++){
	
	//Create the row
	var row = Titanium.UI.createTableViewRow({
		title:data[i].title,			//Text to appear in the row (e.g. "This is row 1")
		leftImage:data[i].leftImage,	//Image to appear to the right of the title
		className:data[i].className,	//A name for this row template (use this property for rows that have similar structures (but not necessarily similar data))
		hasChild:true,					//Renders an arrow on the right
		searchFilter:data[i].title
	});
	
	//3. Store the created TableViewRows in a new array
	rowData.push(row);
}

var searchBar = Titanium.UI.createSearchBar({
	showCancel:true,
	hintText:"搜索"
});

var tableView = Titanium.UI.createTableView({
	//4. Set the new array as the data source for our TableView
	data:rowData,
	search:searchBar,
	filterAttribute:"searchFilter"
});

tableView.addEventListener("click", function(e){
	
	//Create and open a new window
	var w = Titanium.UI.createWindow({
		title:e.rowData.title,
		backgroundColor:"#FFFFFF"
	});
	
	var label = Titanium.UI.createLabel({
		text:"This is a new window",
		height:"auto",
		width:"auto"
	})
	
	w.add(label);
	
	//Slide-open the window
	tab.open(w,{animated:true});
	
});

win.add(tableView);

tabGroup.addTab(tab); 
tabGroup.addTab(tab2); 

// open tab group
tabGroup.open();

 

 

specials.js

 

//Create a pointer to the current window context
var win = Titanium.UI.currentWindow;

var data = [
	{img:"images/spa.png",title:"Day Spa Package",amount:250},
	{img:"images/desert-sea.png", title:"2 Day Salton Sea", amount:350},
	{img:"images/backpack.png", title: "Big Sur Retreat", amount:620}	
]

var rowData = [];

for(var i = 0; i < data.length; i++){
	
	var img = Titanium.UI.createImageView({
		image:data[i].img,
		height:180,
		width:320
	});
	
	var bgBar = Titanium.UI.createView({
		height:36,
		width:"100%",
		bottom:0,
		left:0,
		backgroundColor:"#000",
		opacity:0.6
	})
	
	var title = Titanium.UI.createLabel({
		text:data[i].title,
		height:36,
		width:"75%",
		bottom:0,
		left:0,
		color:"#FFFFFF",
		textAlign:"left"
	});

	var amount = Titanium.UI.createLabel({
		text:"$" + data[i].amount,
		height:36,
		width:"25%",
		bottom:0,
		right:0,
		color:"#FFFFFF",
		textAlign:"right"
	});
	
	//Create the row
	var row = Titanium.UI.createTableViewRow({
		height:"auto",
		searchFilter:data[i].title
	});
	
	//Add the views to the row
	row.add(img);
	row.add(bgBar);
	row.add(title);
	row.add(amount);
	
	rowData.push(row);
}

var searchBar = Titanium.UI.createSearchBar({
	showCancel :true,
	hintText:"搜索"
});

var tableView = Titanium.UI.createTableView({
	data:rowData,
	search:searchBar,
	filterAttribute:"searchFilter"
});

tableView.addEventListener("click", function(e){
	alert(e.source);
});

win.add(tableView);