1 概念理解
data-role = 控件类型
id = 空间ID
data-theme = 控件属性
data-icon = 控件属性
2 控件/界面布局
<div data-role = '' data-theme='' id=''>
</div>
3 程序对GUI元素的控制
<script>
var obj = $( '#id' );
//把控件ID和程序对象绑定 --- 通过JAVASCRIPT,+ JQUERY 的语法, 可以把任何一个HTML的元素,作为对象,
//操作 类似于 Dialog dlg = GetDlgItem(ID);
obj.show();
4 GUI 控制实现-实例
function hideProgress()
{
obj.hide();
}
5 为界面添加 事件
buttonAddCategoryVar.click(function() //为控件 添加事件 响应函数
{
showSelect();
return false;
});
</script>
6 程序部分语法(GUI语法为HTML)
var abc; 声明变量; Javascript 语法
$(#id); 选取HTML元素 JQUERY 的语法
7 GUI 控制实现-实例2
跨 Page 的GUI切换:
在一个PAGE之中,通过 show control 和 hide control 来切换GUI。
跨PAGE的切换(#ID),点击BUTTON后,GUI会先刷新,然后再切换
8 GUI / 数据 交互实例。多线程
异步调用,后台ALAX去网络取数据,取完数据,然后将取下来的数据,交给handler (callback)函数处理:
//通过另外一个线程,AJAX,请求/获取网络资源。当数据下来后,handler 会被alax 去callback 调用。
function getNews(varCat,handler)
{
//拼接 数据源
var varURI = NEWS_URI + varCat;
//另开线程,取数据; 然后把handler交给ALAX, 让ALAX 去调用 处理函数
$.ajax({type: GET, dataType: XML, url: varURI, success: handler});
return false;
}
//处理取下来的,XML 内容
function restoreNews(xml)
{
populateSingleNews(xml);
restore();
}
9 GUI 控制实现-实例
9.1 放一个空的LISTVIEW控件于PAGE之中
<div data-role="content" id="contentCategories">
<ul data-role="listview" data-split-icon="delete" data-split-theme="d" id="currentNews"></ul>
</div>
9.2 根据实际数据填充控件
//取 数据 -- 解析XML元素,很简单
var tmpTxt = $(xml).find(CATEGORY).first().text();
var desc = $(xml).find(DESCR).first().text();
//更新 GUI, 通过动态添加HTML内容
$(HTML_FRG1 + categoryLi + HTML_FRG2 + categoryA + HTML_FRG3 + desc + HTML_FRG4 + category + HTML_FRG5 +
categoryDel + HTML_FRG6).prependTo(currentNewsVar);
9.3 为 LISTVIEW,添加响应事件
//为LISTVIEW中的ITEM,添加 响应动作
var newDeleteItem = document.getElementById(categoryDel);
$(newDeleteItem).click(function() {
$.doTimeout( categoryLi, false );
var newListItem = document.getElementById(categoryLi);
$(newListItem).remove();
storeCurrentNews();
});