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" >密 码:</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;"> <br/> <br/> <br/> </div>
<div data-role="footer" class="footer" data-theme="b" data-position="fixed" >
<img alt="" src="../../logo.gif" />
</div>
</div>
</body>
</html>