Titanium+JQuery整合

Titanium和JQuery整合的结构如下：

 

登录之后：

 

 

Titanium源代码如下：

App.js

 

/*
 * Single Window Application Template:
 * A basic starting point for your application.  Mostly a blank canvas.
 * 
 * In app.js, we generally take care of a few things:
 * - Bootstrap the application with any data we need
 * - Check for dependencies like device type, platform version or network connection
 * - Require and open our top-level UI component
 *  
 */

//bootstrap and check dependencies
if (Ti.version < 1.8 ) {
	alert('Sorry - this application template requires Titanium Mobile SDK 1.8 or later');
}
else if (Ti.Platform.osname === 'mobileweb') {
	alert('Mobile web is not yet supported by this template');
}
else {
	//require and open top level UI component
	var ApplicationWindow = require('ui/ApplicationWindow');
	new ApplicationWindow().open();
}

 

ApplicationWindow.js

 

 

//Application Window Component Constructor
function ApplicationWindow() {
	//load component dependencies
	var FirstView = require('ui/FirstView');
		
	//create component instance
	var self = Ti.UI.createWindow({
		backgroundColor:'#ffffff',
		navBarHidden:true,
		exitOnClose:true,
		title:'JQuery和Titanium的整合'
	});
		
	//construct UI
	var tableview = new FirstView();
	
	
	//Header
    var header = Titanium.UI.createView({
        height:'50dp',
        backgroundColor:'#000',
        backgroundImage:'../images/title.png',
        top:'0dp'
    });
    var header_lbl = Titanium.UI.createLabel({
        text: '易程科技股份有限公司',
        color: '#fff',
        font: {fontSize: 22, fontWeight: 'bold'},
        top:'5dp',
        height:'40dp'
    });
    header.add(header_lbl);
    self.add(header);
    
    
    self.add(tableview);
 
    //Footer
    var footer = Titanium.UI.createView({
        height:'50dp',
        backgroundColor:'#000',
        bottom:'0dp',
        backgroundImage:'../images/foot.png',
    });
    var footer_lbl = Titanium.UI.createLabel({
        text: '',
        color: '#fff',
        font: {fontSize: 22, fontWeight: 'bold'},
        top:'5dp',
        height:'40dp'
    });
    footer.add(footer_lbl);
    
    self.add(footer);
	
	return self;
}

//make constructor function the public component interface
module.exports = ApplicationWindow;

 

FirstView.js

 

//FirstView Component Constructor
function FirstView() {
	// Create an ImageView.
	var anImageView = Ti.UI.createImageView({
		image : '../images/beforeforward.png',
		width : 50,
		height : 50
	});
	
	var data = [
		{
			winId:'txxxt1',
			'color':'#000000',
			'backgroundColor':'#FAFAFA',
			title:'故障信息上报', 
			url:'../htmls/html/index.html',
			data:JSON.stringify({title:'障处理'}),
			leftImage:"../images/w.bmp",
			hasChild: true
		},
		{
			winId:'txxxt5',
			'color':'#000000',
			'backgroundColor':'#FAFAFA',
			title:'当前故障一览', 
			url:'../htmls/html/index.html',
			data:JSON.stringify({title:'当前故障一览',type:4}),
			leftImage:"../images/w.bmp",
			rightImage:"./images/beforeforward.png",
			hasChild: true
		}
	];
    
    // Table
	var tableview= Ti.UI.createTableView({
        data: data,
        top:'50dp',
        bottom:'50dp',
        //This is what I used to do to include a header/footer
        // headerView: header,
        // footerView: footer
    });
    
    
    
    // create table view event listener
	tableview.addEventListener('click', function(e) {
		if(e.rowData.url) {
			//if(null==dataWins[e.rowData.winId]){
				var win = Ti.UI.createWindow({windowSoftInputMode:Ti.UI.Android.SOFT_INPUT_ADJUST_RESIZE});
				
				var webview = Ti.UI.createWebView({
					url:e.rowData.url
				});
				win.add(webview);
				var label = Ti.UI.createLabel({
					text : 'loading....'
				});
				label.addEventListener('click', function(ex) {
					webview.reload();
				});
				win.add(label);
				
				win.addEventListener('open', function(ex) {
					Ti.App.fireEvent('currWin', {view:webview});
				});
				
				webview.SysDatas=[e.rowData.url];
				win.addEventListener('android:back', function(ex) {
					if(webview.SysDatas.length>1){
						webview.url=webview.SysDatas[webview.SysDatas.length-2];
						webview.SysDatas.splice(webview.SysDatas.length-1,1)
						return;
					}
					win.close();
					webview.url='';
				});
				
				webview.addEventListener('load', function(ex) {
					win.remove(label);
				});
			//}
			//是否采用模式窗体
			win.open({
					fullscreen : false,modal : true,
					animated : true,
					windowSoftInputMode : Ti.UI.Android.SOFT_INPUT_ADJUST_RESIZE,
					exitOnClose: true,
					navBarHidden:true,
					backgroundImage : '/images/default.png',
			});
		} else if(e.rowData.href) {
			Titanium.Platform.openURL(e.rowData.href);
		}
	});

	return tableview;
}
module.exports = FirstView;

 

index.html

 

<!DOCTYPE html>
<html>
	<head>
		<title>易维云平台      首页</title>
		<meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" charset="utf-8" src="../js/jquery.js"></script>		
		<script type="text/javascript" charset="utf-8" src="../js/jquery.mobile-1.0a4.1.min.js"></script>
		<link rel="stylesheet" href="../css/jquery.mobile-1.0a4.1.min.css" type="text/css" />
		<meta name="format-detection" content="telephone=no"/>
	</head>
<style type="text/css"> 
p { 
	font-size: 1.5em; 
	font-weight: bold; 
} 
#submit{ 
	float:right; 
	margin:10px; 
} 
#toregist{ 
	float:left; 
	margin:10px; 
} 
</style>
<body>
	<div  data-role="page" id="main" data-theme="b" >
	         <!-- header -->
				<div data-role="header" class="header" data-theme="b" >
						<h3>
							易维云平台
						</h3>
					
				</div>
				<!-- /header -->
	
				<div data-role="content" class="content" data-theme="b" data-position="fixed"  >
		            <p style="text-align: center;"><font color="#2EB1E8" ></font></p>
					<form method="post" id="loginform">
					<label for="username" >用户名:</label>	
					<input type="text" name="username" id="username" value="请输入注册的手机号码" />
					<label for="password" >密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
					<input type="password" name="password" id="password" value="请输入登录密码" />
						<fieldset data-role="controlgroup" >
							<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
							<label for="checkbox-1">保持登录状态</label>
						</fieldset>
						<a href="../html/register.html" data-role="button" id="toregist" data-theme="e">注册</a>
						<a data-role="button" id="submit" data-theme="b" href="../html/taskmgr.html" >登录</a>
					</form>
				</div>
	             <div style="width: 100%;height: auto;">&nbsp;&nbsp;&nbsp;<br/>&nbsp;&nbsp;&nbsp;<br/>&nbsp;&nbsp;&nbsp;<br/>&nbsp;&nbsp;</div>
				<div data-role="footer" class="footer" data-theme="b" data-position="fixed" >
				 	 <img alt="" src="../../logo.gif" />
				</div>
	</div>
	</body>
</html>