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 dependenciesif (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 componentvar ApplicationWindow = require('ui/ApplicationWindow');new ApplicationWindow().open();}?ApplicationWindow.js
?
?
//Application Window Component Constructorfunction ApplicationWindow() {//load component dependenciesvar FirstView = require('ui/FirstView');//create component instancevar self = Ti.UI.createWindow({backgroundColor:'#ffffff',navBarHidden:true,exitOnClose:true,title:'JQuery和Titanium的整合'});//construct UIvar 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 interfacemodule.exports = ApplicationWindow;?FirstView.js
?
//FirstView Component Constructorfunction 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}]; // Tablevar 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 listenertableview.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" data-theme="b" ><h3>易维云平台</h3></div><!-- /header --><div data-role="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" /><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" data-theme="b" data-position="fixed" > <img alt="Titanium+JQuery调整" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/logo.gif" /></div></div></body></html>??
?
?
?
?